From a6c1e4644a61973e5574a2a207c759e6b65b34cb Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Thu, 5 Mar 2026 10:29:05 +0500
Subject: [PATCH] navbar component conneceted to backend

---
 components/layout/navbar.tsx | 196 +++++++++++++++--------------------
 lib/types.ts                 |   9 ++
 request/links.ts             |   2 +
 3 files changed, 97 insertions(+), 110 deletions(-)

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 79e766f..6e7d6f6 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -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>
     </>
diff --git a/lib/types.ts b/lib/types.ts
index 5c72c1f..1a4b74d 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -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[];
+}
diff --git a/request/links.ts b/request/links.ts
index 7a23b1b..17c0554 100644
--- a/request/links.ts
+++ b/request/links.ts
@@ -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",