Project Initialization

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+
+export interface SidebarItem {
+  label: string;
+  href: string;
+  icon?: ReactNode;
+}
+
+export interface SidebarProps {
+  title?: string;
+  items: SidebarItem[];
+  activeHref?: string;
+  onNavigate?: (href: string) => void;
+}
+
+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">
+    {title ? <div className="px-2 pb-3 text-sm font-semibold text-gray-700">{title}</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>
+  </aside>
+);
+
+export default Sidebar;