feat: location.pathname based bar navigation + admin layout + separate

auth routes

web/src/layout/DashboardLayout.tsx

@@ -0,0 +1,41 @@
+import Sidebar from "@/components/Home/Sidebar";
+import TopBar from "@/components/Home/TopBar";
+import { Card, CardContent } from "@/components/ui/card";
+import { type FC } from "react";
+import { Outlet } from "react-router";
+
+const DashboardLayout: FC = () => {
+  return (
+    <div className="relative z-10 flex items-center justify-center min-h-screen">
+      <Card className="overflow-y-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md sm:rounded-none">
+        <div className="flex flex-col items-center sm:pt-0 relative">
+          <div className="flex flex-row items-center absolute left-4 top-4">
+            <img src="/icon.png" alt="icon" className="w-6 h-6" />
+
+            <div className="ml-2">
+              <p className="text-sm text-gray-600 text-left dark:text-gray-500">
+                Home Guard
+              </p>
+            </div>
+          </div>
+
+          <CardContent className="w-full space-y-4 flex-1" spacing={false}>
+            <div className="flex flex-row">
+              <Sidebar />
+              <div className="sm:p-4 max-w-full flex-1">
+                <div className="flex flex-col w-full items-center gap-2">
+                  <TopBar />
+                </div>
+                <div className="p-4">
+                  <Outlet />
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default DashboardLayout;