fix navigation (#20)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.1.10
+
+### Fixed
+
+- fix navigation
+
 ## Version 0.1.9
 
 ### Fixed

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,12 +18,29 @@ 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 */}
@@ -55,6 +74,7 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
     )
   }
 
+  if (viewPort === 'main' && !isMobileView) {
     return (
       <div className="hidden lg:flex lg:flex-shrink-0">
         <div className="flex flex-col w-64">
@@ -88,3 +108,4 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
       </div>
     )
   }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",