Add settings pages & header

src/components/SettingsNav.astro

@@ -0,0 +1,20 @@
+---
+import { Icon } from "astro-icon/components";
+import type { SettingsProps as Props } from "@utils/types.ts";
+
+const { active } = Astro.props; 
+---
+<div class="h-full w-full flex flex-col font-inter p-4 pl-8 pt-8 gap-2">
+    <a href="/settings/proxy/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "proxy" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:lock" class="h-5 w-5" /> Proxy
+    </a>
+    <a href="/settings/appearance/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "appearance" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:palette" class="h-5 w-5" /> Appearance
+    </a>
+    <a href="/settings/credits/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "credits" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:users" class="h-5 w-5" /> Credits
+    </a>
+    <a href="/settings/links/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "links" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:link" class="h-5 w-5" /> Social Links
+    </a>
+</div>

src/layouts/SettingsLayout.astro

@@ -0,0 +1,16 @@
+---
+import Layout from "@layouts/Layout.astro";
+import SettingsNav from "@components/SettingsNav.astro";
+import type { SettingsProps as Props } from "@utils/types.ts";
+
+//I love prop drilling
+const { active } = Astro.props;
+---
+<Layout>
+    <div class="h-full w-full flex font-inter">
+        <div class="w-1/4 bg-(--background) flex mt-14">
+            <SettingsNav active={active} />
+        </div>
+        <slot />
+    </div>
+</Layout>

src/pages/[...settings]/appearance.astro

@@ -0,0 +1,5 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="appearance">
+</SettingsLayout>

src/pages/[...settings]/credits.astro

@@ -0,0 +1,5 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="credits">
+</SettingsLayout>

src/pages/[...settings]/links.astro

@@ -0,0 +1,5 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="links">
+</SettingsLayout>

src/pages/[...settings]/proxy.astro

@@ -0,0 +1,7 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="proxy">
+    <div class="h-full mt-14 flex-grow">
+    </div>
+</SettingsLayout>

src/pages/settings.astro

@@ -1,5 +0,0 @@
----
-import Layout from "@layouts/Layout.astro";
----
-<Layout>
-</Layout>

src/utils/types.ts

@@ -0,0 +1,7 @@
+import type { Props } from "astro";
+
+interface SettingsProps extends Props {
+    active: 'appearance' | 'credits' | 'links' | 'proxy';
+}
+
+export type { SettingsProps };