Skip to content

Commit 5b67efb

Browse files
amide-initamide-init
committed
Add mobile menu functionality and improve header layout
1 parent 87f48ec commit 5b67efb

1 file changed

Lines changed: 61 additions & 2 deletions

File tree

‎src/App.tsx‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ function App() {
1717
const { hero, footer } = sc
1818

1919
const [theme, setTheme] = useState<Theme>('dark')
20+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
2021

2122
useEffect(() => {
2223
const stored = window.localStorage.getItem('gitforge-theme')
@@ -93,6 +94,10 @@ function App() {
9394
}
9495
}, [location.search, navigate])
9596

97+
useEffect(() => {
98+
setMobileMenuOpen(false)
99+
}, [location.pathname])
100+
96101
useEffect(() => {
97102
document.title = hero.title || 'GitHub Profile'
98103
const firstChar = (hero.title || '?').charAt(0).toUpperCase()
@@ -143,7 +148,7 @@ function App() {
143148
return (
144149
<div className={rootClasses}>
145150
<header className={headerClasses}>
146-
<div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
151+
<div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6 sm:py-4">
147152
<Link
148153
to="/"
149154
className="inline-flex items-center gap-2 no-underline text-slate-900 dark:text-slate-100"
@@ -153,7 +158,9 @@ function App() {
153158
{navInitials}
154159
</span>
155160
</Link>
156-
<nav className="flex items-center gap-3 text-xs font-medium text-slate-700 dark:text-slate-300" aria-label="Primary">
161+
162+
{/* Desktop nav — hidden below md */}
163+
<nav className="hidden md:flex items-center gap-3 text-xs font-medium text-slate-700 dark:text-slate-300" aria-label="Primary">
157164
<Link to="/" className="border-b border-transparent pb-0.5 transition-colors hover:border-slate-500 hover:text-slate-900 dark:hover:border-slate-400 dark:hover:text-slate-50">Home</Link>
158165
<Link to="/videos" className="border-b border-transparent pb-0.5 transition-colors hover:border-slate-500 hover:text-slate-900 dark:hover:border-slate-400 dark:hover:text-slate-50">Videos</Link>
159166
<Link to="/blogs" className="border-b border-transparent pb-0.5 transition-colors hover:border-slate-500 hover:text-slate-900 dark:hover:border-slate-400 dark:hover:text-slate-50">Blogs</Link>
@@ -181,7 +188,59 @@ function App() {
181188
</span>
182189
</button>
183190
</nav>
191+
192+
{/* Mobile controls: theme toggle + hamburger */}
193+
<div className="flex items-center gap-2 md:hidden">
194+
<button
195+
type="button"
196+
onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
197+
className="flex h-8 w-8 items-center justify-center rounded-full border border-slate-300 bg-white/80 text-slate-800 transition hover:bg-white dark:border-slate-500/60 dark:bg-black/20 dark:text-slate-100 dark:hover:bg-black/40"
198+
aria-label="Toggle light and dark mode"
199+
>
200+
{theme === 'dark' ? (
201+
<svg viewBox="0 0 24 24" fill="none" className="h-4 w-4">
202+
<circle cx="12" cy="12" r="4" className="fill-amber-400" />
203+
<path d="M12 2v2m0 16v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2m16 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" className="stroke-amber-400" strokeWidth="1.5" strokeLinecap="round" />
204+
</svg>
205+
) : (
206+
<svg viewBox="0 0 24 24" fill="none" className="h-4 w-4">
207+
<path d="M20 12.5A7.5 7.5 0 0 1 11.5 4 6 6 0 1 0 20 12.5Z" className="fill-slate-700" />
208+
</svg>
209+
)}
210+
</button>
211+
<button
212+
type="button"
213+
onClick={() => setMobileMenuOpen((prev) => !prev)}
214+
className="flex h-8 w-8 items-center justify-center rounded-md text-slate-600 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
215+
aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
216+
>
217+
{mobileMenuOpen ? (
218+
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
219+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
220+
</svg>
221+
) : (
222+
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
223+
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
224+
</svg>
225+
)}
226+
</button>
227+
</div>
184228
</div>
229+
230+
{/* Mobile dropdown menu */}
231+
{mobileMenuOpen && (
232+
<nav className="border-t border-slate-200 bg-slate-50/95 backdrop-blur dark:border-white/5 dark:bg-[#050509]/95 md:hidden" aria-label="Mobile navigation">
233+
<div className="mx-auto flex max-w-5xl flex-col px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300">
234+
<Link to="/" onClick={() => setMobileMenuOpen(false)} className="py-2.5 transition-colors hover:text-slate-900 dark:hover:text-slate-50">Home</Link>
235+
<Link to="/videos" onClick={() => setMobileMenuOpen(false)} className="border-t border-slate-200/60 py-2.5 transition-colors hover:text-slate-900 dark:border-white/5 dark:hover:text-slate-50">Videos</Link>
236+
<Link to="/blogs" onClick={() => setMobileMenuOpen(false)} className="border-t border-slate-200/60 py-2.5 transition-colors hover:text-slate-900 dark:border-white/5 dark:hover:text-slate-50">Blogs</Link>
237+
<Link to="/projects" onClick={() => setMobileMenuOpen(false)} className="border-t border-slate-200/60 py-2.5 transition-colors hover:text-slate-900 dark:border-white/5 dark:hover:text-slate-50">Projects</Link>
238+
<a href={`${import.meta.env.BASE_URL}#github`} onClick={() => setMobileMenuOpen(false)} className="border-t border-slate-200/60 py-2.5 transition-colors hover:text-slate-900 dark:border-white/5 dark:hover:text-slate-50">GitHub</a>
239+
<a href={`${import.meta.env.BASE_URL}#stats`} onClick={() => setMobileMenuOpen(false)} className="border-t border-slate-200/60 py-2.5 transition-colors hover:text-slate-900 dark:border-white/5 dark:hover:text-slate-50">Stats</a>
240+
<a href={footer.githubUrl || '#'} target="_blank" rel="noreferrer" onClick={() => setMobileMenuOpen(false)} className="border-t border-slate-200/60 py-2.5 transition-colors hover:text-slate-900 dark:border-white/5 dark:hover:text-slate-50">{footer.githubLabel || 'Fork'}</a>
241+
</div>
242+
</nav>
243+
)}
185244
</header>
186245

187246
<main>

0 commit comments

Comments
 (0)