Merge pull request '[FWA-8] Navbar' (#4) from feature/FWA-8-navbar into develop

Reviewed-on: sam/fuware#4

frontend/src/components/Header.jsx

@@ -50,7 +50,7 @@ export default function Header() {
       <Show when={store.auth}>
         <div class="flex items-center justify-end">
           <div class="avatar hidden lg:block">
-            <div class="w-9 mask mask-hexagon">
+            <div class="w-9 rounded-full">
               <img
                 src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
                 alt="avatar"

frontend/src/components/Navbar/Navbar.jsx

@@ -4,7 +4,7 @@ import useLanguage from '@hooks/useLanguage'
 import { A } from '@solidjs/router'
 import { IconDashboard, IconLogout, IconTriangle } from '@tabler/icons-solidjs'
 import UserHelper from '@utils/auth'
-import { For, Show } from 'solid-js'
+import { For, Show, mergeProps } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import './navbar.scss'
 
@@ -16,10 +16,36 @@ console.log(userHelper.isAdmin)
 const NAV_ITEM = [
   {
     path: '/dashboard',
-    show: false,
+    show: true,
     icon: IconDashboard,
     text: language?.ui.dashboard,
   },
+  {
+    show: true,
+    icon: IconTriangle,
+    text: 'API',
+    children: [
+      {
+        show: true,
+        icon: IconDashboard,
+        text: 'Test',
+        children: [
+          {
+            path: '/test',
+            show: true,
+            icon: IconDashboard,
+            text: 'Test',
+          },
+        ],
+      },
+      {
+        path: '/api',
+        show: true,
+        icon: IconDashboard,
+        text: 'Get',
+      },
+    ],
+  },
   {
     path: '/ware-house',
     show: true,
@@ -28,6 +54,52 @@ const NAV_ITEM = [
   },
 ]
 
+function NavbarItem(props) {
+  const merged = mergeProps({ active: true }, props)
+  return (
+    <Show
+      when={merged.active && merged.path}
+      fallback={
+        <>
+          <Dynamic component={merged.icon} />
+          {merged.text}
+        </>
+      }
+    >
+      <A href={merged.path}>
+        <Dynamic component={merged.icon} />
+        {merged.text}
+      </A>
+    </Show>
+  )
+}
+
+function NavbarWithChildren(props) {
+  return (
+    <li class="mb-2">
+      <h2 class="menu-title flex items-center gap-2">
+        <NavbarItem {...props} active={false} />
+      </h2>
+      <ul class="pl-4">
+        <For each={props.children}>
+          {(child) => {
+            if (!child.show) return
+            if (child.children) {
+              return <NavbarWithChildren {...child} />
+            } else {
+              return (
+                <li class="mb-2">
+                  <NavbarItem {...child} />
+                </li>
+              )
+            }
+          }}
+        </For>
+      </ul>
+    </li>
+  )
+}
+
 export default function Navbar() {
   const { store, setAuth } = useSiteContext()
   const { clickLogOut } = useAuth(setAuth)
@@ -49,7 +121,7 @@ export default function Navbar() {
       <label for="nav-menu" aria-label="close sidebar" class="drawer-overlay" />
       <div class="bg-base-200 w-80 min-h-full">
         <Show when={store.auth}>
-          <div class="flex items-center justify-between px-5 pt-5 lg:hidden">
+          <div class="flex items-center justify-between px-3 pt-5 lg:hidden">
             <div class="avatar">
               <div class="w-9 mask mask-hexagon">
                 <img
@@ -69,18 +141,20 @@ export default function Navbar() {
             <IconTriangle size={30} />
           </div>
         </Show>
-        <ul class="scrollnavbar menu p-4 w-80 text-base-content py-6 px-4">
+        <ul class="menu w-80 text-base-content pt-3 px-3 pb-6">
           <For each={NAV_ITEM}>
-            {(item) =>
-              item.show && (
-                <li class="mb-2">
-                  <A href={item.path}>
-                    <Dynamic component={item.icon} />
-                    {item.text}
-                  </A>
-                </li>
-              )
-            }
+            {(item) => {
+              if (!item.show) return
+              if (item.children) {
+                return <NavbarWithChildren {...item} />
+              } else {
+                return (
+                  <li class="mb-2">
+                    <NavbarItem {...item} />
+                  </li>
+                )
+              }
+            }}
           </For>
         </ul>
       </div>

frontend/src/components/Navbar/navbar.scss

@@ -1,18 +0,0 @@
-.menu  {
-  li {
-    a {
-      color: var(--black);
-      font-weight: normal;
-
-      &:not(ul, .menu-title, details, .btn).active {
-        background-color: var(--primary);
-        color: var(--white);
-      }
-
-      &:hover {
-        background-color: rgba(var(--primary), 0.05);
-        color: var(--primary);
-      }
-    }
-  }
-}