add scss and remove styled component

frontend/src/components/Navbar.jsx

@@ -1,69 +0,0 @@
-// import { styled } from 'solid-styled-components'
-
-import { useSiteContext } from '@context/SiteContext'
-import useAuth from '@hooks/useAuth'
-import { NAV_ROUTES } from '@routes/routes'
-import { A } from '@solidjs/router'
-import { IconLogout, IconTriangle } from '@tabler/icons-solidjs'
-import { For, Show } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-
-export default function Navbar() {
-  const { store, setAuth } = useSiteContext()
-  const { clickLogOut } = useAuth(setAuth)
-
-  const logOut = async () => {
-    try {
-      await clickLogOut()
-    } catch (error) {
-      console.log({
-        status: 'danger',
-        title: 'Logout fail!',
-        closable: false,
-      })
-    }
-  }
-
-  return (
-    <div class="drawer-side lg:h-[calc(100svh-64px)]">
-      <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="avatar">
-              <div class="w-9 mask mask-hexagon">
-                <img
-                  src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
-                  alt="avatar"
-                />
-              </div>
-            </div>
-            <span class="mx-3 line-clamp-1">
-              <A href="/me">{store.userInfo?.name}</A>
-            </span>
-            <button class="btn btn-ghost btn-sm" onClick={logOut}>
-              <IconLogout size={16} />
-            </button>
-          </div>
-          <div class="divider divider-success mb-0 lg:hidden">
-            <IconTriangle size={30} />
-          </div>
-        </Show>
-        <ul class="scrollnavbar menu p-4 w-80 text-base-content bg-transparent py-6 px-4">
-          <For each={NAV_ROUTES}>
-            {(item) =>
-              item.show && (
-                <li class="mb-2">
-                  <A href={item.path}>
-                    <Dynamic component={item.icon} />
-                    {item.text}
-                  </A>
-                </li>
-              )
-            }
-          </For>
-        </ul>
-      </div>
-    </div>
-  )
-}