45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { X } from "lucide-react"
|
|
import { useSidebar } from "@/context/SidebarContext"
|
|
import config from "@/config.json"
|
|
import strings from "@/strings.json"
|
|
|
|
export function MobileSidebar() {
|
|
const { isOpen, toggleSidebar } = useSidebar()
|
|
|
|
return (
|
|
<aside
|
|
className={`fixed inset-y-0 left-0 z-30 w-64 transform overflow-y-auto bg-background px-4 py-6 transition-transform duration-300 ease-in-out ${
|
|
isOpen ? "translate-x-0" : "-translate-x-full"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-6 mt-12">
|
|
<Link href="/" className="text-4xl font-bold text-primary">
|
|
{process.env.BLOG_NAME || strings.blogPop}
|
|
</Link>
|
|
<Button variant="ghost" size="icon" onClick={toggleSidebar} className="md:hidden">
|
|
<X className="h-6 w-6" />
|
|
<span className="sr-only">{strings.screenReaderCloseSidebar}</span>
|
|
</Button>
|
|
</div>
|
|
<nav className="flex flex-col space-y-4">
|
|
<Link href="/" className="text-lg text-muted-foreground hover:text-primary">
|
|
{strings.homeLinkTextNavbar}
|
|
</Link>
|
|
<Link href="/categories" className="text-lg text-muted-foreground hover:text-primary">
|
|
{strings.categoriesLinkTextNavbar}
|
|
</Link>
|
|
{config.personalWebsite && (
|
|
<Link href={config.personalWebsiteUrl} className="text-lg text-muted-foreground hover:text-primary">
|
|
{config.personalWebsiteLinkText}
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|
|
|