feat: add admin layout components including Navbar and Sidebar, and update icon components

app/layouts/admin/dashboard.tsx

@@ -1,12 +1,15 @@
 import type { PropsWithChildren } from 'react'
 
+import { Navbar } from './navbar'
+import { Sidebar } from './sidebar'
+
 export const AdminDashboardLayout = (properties: PropsWithChildren) => {
   const { children } = properties
   return (
     <div className="grid">
-      <div>Navbar</div>
+      <Navbar />
       <div className="flex">
-        <div>Sidebar</div>
+        <Sidebar />
         <div>{children}</div>
       </div>
     </div>

app/layouts/admin/menu.ts

@@ -0,0 +1,73 @@
+import type { JSX, SVGProps } from 'react'
+
+import { ChartIcon } from '~/components/icons/chart'
+import { ChatIcon } from '~/components/icons/chat'
+import { DocumentIcon } from '~/components/icons/document'
+import { MedicalNotesIcon } from '~/components/icons/medical-notes'
+import { ProfileIcon } from '~/components/icons/profile'
+import { SettingIcon } from '~/components/icons/setting'
+import { WalletIcon } from '~/components/icons/wallet'
+
+type TMenu = {
+  group: string
+  items: {
+    title: string
+    url: string
+    icon: (
+      properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+    ) => JSX.Element
+  }[]
+}
+
+export const MENU: TMenu[] = [
+  {
+    group: 'Menu',
+    items: [
+      {
+        title: 'Dashboard',
+        url: '/admin/dashboard',
+        icon: ChartIcon,
+      },
+      {
+        title: 'User',
+        url: '/admin/dashboard/users',
+        icon: DocumentIcon,
+      },
+      {
+        title: 'Konten',
+        url: '/admin/dashboard/contents',
+        icon: ChatIcon,
+      },
+      {
+        title: 'Advertisement',
+        url: '/admin/dashboard/advertisements',
+        icon: MedicalNotesIcon,
+      },
+      {
+        title: 'Subscription',
+        url: '/admin/dashboard/subscriptions',
+        icon: ChartIcon,
+      },
+    ],
+  },
+  {
+    group: 'Others',
+    items: [
+      {
+        title: 'Data Situs',
+        url: '/admin/dashboard/site-data',
+        icon: WalletIcon,
+      },
+      {
+        title: 'Pengaturan',
+        url: '/admin/dashboard/settings',
+        icon: SettingIcon,
+      },
+      {
+        title: 'Admin',
+        url: '/admin/dashboard/admins',
+        icon: ProfileIcon,
+      },
+    ],
+  },
+]

app/layouts/admin/navbar.tsx

@@ -0,0 +1,3 @@
+export const Navbar = () => {
+  return <div>Navbar</div>
+}

app/layouts/admin/sidebar.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router'
+
+import { MENU } from './menu'
+
+export const Sidebar = () => {
+  return (
+    <div>
+      {MENU.map(({ group, items }) => (
+        <>
+          <div key={group}>{group}</div>
+          {items.map(({ title, url, icon: Icon }) => (
+            <Link
+              to={url}
+              key={`${group}-${title}`}
+              className="flex items-center gap-x-3 text-[#273240]"
+            >
+              <Icon className="h-[18px] w-[18px] text-[#A6ABC8]" />
+              <span>{title}</span>
+            </Link>
+          ))}
+        </>
+      ))}
+    </div>
+  )
+}

app/layouts/news/menu.ts

@@ -5,7 +5,20 @@ import { InstagramIcon } from '~/components/icons/instagram'
 import { LinkedinIcon } from '~/components/icons/linkedin'
 import { XIcon } from '~/components/icons/x'
 
-export const MENU = [
+type TMenu = {
+  title: string
+  url: string
+  icon?: (
+    properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+  ) => JSX.Element
+}
+
+type TFooterMenu = {
+  group: string
+  items: TMenu[]
+}
+
+export const MENU: TMenu[] = [
   {
     title: 'Spotlight',
     url: '/news/category/spotlight',
@@ -36,17 +49,7 @@ export const MENU = [
   },
 ]
 
-type FooterMenu = {
-  group: string
-  items: Array<{
-    title: string
-    url: string
-    icon?: (
-      properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-    ) => JSX.Element
-  }>
-}
-export const FOOTER_MENU: FooterMenu[] = [
+export const FOOTER_MENU: TFooterMenu[] = [
   {
     group: 'About Us',
     items: [
@@ -124,7 +127,7 @@ export const FOOTER_MENU: FooterMenu[] = [
   },
 ]
 
-export const COPYRIGHT_MENU = [
+export const COPYRIGHT_MENU: TMenu[] = [
   {
     title: 'Privacy Policy',
     url: '/news/privacy-policy',