web/settings: navigation draft

also unified "active" class/state across all components & added more colors
2024-06-24 19:42:31 +06:00
parent 0372e8df47
commit a12655a834
12 changed files with 195 additions and 34 deletions
--- a/web/src/components/settings/SettingsSection.svelte
+++ b/web/src/components/settings/SettingsSection.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    export let sectionTitle: string;
+</script>
+
+<div id="settings-section">
+    <div id="settings-section-title">{sectionTitle}</div>
+    <div id="settings-section-categories">
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+    #settings-section,
+    #settings-section-categories {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #settings-section {
+        gap: 6px;
+    }
+
+    #settings-section-title {
+        font-size: 12px;
+        color: var(--gray);
+        padding-left: 8px;
+    }
+</style>