Initial commit: Full project structure

- Backend: NestJS with Docker
- Frontend: Next.js with Docker
- Nginx configuration for reverse proxy
- PostgreSQL setup
- Docker compose for orchestration
- Development environment configuration

frontend/src/components/ui/Sidebar.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  LayoutDashboard,
+  Users,
+  Calendar,
+  UserCog,
+  FlaskConical,
+  FileText,
+  CreditCard
+} from 'lucide-react';
+
+const menu = [
+  { name: 'Today', path: '/today', icon: LayoutDashboard },
+  { name: 'Patients', path: '/patients', icon: Users },
+  { name: 'Appointments', path: '/appointments', icon: Calendar },
+  { name: 'Staff Management', path: '/staff', icon: UserCog },
+  { name: 'Lab Management', path: '/lab', icon: FlaskConical },
+  { name: 'Billing', path: '/billing', icon: CreditCard },
+  { name: 'Reports', path: '/reports', icon: FileText },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  return (
+    <aside className="w-64 bg-[#071a2f] text-white flex flex-col p-4">
+      <div className="mb-8">
+        <h1 className="text-xl font-bold">DyoLink</h1>
+      </div>
+
+      <nav className="flex flex-col gap-2">
+        {menu.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.path;
+
+          return (
+            <button
+              key={item.name}
+              onClick={() => router.push(item.path)}
+              className={`flex items-center gap-3 p-3 rounded-lg transition ${
+                isActive
+                  ? 'bg-primary-600'
+                  : 'hover:bg-white/10'
+              }`}
+            >
+              <Icon className="w-5 h-5" />
+              <span>{item.name}</span>
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}