From 0c4049f012f361fa68c13153d22bc7590ce7ff0d Mon Sep 17 00:00:00 2001
From: Sam Liu <luu.dat.tham@gmail.com>
Date: Wed, 12 Jun 2024 07:34:44 +0000
Subject: [PATCH] [FWA-8] Navbar
---
frontend/src/components/Header.jsx | 2 +-
frontend/src/components/Navbar/Navbar.jsx | 102 ++++++++++++++++++---
frontend/src/components/Navbar/navbar.scss | 18 ----
3 files changed, 89 insertions(+), 33 deletions(-)
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index f0a2a64..50df9d0 100644
--- a/frontend/src/components/Header.jsx
+++ b/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"
diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
index bfeb854..64fe85f 100644
--- a/frontend/src/components/Navbar/Navbar.jsx
+++ b/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>
diff --git a/frontend/src/components/Navbar/navbar.scss b/frontend/src/components/Navbar/navbar.scss
index af9bd03..e69de29 100644
--- a/frontend/src/components/Navbar/navbar.scss
+++ b/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);
- }
- }
- }
-}