svrjs-nextjs-website/app/(auth)/_components/Mobilenav.tsx
2024-07-28 20:17:09 +05:30

57 lines
1.4 KiB
TypeScript

"use client";
import React from "react";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import Link from "next/link";
import Image from "next/image";
import { AdminLinks } from "@/constants";
import { usePathname } from "next/navigation";
import { Menu } from "lucide-react";
import Logo from "@/components/shared/Logo";
const MobileNav = () => {
const pathname = usePathname();
return (
<header className="header">
<Link href="/" className="flex items-center gap-2 md:py-2">
<Logo width={120} height={40} />
</Link>
<nav className="flex gap-2">
<Sheet>
<SheetTrigger>
<Menu className="w-5 h-5" />
</SheetTrigger>
<SheetContent className="sheet-content sm:w-64">
<>
<Logo width={155} height={53} />
<ul className="header-nav_elements">
{AdminLinks.slice(0, 6).map((link) => {
const isActive = link.url === pathname;
return (
<li
key={link.url}
className={`${
isActive && "gradient-text"
} p-18 flex whitespace-nowrap text-dark-700`}
>
<Link
className="sidebar-link cursor-pointer"
href={link.url}
>
<link.icon />
{link.name}
</Link>
</li>
);
})}
</ul>
</>
</SheetContent>
</Sheet>
</nav>
</header>
);
};
export default MobileNav;