77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Menu } from "lucide-react";
|
||
|
|
|
||
|
|
|
||
|
|
const links = [
|
||
|
|
{
|
||
|
|
icon: "/home-icon.png",
|
||
|
|
label: "Home",
|
||
|
|
path: "/"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: "/design-icon.png",
|
||
|
|
label: "Design St.",
|
||
|
|
path: "/design"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
export default function Sidebar() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
|
||
|
|
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
|
||
|
|
{/* Menu Icon */}
|
||
|
|
<div className="flex md:flex-col items-center gap-4 md:gap-6">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="mb-5 hover:bg-[#1a1c2b]/50"
|
||
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||
|
|
>
|
||
|
|
<Menu className="h-6 w-6 text-white" />
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
{/* Navigation Links */}
|
||
|
|
{links.map((link) => (
|
||
|
|
<div
|
||
|
|
key={link.path}
|
||
|
|
className={`flex flex-col items-center cursor-pointer group`}
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className={`p-2 rounded-lg transition-colors duration-200 ${
|
||
|
|
pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src={link.icon}
|
||
|
|
alt={link.label}
|
||
|
|
width={24}
|
||
|
|
height={24}
|
||
|
|
className="group-hover:opacity-80 transition-opacity duration-200"
|
||
|
|
priority={link.path === "/"} // Prioritize loading home icon
|
||
|
|
/>
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
{/* Link Label */}
|
||
|
|
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${
|
||
|
|
isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'
|
||
|
|
} group-hover:opacity-80`}>
|
||
|
|
{link.label}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|