feat: learn

src/routes/(app)/Sidebar.svelte

@@ -15,18 +15,42 @@
     }
   });
 
+  const routes = [
+    [
+      { href: "/config/chords/", icon: "dictionary", title: "Chords" },
+      { href: "/config/layout/", icon: "keyboard", title: "Layout" },
+      { href: "/config/settings/", icon: "tune", title: "Config" },
+    ],
+    [
+      { href: "/learn", icon: "school", title: "Learn", wip: true },
+      { href: "/learn", icon: "description", title: "Docs" },
+      { href: "/editor", icon: "edit_document", title: "Editor", wip: true },
+    ],
+    [
+      { href: "/chat", icon: "chat", title: "Chat", wip: true },
+      { href: "/plugin", icon: "code", title: "Plugin", wip: true },
+    ],
+  ] satisfies { href: string; icon: string; title: string; wip?: boolean }[][];
+
   let connectButton: HTMLButtonElement;
 </script>
 
 <div class="sidebar">
   <nav>
-    <ul>
-      <li><a href="/config/layout/" class="icon">tune</a></li>
-      <li><a href="/learn" class="wip icon">school</a></li>
-      <li><a href="/editor" class="wip icon">edit_document</a></li>
-      <li><a href="/chat" class="wip icon">chat</a></li>
-      <li><a href="/plugin" class="wip icon">code</a></li>
-    </ul>
+    {#each routes as group}
+      <ul>
+        {#each group as { href, icon, title, wip }}
+          <li>
+            <a class:wip {href}>
+              <div class="icon">{icon}</div>
+              <div class="content">
+                {title}
+              </div>
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/each}
   </nav>
   <ul class="sidebar-footer">
     <li>
@@ -56,6 +80,7 @@
   .sidebar {
     margin: 8px;
     padding-inline-end: 8px;
+    width: 64px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -64,25 +89,46 @@
     border-right: 1px solid var(--md-sys-color-outline);
   }
 
+  li {
+    display: flex;
+    justify-content: center;
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    margin: 8px 0;
+    font-size: 12px;
+
+    &.wip {
+      color: var(--md-sys-color-error);
+      opacity: 0.5;
+    }
+
+    .icon {
+      display: flex;
+      justify-content: center;
+      font-size: 24px;
+    }
+
+    > .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
 
-  .wip {
-    position: relative;
-  }
-
-  .wip::after {
-    content: "experiment";
-    font-size: 16px;
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-    background: var(--md-sys-color-tertiary);
-    color: var(--md-sys-color-on-tertiary);
-    border-radius: 100%;
-    padding: 2px;
+  ul + ul::before {
+    content: "";
+    display: block;
+    height: 1px;
+    background: var(--md-sys-color-outline);
+    margin: 16px 0;
   }
 </style>