navbar updated

components/layout/navbar.tsx

@@ -6,6 +6,12 @@ import Image from "next/image";
 import LanguageSelectRadix from "../languageSwitcher";
 import { useLocale, useTranslations } from "next-intl";
 import UpHeader from "./upHeader";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 
 export function Navbar() {
   const locale = useLocale();
@@ -13,6 +19,15 @@ export function Navbar() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
 
+  const tabs = [
+    { name: t("navbar.about"), value: "" },
+    { name: t("about.subPages.baza"), value: "baza" },
+    { name: t("about.subPages.certificate"), value: "sertificate" },
+    { name: t("about.subPages.notePP"), value: "notePP" },
+    { name: t("about.subPages.noteTrailer"), value: "noteTrailer" },
+    { name: t("about.subPages.noteFlans"), value: "noteFlans" },
+  ];
+
   useEffect(() => {
     const handleScroll = () => {
       setScrolled(window.scrollY > 50);
@@ -69,12 +84,29 @@ export function Navbar() {
               >
                 {t("navbar.home")}
               </Link>
-              <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")}
-              </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
+                        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"
+                      >
+                        {tab.name}
+                      </Link>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
 
               <Link
                 href={`/${locale}/faq`}