ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-21 06:34:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix navigation (#20)

Browse Source
This commit is contained in:
Doh
2025-01-04 12:32:51 -05:00
committed by GitHub
parent 9c89132cf1
commit f04a5e484c
4 changed files with 62 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

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

4
components/Layout.tsx
View File

@@ -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"> <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
<Header className="sticky top-0 z-50" /> <Header className="sticky top-0 z-50" />
<div className="flex flex-1 overflow-hidden"> <div className="flex flex-1 overflow-hidden">
<Navigation /> <Navigation viewPort='main' />
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900"> <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900">
{children} {children}
</main> </main>
<Navigation isMobile /> <Navigation viewPort='mobile' />
</div> </div>
</div> </div>
</div> </div>

83
components/Navigation.tsx
View File

@@ -2,9 +2,11 @@
import Link from 'next/link' import Link from 'next/link'
import { Home, Calendar, List, Gift, Coins, Settings, Info } from 'lucide-react' import { Home, Calendar, List, Gift, Coins, Settings, Info } from 'lucide-react'
import { useState } from 'react' import { useEffect, useState } from 'react'
import AboutModal from './AboutModal' import AboutModal from './AboutModal'
type ViewPort = 'main' | 'mobile'
const navItems = [ const navItems = [
{ icon: Home, label: 'Dashboard', href: '/', position: 'main' }, { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
{ icon: List, label: 'Habits', href: '/habits', position: 'main' }, { icon: List, label: 'Habits', href: '/habits', position: 'main' },
@@ -16,12 +18,29 @@ const navItems = [
interface NavigationProps { interface NavigationProps {
className?: string 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) 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 ( return (
<> <>
<div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */} <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
@@ -55,36 +74,38 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
) )
} }
return ( if (viewPort === 'main' && !isMobileView) {
<div className="hidden lg:flex lg:flex-shrink-0"> return (
<div className="flex flex-col w-64"> <div className="hidden lg:flex lg:flex-shrink-0">
<div className="flex flex-col h-0 flex-1 bg-gray-800"> <div className="flex flex-col w-64">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto"> <div className="flex flex-col h-0 flex-1 bg-gray-800">
<nav className="mt-5 flex-1 px-2 space-y-1"> <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
{navItems.filter(item => item.position === 'main').map((item) => ( <nav className="mt-5 flex-1 px-2 space-y-1">
<Link {navItems.filter(item => item.position === 'main').map((item) => (
key={item.label} <Link
href={item.href} key={item.label}
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" 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" /> <Info className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
{item.label} About
</Link> </button>
))} </div>
</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>
</div> </div>
</div> </div>
</div> </div>
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
</div> </div>
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} /> )
</div> }
)
} }

2
package.json
View File

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