From 661baca101af2177ddb61ed2be60a991b3cb31fb Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 23 Feb 2025 17:00:17 +0800
Subject: [PATCH] feat: add NotificationIcon component and update admin layout
 for improved UI

---
 app/components/icons/notification.tsx         | 38 +++++++++++++++++++
 app/components/popup/succes-register.tsx      |  2 +-
 app/components/popup/succes-reset-pass.tsx    |  2 +-
 app/layouts/admin/dashboard.tsx               |  4 +-
 app/layouts/admin/navbar.tsx                  | 26 ++++++++++++-
 app/layouts/admin/sidebar.tsx                 | 38 ++++++++++++++-----
 app/routes/_layout.admin.dashboard._index.tsx |  8 +---
 7 files changed, 97 insertions(+), 21 deletions(-)
 create mode 100644 app/components/icons/notification.tsx

diff --git a/app/components/icons/notification.tsx b/app/components/icons/notification.tsx
new file mode 100644
index 0000000..e385b6a
--- /dev/null
+++ b/app/components/icons/notification.tsx
@@ -0,0 +1,38 @@
+import type { JSX, SVGProps } from 'react'
+
+interface NotificationIconProperties
+  extends JSX.IntrinsicAttributes,
+    SVGProps<SVGSVGElement> {
+  showBadge?: boolean
+}
+
+export const NotificationIcon = ({
+  showBadge = false,
+  ...properties
+}: NotificationIconProperties) => {
+  return (
+    <svg
+      width={16}
+      height={19}
+      viewBox="0 0 16 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M6.597 18.53a1.616 1.616 0 01-1.608-1.6h3.2c.001.213-.04.425-.12.623-.21.482-.639.833-1.152.944h-.038c-.093.02-.187.03-.282.032zm6.4-2.4H.197v-1.6l1.6-.8v-4.4a6.452 6.452 0 01.739-3.249 3.723 3.723 0 012.46-1.808V2.53h3.2v1.744c2.064.492 3.2 2.287 3.2 5.056v4.4l1.6.8v1.6z"
+        fill="currentColor"
+      />
+      {showBadge && (
+        <circle
+          cx={11.1968}
+          cy={4.306_64}
+          r={3.6}
+          fill="#EC5252"
+          stroke="#fff"
+          strokeWidth={1.2}
+        />
+      )}
+    </svg>
+  )
+}
diff --git a/app/components/popup/succes-register.tsx b/app/components/popup/succes-register.tsx
index 284ee81..2055035 100644
--- a/app/components/popup/succes-register.tsx
+++ b/app/components/popup/succes-register.tsx
@@ -6,7 +6,7 @@ import { APP } from '~/data/meta'
 
 export default function PopupSuccesRegister() {
   return (
-    <div className="flex min-h-screen items-center justify-center">
+    <div className="flex min-h-dvh items-center justify-center">
       <div className="w-full max-w-md p-6">
         <div className="absolute top-[80px] left-[50px]">
           <Link
diff --git a/app/components/popup/succes-reset-pass.tsx b/app/components/popup/succes-reset-pass.tsx
index 8808d01..d1e9d3f 100644
--- a/app/components/popup/succes-reset-pass.tsx
+++ b/app/components/popup/succes-reset-pass.tsx
@@ -6,7 +6,7 @@ import { APP } from '~/data/meta'
 
 export default function PopupSuccessResetPass() {
   return (
-    <div className="flex min-h-screen items-center justify-center">
+    <div className="flex min-h-dvh items-center justify-center">
       <div className="w-full max-w-md p-6">
         <div className="absolute top-[80px] left-[50px]">
           <Link
diff --git a/app/layouts/admin/dashboard.tsx b/app/layouts/admin/dashboard.tsx
index 4398ee9..512f776 100644
--- a/app/layouts/admin/dashboard.tsx
+++ b/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">{children}</div>
       </div>
     </div>
   )
diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index dbf19f6..568554b 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/app/layouts/admin/navbar.tsx
@@ -1,3 +1,27 @@
+import { Link } from 'react-router'
+
+import { NotificationIcon } from '~/components/icons/notification'
+import { APP } from '~/data/meta'
+
 export const Navbar = () => {
-  return <div>Navbar</div>
+  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>
+        <NotificationIcon
+          className="text-[#B0C3CC]"
+          showBadge={true}
+        />
+      </div>
+    </div>
+  )
 }
diff --git a/app/layouts/admin/sidebar.tsx b/app/layouts/admin/sidebar.tsx
index a43dda2..7acbaeb 100644
--- a/app/layouts/admin/sidebar.tsx
+++ b/app/layouts/admin/sidebar.tsx
@@ -1,10 +1,11 @@
-import { Link } from 'react-router'
+import { NavLink } from 'react-router'
+import { twMerge } from 'tailwind-merge'
 
 import { MENU } from './menu'
 
 export const Sidebar = () => {
   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
@@ -14,16 +15,35 @@ export const Sidebar = () => {
             {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={({ isActive }) =>
+                twMerge(
+                  isActive ? '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]">
-                {title}
-              </span>
-            </Link>
+              {({ isActive }) => (
+                <>
+                  <Icon
+                    className={twMerge(
+                      isActive ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
+                      'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
+                    )}
+                  />
+                  <span
+                    className={twMerge(
+                      isActive ? 'text-[#5363AB]' : 'text-[#273240]',
+                      'transition-all group-hover/menu:text-[#5363AB]',
+                    )}
+                  >
+                    {title}
+                  </span>
+                </>
+              )}
+            </NavLink>
           ))}
         </div>
       ))}
diff --git a/app/routes/_layout.admin.dashboard._index.tsx b/app/routes/_layout.admin.dashboard._index.tsx
index 2709cd2..c7a9a58 100644
--- a/app/routes/_layout.admin.dashboard._index.tsx
+++ b/app/routes/_layout.admin.dashboard._index.tsx
@@ -1,10 +1,4 @@
 const DashboardIndexLayout = () => {
-  return (
-    <div className="relative">
-      <div className="flex min-h-screen items-center justify-center bg-gray-100">
-        Dashboard Page
-      </div>
-    </div>
-  )
+  return <div className="flex items-center justify-center">Dashboard Page</div>
 }
 export default DashboardIndexLayout