Making every thing nicer

src/pages/User/NavigationBar.svelte

@@ -18,12 +18,17 @@
     /* justify-content: center; */
   }
 
+  .subcomponent {
+    padding: 0 var(--rel-size);
+    margin: 0;
+    margin-left: calc(var(--rel-size) * 6);
+  }
+
   .active {
     background: rgba(0, 0, 0, 0.1);
   }
 
   .icon {
-    /* float: left; */
     width: calc(var(--rel-size) * 3);
     height: calc(var(--rel-size) * 3);
   }
@@ -33,20 +38,56 @@
     height: calc(var(--rel-size) * 3);
   }
 
+  .icon > :global(svg) {
+    width: calc(var(--rel-size) * 3);
+    height: calc(var(--rel-size) * 3);
+  }
+
   .title {
     /* margin: auto; */
-    margin-left: var(--rel-size);
+    margin-left: calc(var(--rel-size) * 1.5);
+    /* padding-left: var(--rel-size); */
     /* height: 100%; */
   }
+
+  .divide {
+    position: relative;
+    margin-top: var(--rel-size);
+    padding-top: var(--rel-size);
+  }
+
+  .divide::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1px;
+    width: 100%; /* or 100px */
+    transform: scaleX(0.8);
+    border-top: 1px solid var(--on-background);
+  }
 </style>
 
 {#each pages as page}
-  <div
-    class={'container' + (page === active ? ' active' : '')}
-    on:click={() => open(page.id)}>
-    <div class="icon">
-      <img alt={page.title} src={page.icon} />
+  <div class:divide={page.divide}>
+    <div
+      class="container"
+      class:active={page === active}
+      on:click={() => open(page.id)}>
+      <div class="icon">
+        {#if typeof page.icon === 'string'}
+          <img alt={page.title} src={page.icon} />
+        {:else}
+          <svelte:component this={page.icon} />
+        {/if}
+      </div>
+      <h3 class="title">{page.title}</h3>
     </div>
-    <h3 class="title">{page.title}</h3>
+    {#if page.subComponents}
+      {#each page.subComponents as sub}
+        <h3 class="subcomponent">{sub.title}</h3>
+      {/each}
+    {/if}
   </div>
 {/each}