add ui for major components

packages/ui-common/src/components/Layout/Sidebar.tsx

@@ -12,39 +12,70 @@ export interface SidebarProps {
   items: SidebarItem[];
   activeHref?: string;
   onNavigate?: (href: string) => void;
+  headerExtra?: ReactNode;
 }
 
-const Sidebar = ({ title, items, activeHref, onNavigate }: SidebarProps) => (
-  <aside className="flex w-60 flex-col gap-1 border-r border-gray-200 bg-white px-3 py-4">
+const Sidebar = ({
+  title,
+  items,
+  activeHref,
+  onNavigate,
+  headerExtra,
+}: SidebarProps) => (
+  <aside className="flex w-64 flex-col gap-1 border-r border-slate-200 bg-[#33578D]/10 px-3 py-5 dark:border-slate-800 dark:bg-slate-900">
     {title ? (
-      <div className="px-2 pb-3 text-sm font-semibold text-gray-700">
-        {title}
+      <div className="flex items-center justify-between gap-2 px-3 pb-4">
+        <div className="flex items-center gap-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[#33578D] text-sm font-bold text-white">
+            {title.charAt(0)}
+          </div>
+          <div className="text-base font-semibold text-slate-800 dark:text-slate-100">
+            {title}
+          </div>
+        </div>
+        {headerExtra}
       </div>
     ) : null}
-    <nav className="flex flex-col gap-0.5">
-      {items.map((item) => (
-        <a
-          key={item.href}
-          href={item.href}
-          onClick={(event) => {
-            if (onNavigate) {
-              event.preventDefault();
-              onNavigate(item.href);
-            }
-          }}
-          className={clsx(
-            "flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors",
-            activeHref === item.href
-              ? "bg-blue-50 text-blue-700"
-              : "text-gray-700 hover:bg-gray-100",
-          )}
-        >
-          {item.icon ? (
-            <span className="text-gray-500">{item.icon}</span>
-          ) : null}
-          <span>{item.label}</span>
-        </a>
-      ))}
+
+    <nav className="flex flex-col gap-1">
+      {items.map((item) => {
+        const isActive =
+          activeHref?.toLowerCase() === item.href.toLowerCase();
+
+        return (
+          <a
+            key={item.href}
+            href={item.href}
+            onClick={(event) => {
+              if (onNavigate) {
+                event.preventDefault();
+                onNavigate(item.href);
+              }
+            }}
+            aria-current={isActive ? "page" : undefined}
+            className={clsx(
+              "group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition",
+              isActive
+                ? "bg-[#33578D] text-white shadow-sm shadow-[#33578D]/20"
+                : "text-slate-700 hover:bg-[#33578D]/10 hover:text-[#33578D] dark:text-slate-300 dark:hover:bg-[#33578D]/20 dark:hover:text-white",
+            )}
+          >
+            {item.icon ? (
+              <span
+                className={clsx(
+                  "flex h-5 w-5 items-center justify-center [&_svg]:h-5 [&_svg]:w-5",
+                  isActive
+                    ? "text-white"
+                    : "text-slate-500 group-hover:text-[#33578D] dark:text-slate-400 dark:group-hover:text-white",
+                )}
+              >
+                {item.icon}
+              </span>
+            ) : null}
+            <span>{item.label}</span>
+          </a>
+        );
+      })}
     </nav>
   </aside>
 );