-

web/src/App.tsx

@@ -0,0 +1,88 @@
+import {SidebarInset, SidebarMenuButton, SidebarMenuItem, SidebarProvider} from "@/components/ui/sidebar.tsx";
+import {EarthIcon, Grid2X2Icon, HomeIcon, Link2Icon, LogsIcon, SettingsIcon} from "lucide-react";
+import {AppSidebar} from "@/components/app-sidebar.tsx";
+import {Link, Route, Switch, useLocation} from "wouter";
+import {Home} from "@/pages/Home";
+import Proxies from "@/pages/Proxies.tsx";
+import {Profiles} from "@/pages/Profiles";
+import {Connections} from "@/pages/Connections.tsx";
+import {Logs} from "@/pages/Logs.tsx";
+import {Settings} from "@/pages/Settings.tsx";
+import {Toaster} from "@/components/ui/sonner.tsx";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "/",
+    icon: HomeIcon,
+  },
+  {
+    title: "Proxies",
+    url: "/proxies",
+    icon: EarthIcon,
+  },
+  {
+    title: "Profiles",
+    url: "/profiles",
+    icon: Grid2X2Icon,
+  },
+  {
+    title: "Connections",
+    url: "/connections",
+    icon: Link2Icon,
+  },
+  {
+    title: "Logs",
+    url: "/logs",
+    icon: LogsIcon,
+  },
+  {
+    title: "Settings",
+    url: "/settings",
+    icon: SettingsIcon,
+  },
+]
+
+const queryClient = new QueryClient()
+
+function App() {
+  const [location] = useLocation();
+  return (
+    <div>
+      <QueryClientProvider client={queryClient}>
+        <Toaster position="top-right" closeButton={true}/>
+        <SidebarProvider>
+          <AppSidebar>
+            {items.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild isActive={location == item.url}>
+                  <Link to={item.url}>
+                    <item.icon/>
+                    <span>{item.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </AppSidebar>
+          <SidebarInset className={'overflow-hidden'}>
+            <div className={'flex-1 size-full min-h-0 min-w-0 overflow-hidden'}>
+              <Switch>
+                <Route path="/" component={Home}/>
+                <Route path="/proxies" component={Proxies}/>
+                <Route path="/profiles" component={Profiles}/>
+                <Route path="/connections" component={Connections}/>
+                <Route path="/logs" component={Logs}/>
+                <Route path="/settings" component={Settings}/>
+              </Switch>
+            </div>
+          </SidebarInset>
+        </SidebarProvider>
+      </QueryClientProvider>
+
+    </div>
+  )
+}
+
+export default App