diff --git a/app/layout.tsx b/app/layout.tsx index b482475..827d9f6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,7 +2,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; import { Providers } from '@/components/providers/Providers'; -import { Navbar } from '@/components/layout/Navbar'; +import { AppLayout } from '@/components/layout/AppLayout'; const inter = Inter({ subsets: ['latin'], @@ -44,8 +44,7 @@ export default function RootLayout({ - -
{children}
+ {children} diff --git a/components/layout/AppLayout.tsx b/components/layout/AppLayout.tsx new file mode 100644 index 0000000..45bc091 --- /dev/null +++ b/components/layout/AppLayout.tsx @@ -0,0 +1,13 @@ +'use client'; + +import { ReactNode } from 'react'; +import { Navbar } from './Navbar'; + +export function AppLayout({ children }: { children: ReactNode }) { + return ( +
+ +
{children}
+
+ ); +} diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx index 22e710e..18468d1 100644 --- a/components/layout/Navbar.tsx +++ b/components/layout/Navbar.tsx @@ -19,14 +19,16 @@ const navItems = [ export function Navbar() { const pathname = usePathname(); const [mounted, setMounted] = useState(false); - const { theme, setTheme, resolvedTheme } = useTheme(); + const themeContext = useTheme(); useEffect(() => { setMounted(true); }, []); const toggleTheme = () => { - setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'); + if (themeContext) { + themeContext.setTheme(themeContext.resolvedTheme === 'dark' ? 'light' : 'dark'); + } }; return ( @@ -59,14 +61,14 @@ export function Navbar() { {/* Theme Toggle */} - {mounted && ( + {mounted && themeContext && (