navbar component conneceted to backend
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -12,6 +12,10 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import httpClient from "@/request/api";
|
||||
import { endPoints } from "@/request/links";
|
||||
import { NavbarItem } from "@/lib/types";
|
||||
|
||||
export function Navbar() {
|
||||
const locale = useLocale();
|
||||
@@ -19,6 +23,18 @@ export function Navbar() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
const { data: navbarItems } = useQuery({
|
||||
queryKey: ["navbaritem"],
|
||||
queryFn: () => httpClient(endPoints.navbar),
|
||||
select: (data: any) => ({
|
||||
results: data?.data?.data?.results,
|
||||
total_items: data?.data?.data?.total_items,
|
||||
total_pages: data?.data?.data?.total_pages,
|
||||
}),
|
||||
});
|
||||
|
||||
console.log({ navbarItems });
|
||||
|
||||
const tabs = [
|
||||
{ name: t("navbar.about"), value: "" },
|
||||
{ name: t("about.subPages.baza"), value: "baza" },
|
||||
@@ -76,61 +92,44 @@ export function Navbar() {
|
||||
|
||||
{/* Desktop Navigation Menu */}
|
||||
<div className="hidden h-full lg:flex items-center gap-8">
|
||||
<Link
|
||||
href={`/${locale}/home`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.home")}
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Link
|
||||
href={`/${locale}/about`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.about")}
|
||||
<ChevronDown size={12} className="ml-1" />
|
||||
</Link>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{tabs.map((tab) => (
|
||||
<DropdownMenuItem asChild key={tab.value}>
|
||||
{navbarItems?.results ? (
|
||||
navbarItems.results.map((item: NavbarItem) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Link
|
||||
href={`/${locale}/about/${tab.value}`}
|
||||
className="font-unbounded w-full uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
key={item.id}
|
||||
href={`/${locale}/${item.url}`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{tab.name}
|
||||
{item.name}
|
||||
{item.children.length > 0 && (
|
||||
<ChevronDown size={12} className="ml-1" />
|
||||
)}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Link
|
||||
href={`/${locale}/faq`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{locale === "ru" ? "ЧЗВ" : "FAQ"}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/services`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.services")}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`/${locale}/catalog_page`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.products")}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/contact`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.contact")}
|
||||
</Link>
|
||||
</DropdownMenuTrigger>
|
||||
{item.children.length > 0 && (
|
||||
<DropdownMenuContent className="space-y-2">
|
||||
{item.children.map((child: NavbarItem) => (
|
||||
<Link
|
||||
key={child.id}
|
||||
href={`/${locale}/${child.url}`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
)}
|
||||
</DropdownMenu>
|
||||
))
|
||||
) : (
|
||||
<Link
|
||||
href={`/${locale}/home`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.home")}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5">
|
||||
@@ -207,67 +206,44 @@ export function Navbar() {
|
||||
|
||||
{/* Mobile Menu Links */}
|
||||
<div className="flex flex-col p-6 gap-4">
|
||||
<Link
|
||||
href={`/${locale}/home`}
|
||||
className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{t("navbar.home")}
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Link
|
||||
href={`/${locale}/about`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.about")}
|
||||
<ChevronDown size={12} className="ml-1" />
|
||||
</Link>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{tabs.map((tab) => (
|
||||
<DropdownMenuItem>
|
||||
{navbarItems?.results ? (
|
||||
navbarItems.results.map((item: NavbarItem) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Link
|
||||
href={`/${locale}/about/${tab.value}`}
|
||||
className="font-unbounded w-full uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
key={item.id}
|
||||
href={`/${locale}/${item.url}`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{tab.name}
|
||||
{item.name}
|
||||
{item.children.length > 0 && (
|
||||
<ChevronDown size={12} className="ml-1" />
|
||||
)}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Mobile Pages Dropdown */}
|
||||
<Link
|
||||
href={`/${locale}/faq`}
|
||||
className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{locale === "ru" ? "ЧЗВ" : "FAQ"}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/services`}
|
||||
className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{t("navbar.services")}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`/${locale}/catalog_page`}
|
||||
className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{t("navbar.products")}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/contact`}
|
||||
className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{t("navbar.contact")}
|
||||
</Link>
|
||||
</DropdownMenuTrigger>
|
||||
{item.children.length > 0 && (
|
||||
<DropdownMenuContent className="space-y-2">
|
||||
{item.children.map((child: NavbarItem) => (
|
||||
<Link
|
||||
key={child.id}
|
||||
href={`/${locale}/${child.url}`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
)}
|
||||
</DropdownMenu>
|
||||
))
|
||||
) : (
|
||||
<Link
|
||||
href={`/${locale}/home`}
|
||||
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
||||
>
|
||||
{t("navbar.home")}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -38,3 +38,12 @@ export interface ProductDetail {
|
||||
features: string[];
|
||||
images: ProductImage[];
|
||||
}
|
||||
|
||||
export interface NavbarItem {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
order: number;
|
||||
open_in_new_tab: boolean;
|
||||
children: NavbarItem[];
|
||||
}
|
||||
|
||||
@@ -35,6 +35,8 @@ export const endPoints = {
|
||||
gallery: "gallery/?page_size=500",
|
||||
contact: "contact/",
|
||||
statistics: "statistics/",
|
||||
banner: "banner/",
|
||||
navbar:"navigationitem/?page_size=500",
|
||||
filter: {
|
||||
size: "size/",
|
||||
sizePageItems: "size/?page_size=500",
|
||||
|
||||
Reference in New Issue
Block a user