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