navbar updated mobile

components/layout/navbar.tsx

@@ -216,13 +216,29 @@ export function Navbar() {
           >
             {t("navbar.home")}
           </Link>
-          <Link
-            href={`/${locale}/about`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {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>
 
           {/* Mobile Pages Dropdown */}
           <Link