81e56ef6a0
- Updated SearchBar component to use max-width and height utilities for better responsiveness. - Adjusted ArtistsPage layout to include container for consistent padding and spacing. - Modified BestSeller and NewRelease components to use grid layout for better item arrangement. - Enhanced Frame component layout and styling for improved visual hierarchy. - Refined HomeBanner component for better spacing and text sizing. - Improved Navbar component with mobile menu functionality and responsive design. - Updated RecentDesign and SideNav components for better mobile experience and layout. - Enhanced Sidebar component with mobile menu toggle and improved navigation links. - Refactored marketplace Navbar to include mobile menu and improved layout for icons and buttons.
112 lines
3.6 KiB
TypeScript
112 lines
3.6 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={`fixed md:relative bg-[#050616] w-full md:w-[80px] h-[60px] md:h-screen bottom-0 left-0 right-0 md:top-0 transition-all duration-300 ease-in-out z-20 ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
|
|
{/* Mobile Menu */}
|
|
<div className="md:hidden flex items-center justify-between px-4 h-full">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="hover:bg-transparent"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<Menu className="h-6 w-6 text-white" />
|
|
</Button>
|
|
|
|
{/* Mobile Navigation Links: show only first two, centered */}
|
|
<div className="flex flex-1 items-center justify-center gap-8">
|
|
{links.slice(0, 2).map((link) => (
|
|
<Button
|
|
key={link.path}
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`flex flex-col items-center justify-center flex-1 p-2 rounded-lg transition-colors duration-200 ${
|
|
pathname === link.path ? 'bg-[#1a1c2b]' : 'hover:bg-transparent'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={link.icon}
|
|
alt={link.label}
|
|
width={24}
|
|
height={24}
|
|
className="hover:opacity-80 transition-opacity duration-200 mb-1"
|
|
priority={link.path === "/"}
|
|
/>
|
|
<span className="text-white text-xs">{link.label}</span>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex flex-col items-center justify-center gap-4 p-4 md:pt-10">
|
|
<div className="flex flex-col items-center gap-4 md:gap-6">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="mb-5 hover:bg-transparent"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<Menu className="h-6 w-6 text-white" />
|
|
</Button>
|
|
|
|
{/* Desktop 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-transparent'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={link.icon}
|
|
alt={link.label}
|
|
width={24}
|
|
height={24}
|
|
className="group-hover:opacity-80 transition-opacity duration-200"
|
|
priority={link.path === "/"}
|
|
/>
|
|
</Button>
|
|
|
|
<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 hidden md:block`}>
|
|
{link.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |