fix navigation (#20)

components/Layout.tsx

@@ -7,12 +7,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
       <Header className="sticky top-0 z-50" />
       <div className="flex flex-1 overflow-hidden">
-        <Navigation />
+        <Navigation viewPort='main' />
         <div className="flex-1 flex flex-col">
           <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900">
             {children}
           </main>
-          <Navigation isMobile />
+          <Navigation viewPort='mobile' />
         </div>
       </div>
     </div>

components/Navigation.tsx

@@ -2,9 +2,11 @@
 
 import Link from 'next/link'
 import { Home, Calendar, List, Gift, Coins, Settings, Info } from 'lucide-react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import AboutModal from './AboutModal'
 
+type ViewPort = 'main' | 'mobile'
+
 const navItems = [
   { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
   { icon: List, label: 'Habits', href: '/habits', position: 'main' },
@@ -16,18 +18,35 @@ const navItems = [
 
 interface NavigationProps {
   className?: string
-  isMobile?: boolean
+  viewPort: ViewPort
 }
 
-export default function Navigation({ className, isMobile = false }: NavigationProps) {
+export default function Navigation({ className, viewPort }: NavigationProps) {
   const [showAbout, setShowAbout] = useState(false)
-  if (isMobile) {
+  const [isMobileView, setIsMobileView] = useState(false)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobileView(window.innerWidth < 1024)
+    }
+
+    // Set initial value
+    handleResize()
+
+    // Add event listener
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  if (viewPort === 'mobile' && isMobileView) {
     return (
       <>
         <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
         <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
           <div className="flex justify-around">
-            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) => 
+            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) =>
               item.onClick ? (
                 <button
                   key={item.label}
@@ -55,36 +74,38 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
     )
   }
 
-  return (
-    <div className="hidden lg:flex lg:flex-shrink-0">
-      <div className="flex flex-col w-64">
-        <div className="flex flex-col h-0 flex-1 bg-gray-800">
-          <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-            <nav className="mt-5 flex-1 px-2 space-y-1">
-              {navItems.filter(item => item.position === 'main').map((item) => (
-                <Link
-                  key={item.label}
-                  href={item.href}
-                  className="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
+  if (viewPort === 'main' && !isMobileView) {
+    return (
+      <div className="hidden lg:flex lg:flex-shrink-0">
+        <div className="flex flex-col w-64">
+          <div className="flex flex-col h-0 flex-1 bg-gray-800">
+            <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+              <nav className="mt-5 flex-1 px-2 space-y-1">
+                {navItems.filter(item => item.position === 'main').map((item) => (
+                  <Link
+                    key={item.label}
+                    href={item.href}
+                    className="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
+                  >
+                    <item.icon className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
+                    {item.label}
+                  </Link>
+                ))}
+              </nav>
+              <div className="px-2 pb-2">
+                <button
+                  onClick={() => setShowAbout(true)}
+                  className="w-full group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
                 >
-                  <item.icon className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
-                  {item.label}
-                </Link>
-              ))}
-            </nav>
-            <div className="px-2 pb-2">
-              <button
-                onClick={() => setShowAbout(true)}
-                className="w-full group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
-              >
-                <Info className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
-                About
-              </button>
+                  <Info className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
+                  About
+                </button>
+              </div>
             </div>
           </div>
         </div>
+        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
       </div>
-      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
-    </div>
-  )
+    )
+  }
 }