Skip to content

Commit

Permalink
fix: mobile navigation menu implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@while-basic
while-basic committed Dec 4, 2024
1 parent 46d75be commit f7583d2
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 152 deletions.
51 changes: 26 additions & 25 deletions components/mobile-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"
import { Menu } from "lucide-react"
import { useState } from "react"

const MobileNav = () => {
export const MobileNav = () => {
const pathname = usePathname()
const [open, setOpen] = useState(false)

Expand Down Expand Up @@ -44,40 +44,41 @@ const MobileNav = () => {
},
{
href: "/chat",
label: "Chat (coming soon)",
label: "Chat",
active: pathname === "/chat",
}
]

return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild className="md:hidden">
<Button variant="ghost" size="icon" className="md:hidden relative z-50">
<SheetTrigger asChild>
<Button
variant="ghost"
size="icon"
className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="p-0 z-[1000]">
<div className="mt-16">
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<div className="space-y-1">
{routes.map((route) => (
<Link
key={route.href}
href={route.href}
onClick={() => setOpen(false)}
className={`text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-primary hover:bg-primary/10 rounded-lg transition ${
route.active ? "text-primary bg-primary/10" : "text-muted-foreground"
}`}
>
{route.label}
</Link>
))}
</div>
</div>
</div>
</div>
<SheetContent
side="left"
className="w-[280px] sm:w-[360px] pr-0"
>
<nav className="flex flex-col space-y-4">
{routes.map((route) => (
<Link
key={route.href}
href={route.href}
onClick={() => setOpen(false)}
className={`px-2 py-1 text-sm font-medium transition-colors hover:text-primary ${
route.active ? "text-primary" : "text-muted-foreground"
}`}
>
{route.label}
</Link>
))}
</nav>
</SheetContent>
</Sheet>
)
Expand Down
218 changes: 110 additions & 108 deletions components/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Menu, X, Home } from "lucide-react"
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import type { User } from '@supabase/auth-helpers-nextjs'
import { NavDropdown } from "@/components/nav-dropdown"
import { MobileNav } from "@/components/mobile-nav"

