fix: navbar toggle on white theme was glitched + some ui minor changes

.vscode/settings.json

@@ -26,5 +26,9 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["clsx\\(([^]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
     ["(?:twMerge|twJoin)\\(([^;]*)[\\);]", "[`'\"`]([^'\"`;]*)[`'\"`]"]
-  ]
+  ],
+
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }

src/components/config/styles/buttons.ts

@@ -9,7 +9,7 @@ type ButtonConfigType = {
 
 const BUTTON_CONFIG: ButtonConfigType = {
   NOT_ACTIVE_CLASSNAME:
-    'text-white text-opacity-75 dark:text-opacity-100 dark:text-muted-foreground bg-transparent focus:bg-accent hover:bg-accent focus:text-black hover:text-black dark:hover:text-primary-foreground dark:focus:text-primary-foreground',
+    'text-inherit text-opacity-75 dark:text-opacity-100 dark:text-muted-foreground bg-transparent focus:bg-accent hover:bg-accent focus:text-black hover:text-black dark:hover:text-primary-foreground dark:focus:text-primary-foreground',
   ACTIVE_CLASSNAME: 'bg-primary text-primary-foreground',
   CLASSNAME: 'font-bold'
 } as const;

src/components/layouts/dashboard/DashboardSidebar.tsx

@@ -108,7 +108,7 @@ const DashboardSidebar: FunctionComponent<DashboardSidebarProps> = () => {
         className={'z-20 w-full justify-center border-t-[1px] border-muted-foreground bg-black dark:bg-card lg:w-fit lg:border-0'}
         ref={sidebarRef}
       >
-        <nav className="py-4 lg:overflow-y-auto lg:px-[22px]">
+        <nav className="py-4 text-white lg:overflow-y-auto lg:px-[22px]">
           <ul className={cn('flex flex-wrap justify-center gap-2 lg:block')} role="menu">
             {sidebarBtnsGenerator(currentPathname)}
           </ul>

src/components/layouts/navbar/NavbarLanguageMenu.tsx

@@ -47,6 +47,7 @@ const NavbarLanguageMenu: FunctionComponent<NavbarLanguageMenuProps> = ({ isMobi
       </DropdownMenuTrigger>
       <DropdownMenuContent
         className={cn('min-w-[125px] dark:border-card lg:relative lg:dark:border-inherit ltr:lg:right-10 rtl:lg:left-10', {
+          'dark:bg-card [&>button]:h-12': isMobile,
           'relative top-1': !isMobile
         })}
         aria-label={scopedT('language-switcher-menu')}

src/components/layouts/navbar/NavbarToggle.tsx

@@ -8,20 +8,23 @@ import preserveKeyboardNavigation from '@rtm/shared-lib/portable/html/preserveKe
 import getRefCurrentPtr from '@rtm/shared-lib/portable/react/getRefCurrentPtr';
 import useIsLargeScreen from '@/components/hooks/useIsLargeScreen';
 import { getClientSideI18n, useScopedI18n } from '@/i18n/client';
-import { useEffect, useState, useRef } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
 import { i18ns } from '##/config/i18n';
 
 interface NavbarToggleProps {
   items: NavbarItems;
 }
 
-const menuItemsGenerator = (items: NavbarItems) => {
+const menuItemsGenerator = (items: NavbarItems, closeMenu: () => void) => {
   const globalT = getClientSideI18n();
 
   return items.map((item, index) => {
     return (
       <DropdownMenuItem
-        onClick={(event) => preserveKeyboardNavigation(event.target)}
+        onClick={(event) => {
+          preserveKeyboardNavigation(event.target);
+          closeMenu();
+        }}
         key={`navbar-hamburger-menu-item-${index}`}
         textValue={globalT(item.i18nTitle)}
         className="my-1 p-0"
@@ -36,6 +39,8 @@ const NavbarToggle: FunctionComponent<NavbarToggleProps> = ({ items }) => {
   const [isOpened, setIsOpened] = useState<boolean>(false);
   const onOpenChange = (opened: boolean) => setIsOpened(opened);
 
+  const closeMenu = useCallback(() => setIsOpened(false), []);
+
   const isLargeScreen = useIsLargeScreen();
   const scopedT = useScopedI18n(`${i18ns.navbar}.sr-only`);
 
@@ -61,7 +66,7 @@ const NavbarToggle: FunctionComponent<NavbarToggleProps> = ({ items }) => {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="relative min-w-[145px] dark:border-card ltr:right-4 rtl:left-4" aria-label={scopedT('hamburger-menu')}>
-        <nav className="max-w-[156px] text-center [&>*>*]:h-12">{menuItemsGenerator(items)}</nav>
+        <nav className="max-w-[156px] text-center text-black [&>*>*]:h-12">{menuItemsGenerator(items, closeMenu)}</nav>
       </DropdownMenuContent>
     </DropdownMenu>
   );

src/components/ui/navbar/SitewideNavbar.tsx

@@ -74,7 +74,7 @@ const SitewideNavbar: FunctionComponent<SitewideNavbarProps> = async () => {
       className="max-w-screen min-w-screen sticky inset-x-0 top-0 z-30 flex h-auto w-screen select-none items-center justify-center bg-black backdrop-blur-lg backdrop-saturate-150 dark:bg-card"
       id={ELEMENTS_ID.SITEWIDE_NAVBAR}
     >
-      <header className="max-w-screen relative z-30 flex h-[82px] w-screen flex-row flex-nowrap items-center justify-between gap-4 px-5">
+      <header className="max-w-screen relative z-30 flex h-[82px] w-screen flex-row flex-nowrap items-center justify-between gap-4 px-5 text-primary-foreground">
         {navbarBrand}
 
         <ul className="hidden justify-center gap-4 lg:flex">{desktopNavbarItems}</ul>