feat: add multiple admin dashboard layout components and update sidebar and navbar

app/components/icons/chevron-down.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const ChevronDownIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={21}
+      height={21}
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M10.197 13.623l5.008-5.008-1.177-1.18-3.83 3.834-3.831-3.833-1.178 1.178 5.008 5.009z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/contexts/admin.tsx

@@ -22,7 +22,7 @@ const AdminContext = createContext<AdminContextProperties | undefined>(
 
 export const AdminProvider = ({ children }: PropsWithChildren) => {
   const [adminProfile, setAdminProfile] = useState<AdminProfile>({
-    name: '',
+    name: 'Admin',
   })
 
   return (

app/layouts/admin/dashboard.tsx

@@ -10,7 +10,7 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
       <Navbar />
       <div className="flex">
         <Sidebar />
-        <div className="min-h-[calc(100dvh-80px)] flex-1">{children}</div>
+        <div className="min-h-[calc(100dvh-80px)] flex-1 p-8">{children}</div>
       </div>
     </div>
   )

app/layouts/admin/navbar.tsx

@@ -1,9 +1,13 @@
 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 = () => {
+  const { adminProfile } = useAdminContext()
+
   return (
     <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
       <Link
@@ -16,7 +20,14 @@ export const Navbar = () => {
           className="h-3/4 w-auto sm:h-full"
         />
       </Link>
-      <div>
+      <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}

app/layouts/admin/sidebar.tsx

@@ -7,13 +7,11 @@ export const Sidebar = () => {
   return (
     <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 }) => (
             <NavLink
               to={url}
@@ -36,7 +34,7 @@ export const Sidebar = () => {
                   <span
                     className={twMerge(
                       isActive ? 'text-[#5363AB]' : 'text-[#273240]',
-                      'transition-all group-hover/menu:text-[#5363AB]',
+                      'text-base transition-all group-hover/menu:text-[#5363AB]',
                     )}
                   >
                     {title}

app/routes/_layout.admin.dashboard._index.tsx

@@ -1,4 +1,4 @@
 const DashboardIndexLayout = () => {
-  return <div className="flex items-center justify-center">Dashboard Page</div>
+  return <div>Dashboard Page</div>
 }
 export default DashboardIndexLayout

app/routes/_layout.admin.dashboard.admins.tsx

@@ -0,0 +1,4 @@
+const DashboardAdminsLayout = () => {
+  return <div>Admins Page</div>
+}
+export default DashboardAdminsLayout

app/routes/_layout.admin.dashboard.advertisements.tsx

@@ -0,0 +1,4 @@
+const DashboardAdvertisementsLayout = () => {
+  return <div>Advertisements Page</div>
+}
+export default DashboardAdvertisementsLayout

app/routes/_layout.admin.dashboard.contents.tsx

@@ -0,0 +1,4 @@
+const DashboardContentsLayout = () => {
+  return <div>Contents Page</div>
+}
+export default DashboardContentsLayout

app/routes/_layout.admin.dashboard.settings.tsx

@@ -0,0 +1,4 @@
+const DashboardSettingsLayout = () => {
+  return <div>Settings Page</div>
+}
+export default DashboardSettingsLayout

app/routes/_layout.admin.dashboard.site-data.tsx

@@ -0,0 +1,4 @@
+const DashboardSiteDataLayout = () => {
+  return <div>Site Data Page</div>
+}
+export default DashboardSiteDataLayout

app/routes/_layout.admin.dashboard.subsciptions.tsx

@@ -0,0 +1,4 @@
+const DashboardSubscriptionsLayout = () => {
+  return <div>Subscriptions Page</div>
+}
+export default DashboardSubscriptionsLayout

app/routes/_layout.admin.dashboard.users.tsx

@@ -0,0 +1,4 @@
+const DashboardUsersLayout = () => {
+  return <div>Users Page</div>
+}
+export default DashboardUsersLayout