Merge remote-tracking branch 'origin/master' into feature/slicing

app/layouts/admin/dashboard.tsx

@@ -6,11 +6,11 @@ import { Sidebar } from './sidebar'
 export const AdminDashboardLayout = (properties: PropsWithChildren) => {
   const { children } = properties
   return (
-    <div className="grid">
+    <div className="flex flex-col">
       <Navbar />
       <div className="flex">
         <Sidebar />
-        <div>{children}</div>
+        <div className="min-h-[calc(100dvh-80px)] flex-1 p-8">{children}</div>
       </div>
     </div>
   )

app/layouts/admin/navbar.tsx

@@ -1,3 +1,38 @@
+import { Link } from 'react-router'
+
+import { ChevronDownIcon } from '~/components/icons/chevron-down'
+import { NotificationIcon } from '~/components/icons/notification'
+import { useAdminContext } from '~/contexts/admin'
+import { APP } from '~/data/meta'
+
 export const Navbar = () => {
-  return <div>Navbar</div>
+  const { adminProfile } = useAdminContext()
+
+  return (
+    <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
+      <Link
+        to="/news"
+        className="h-full"
+      >
+        <img
+          src={APP.logo}
+          alt={APP.title}
+          className="h-3/4 w-auto sm:h-full"
+        />
+      </Link>
+      <div className="flex items-center gap-x-8">
+        <div className="flex w-3xs items-center justify-between">
+          <div className="flex items-center">
+            <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
+            <span className="text-xs">{adminProfile.name}</span>
+          </div>
+          <ChevronDownIcon className="opacity-10" />
+        </div>
+        <NotificationIcon
+          className="text-[#B0C3CC]"
+          showBadge={true}
+        />
+      </div>
+    </div>
+  )
 }

app/layouts/admin/sidebar.tsx

@@ -1,29 +1,43 @@
-import { Link } from 'react-router'
+import { NavLink, useLocation } from 'react-router'
+import { twMerge } from 'tailwind-merge'
 
 import { MENU } from './menu'
 
 export const Sidebar = () => {
+  const { pathname } = useLocation()
+
   return (
-    <div className="flex flex-col gap-y-10 p-5">
+    <div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
       {MENU.map(({ group, items }) => (
-        <div className="flex flex-col">
-          <div
-            key={group}
-            className="px-5 pb-4 text-[#4C5CA0]/50 uppercase"
-          >
-            {group}
-          </div>
+        <div
+          className="flex flex-col"
+          key={group}
+        >
+          <div className="px-5 pb-4 text-[#4C5CA0]/50 uppercase">{group}</div>
           {items.map(({ title, url, icon: Icon }) => (
-            <Link
+            <NavLink
               to={url}
               key={`${group}-${title}`}
-              className="group/menu hover:bg-opacity-10 flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10 hover:font-bold hover:text-[#5363AB]"
+              className={twMerge(
+                pathname === url ? 'bg-[#707FDD]/10 font-bold' : '',
+                'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10',
+              )}
             >
-              <Icon className="h-[18px] w-[18px] text-[#A6ABC8] transition-all group-hover/menu:text-[#5363AB]" />
-              <span className="text-[#273240] transition-all group-hover/menu:text-[#5363AB]">
+              <Icon
+                className={twMerge(
+                  pathname === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
+                  'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
+                )}
+              />
+              <span
+                className={twMerge(
+                  pathname === url ? 'text-[#5363AB]' : 'text-[#273240]',
+                  'text-base transition-all group-hover/menu:text-[#5363AB]',
+                )}
+              >
                 {title}
               </span>
-            </Link>
+            </NavLink>
           ))}
         </div>
       ))}