const Navbar = () => {
const pathname = usePathname()
Expand Down Expand Up @@ -42,21 +43,16 @@ const Navbar = () => {
label: "About",
active: pathname === "/about",
},
// {
// href: "/blog",
// label: "Blog",
// active: pathname === "/blog",
// },
{
href: "/projects",
label: "Projects",
active: pathname === "/projects",
},
{
href: "/skills",
label: "Skills",
active: pathname === "/skills",
},
// {
// href: "/skills",
// label: "Skills",
// active: pathname === "/skills",
// },
{
href: "/experience",
label: "Experience",
Expand All @@ -80,124 +76,130 @@ const Navbar = () => {
]

return (
<header className="fixed top-0 z-50 w-full border-b bg-white/80 dark:bg-black/80 backdrop-blur-sm">
<div className="max-w-[1400px] mx-auto flex h-14 items-center justify-between px-6">
<div className="flex items-center">
<Link href="/" className="text-lg font-semibold hover:opacity-80">
Christopher Celaya
</Link>
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 items-center">
<div className="md:hidden">
<MobileNav />
</div>

{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-6">
{routes.map((route) => (
<Link
key={route.href}
href={route.href}
className={`text-sm font-medium transition-colors hover:opacity-80 ${
route.active ? "opacity-100" : "opacity-60"
}`}
>
{route.label}
</Link>
))}
</nav>

{/* Desktop Actions */}
<div className="hidden md:flex items-center space-x-6">
{user ? (
<>
<Link
href="/dashboard"
className="flex items-center space-x-2 text-sm font-medium hover:opacity-80"
>
<Home className="h-4 w-4" />
<span>Dashboard</span>
</Link>
<button
onClick={handleSignOut}
className="text-sm font-medium hover:opacity-80"
>
Sign Out
</button>
</>
) : (
<Link
href="/auth/sign-in"
className="text-sm font-medium hover:opacity-80"
>
Sign In
<div className="hidden md:flex">
<div className="flex items-center">
<Link href="/" className="text-lg font-semibold hover:opacity-80">
Christopher Celaya
</Link>
)}
<ModeToggle />
<NavDropdown />
</div>

{/* Mobile Menu Button */}
<button
onClick={() => setIsOpen(!isOpen)}
className="md:hidden p-2"
>
{isOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
</button>
</div>

{/* Mobile Navigation */}
{isOpen && (
<div className="md:hidden fixed inset-x-0 top-14 bottom-0 bg-white/95 dark:bg-black/95 backdrop-blur-sm overflow-y-auto">
<div className="px-4 py-4 space-y-3 border-b border-gray-200 dark:border-gray-800">
</div>

{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-6">
{routes.map((route) => (
<Link
key={route.href}
href={route.href}
className={`block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
route.active
? "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
: "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
className={`text-sm font-medium transition-colors hover:opacity-80 ${
route.active ? "opacity-100" : "opacity-60"
}`}
onClick={() => setIsOpen(false)}
>
{route.label}
</Link>
))}
<div className="px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-800 mt-4">
{user ? (
<div className="flex items-center space-x-4">
<Link
href="/dashboard"
className="flex items-center space-x-2 text-sm font-medium hover:opacity-80"
onClick={() => setIsOpen(false)}
>
<Home className="h-4 w-4" />
<span>Dashboard</span>
</Link>
<button
onClick={handleSignOut}
className="text-sm font-medium hover:opacity-80"
>
Sign Out
</button>
</div>
) : (
</nav>

{/* Desktop Actions */}
<div className="hidden md:flex items-center space-x-6">
{user ? (
<>
<Link
href="/auth/sign-in"
href="/dashboard"
className="flex items-center space-x-2 text-sm font-medium hover:opacity-80"
>
<Home className="h-4 w-4" />
<span>Dashboard</span>
</Link>
<button
onClick={handleSignOut}
className="text-sm font-medium hover:opacity-80"
>
Sign Out
</button>
</>
) : (
<Link
href="/auth/sign-in"
className="text-sm font-medium hover:opacity-80"
>
Sign In
</Link>
)}
<ModeToggle />
<NavDropdown />
</div>

{/* Mobile Menu Button */}
<button
onClick={() => setIsOpen(!isOpen)}
className="md:hidden p-2"
>
{isOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
</button>
</div>

{/* Mobile Navigation */}
{isOpen && (
<div className="md:hidden fixed inset-x-0 top-14 bottom-0 bg-white/95 dark:bg-black/95 backdrop-blur-sm overflow-y-auto">
<div className="px-4 py-4 space-y-3 border-b border-gray-200 dark:border-gray-800">
{routes.map((route) => (
<Link
key={route.href}
href={route.href}
className={`block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
route.active
? "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
: "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
}`}
onClick={() => setIsOpen(false)}
>
Sign In
{route.label}
</Link>
)}
<div className="px-3">
<ModeToggle />
))}
<div className="px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-800 mt-4">
{user ? (
<div className="flex items-center space-x-4">
<Link
href="/dashboard"
className="flex items-center space-x-2 text-sm font-medium hover:opacity-80"
onClick={() => setIsOpen(false)}
>
<Home className="h-4 w-4" />
<span>Dashboard</span>
</Link>
<button
onClick={handleSignOut}
className="text-sm font-medium hover:opacity-80"
>
Sign Out
</button>
</div>
) : (
<Link
href="/auth/sign-in"
className="text-sm font-medium hover:opacity-80"
onClick={() => setIsOpen(false)}
>
Sign In
</Link>
)}
<div className="px-3">
<ModeToggle />
</div>
</div>
</div>
</div>
</div>
)}
)}
</div>
</header>
)
}
Expand Down
17 changes: 17 additions & 0 deletions pages/_document.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
38 changes: 19 additions & 19 deletions public/sitemap.xml
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://chriscelaya.com/about</loc><lastmod>2024-12-04T21:39:10.478Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
<url><loc>https://chriscelaya.com/auth/sign-in</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/auth/sign-out</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/chat/image</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/auth/sign-up</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/chat/inpainter</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/dashboard</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/experience</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
<url><loc>https://chriscelaya.com/gallery</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/generate</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/profile</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
<url><loc>https://chriscelaya.com/projects</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.9</priority></url>
<url><loc>https://chriscelaya.com/chat</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/resume</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/test-openai</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/image-generation</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/links</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/skills</loc><lastmod>2024-12-04T21:39:10.479Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/about</loc><lastmod>2024-12-04T22:39:34.248Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
<url><loc>https://chriscelaya.com/auth/sign-out</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/auth/sign-in</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/auth/sign-up</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/chat/image</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/dashboard</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/generate</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
<url><loc>https://chriscelaya.com/experience</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
<url><loc>https://chriscelaya.com/chat</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/links</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/chat/inpainter</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/gallery</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/profile</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/test-openai</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/projects</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.9</priority></url>
<url><loc>https://chriscelaya.com/resume</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/image-generation</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
<url><loc>https://chriscelaya.com/skills</loc><lastmod>2024-12-04T22:39:34.249Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
</urlset>

0 comments on commit f7583d2

Please sign in to comment.