wip

client/ui-wails/frontend/src/modules/settings/Settings.tsx

@@ -1,7 +1,19 @@
+import { useState } from "react";
+import { MainRightSide } from "@/layouts/MainRightSide.tsx";
+import {
+    SettingsNavigation,
+    SettingsSection,
+} from "@/modules/settings/SettingsNavigation.tsx";
+
 export const Settings = () => {
+    const [active, setActive] = useState<SettingsSection>("general");
+
     return (
-        <div className={"flex flex-col w-full h-full min-h-0 pt-4 px-4"}>
-            <h2 className={"text-sm font-medium text-nb-gray-200"}>Settings</h2>
+        <div className={"wails-draggable flex flex-1 min-h-0 p-4 gap-4"}>
+            <div className={"flex flex-col w-52 shrink-0 items-center"}>
+                <SettingsNavigation active={active} onChange={setActive} />
+            </div>
+            <MainRightSide>{null}</MainRightSide>
         </div>
     );
 };

client/ui-wails/frontend/src/modules/settings/SettingsNavigation.tsx

@@ -0,0 +1,53 @@
+import { NavItem } from "@/components/NavItem.tsx";
+import {
+    InfoIcon,
+    LifeBuoyIcon,
+    NetworkIcon,
+    SlidersHorizontalIcon,
+    TerminalIcon,
+} from "lucide-react";
+
+export type SettingsSection =
+    | "general"
+    | "network"
+    | "ssh"
+    | "troubleshooting"
+    | "about";
+
+type Props = {
+    active: SettingsSection;
+    onChange: (section: SettingsSection) => void;
+};
+
+const ITEMS: {
+    id: SettingsSection;
+    icon: typeof SlidersHorizontalIcon;
+    title: string;
+}[] = [
+    { id: "general", icon: SlidersHorizontalIcon, title: "General" },
+    { id: "network", icon: NetworkIcon, title: "Network" },
+    { id: "ssh", icon: TerminalIcon, title: "SSH" },
+    { id: "troubleshooting", icon: LifeBuoyIcon, title: "Troubleshooting" },
+    { id: "about", icon: InfoIcon, title: "About" },
+];
+
+export const SettingsNavigation = ({ active, onChange }: Props) => {
+    return (
+        <nav className={"w-full flex flex-col gap-1"}>
+            {ITEMS.map(({ id, icon, title }) => (
+                <NavItem
+                    key={id}
+                    icon={icon}
+                    title={title}
+                    iconSize={14}
+                    iconBackground={false}
+                    className={"py-2.5"}
+                    active={active === id}
+                    onClick={() => {
+                        if (active !== id) onChange(id);
+                    }}
+                />
+            ))}
+        </nav>
+    );
+};