revamp template

src/partials/menu/NavbarMenu.tsx

@@ -0,0 +1,131 @@
+import { KeenIcon } from '@/components';
+import {
+  Menu,
+  TMenuConfig,
+  MenuItem,
+  MenuLink,
+  MenuSub,
+  MenuTitle,
+  MenuArrow
+} from '@/components/menu';
+import { useLanguage } from '@/i18n';
+
+const NavbarMenu = ({ items }: { items: TMenuConfig }) => {
+  const { isRTL } = useLanguage();
+
+  const buildMenu = (items: TMenuConfig) => {
+    return items.map((item, index) => {
+      if (item.children) {
+        return (
+          <MenuItem
+            key={index}
+            className="border-b-2 border-b-transparent menu-item-active:border-b-primary menu-item-here:border-b-primary"
+            toggle="dropdown"
+            trigger="hover"
+            dropdownProps={{
+              placement: isRTL() ? 'bottom-end' : 'bottom-start',
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [0, 0] // [skid, distance]
+                  }
+                }
+              ]
+            }}
+          >
+            <MenuLink className="gap-1.5 pb-2 lg:pb-4 px-2">
+              <MenuTitle className="text-nowrap text-sm text-gray-700 menu-item-active:text-primary menu-item-active:font-medium menu-item-here:text-primary menu-item-here:font-medium menu-item-show:text-primary menu-link-hover:text-primary">
+                {item.title}
+              </MenuTitle>
+
+              <MenuArrow>
+                <KeenIcon
+                  icon="down"
+                  className="text-2xs text-gray-500 menu-item-active:text-primary menu-item-here:text-primary menu-item-show:text-primary menu-link-hover:text-primary"
+                />
+              </MenuArrow>
+            </MenuLink>
+            <MenuSub className="menu-default" rootClassName="py-2 min-w-[200px]">
+              {buildMenuSub(item.children)}
+            </MenuSub>
+          </MenuItem>
+        );
+      } else {
+        return (
+          <MenuItem
+            key={index}
+            className="border-b-2 border-b-transparent menu-item-active:border-b-primary menu-item-here:border-b-primary"
+          >
+            <MenuLink path={item.path} className="gap-1.5 pb-2 lg:pb-4 px-2">
+              <MenuTitle className="text-nowrap font-medium text-sm text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-item-here:text-primary menu-item-here:font-semibold menu-item-show:text-primary menu-link-hover:text-primary">
+                {item.title}
+              </MenuTitle>
+            </MenuLink>
+          </MenuItem>
+        );
+      }
+    });
+  };
+
+  const buildMenuSub = (items: TMenuConfig) => {
+    return items.map((item, index) => {
+      if (item.children) {
+        return (
+          <MenuItem
+            key={index}
+            toggle="dropdown"
+            trigger="hover"
+            dropdownProps={{
+              placement: isRTL() ? 'left-start' : 'right-start',
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: isRTL() ? [10, 0] : [-10, 0] // [skid, distance]
+                  }
+                }
+              ]
+            }}
+          >
+            <MenuLink>
+              <MenuTitle>{item.title}</MenuTitle>
+              {buildMenuToggle()}
+            </MenuLink>
+            <MenuSub className="menu-default" rootClassName="py min-w-[200px]">
+              {buildMenuSub(item.children)}
+            </MenuSub>
+          </MenuItem>
+        );
+      } else {
+        return (
+          <MenuItem key={index}>
+            <MenuLink path={item.path}>
+              <MenuTitle>{item.title}</MenuTitle>
+            </MenuLink>
+          </MenuItem>
+        );
+      }
+    });
+  };
+
+  const buildMenuToggle = () => {
+    return (
+      <MenuArrow>
+        <KeenIcon icon="down" className="text-2xs [.menu-dropdown_&]:-rotate-90" />
+      </MenuArrow>
+    );
+  };
+
+  return (
+    <div className="grid">
+      <div className="scrollable-x-auto">
+        <Menu highlight={true} className="gap-3">
+          {buildMenu(items)}
+        </Menu>
+      </div>
+    </div>
+  );
+};
+
+export { NavbarMenu };