Lots of changes:

- Switching build system to pure rollup without too much custom logic
- Restructuring files
- Adding Popup View
- Make everything typescript compatible
- Adding @hibas123/theme
- Start switching to @hibas123/theme

src/pages/User/NavigationBar.svelte

@@ -0,0 +1,52 @@
+<script>
+  export let open;
+  export let active;
+  export let pages = [];
+</script>
+
+<style>
+  :root {
+    --rel-size: 0.75rem;
+  }
+
+  .container {
+    height: calc(var(--rel-size) * 3);
+    padding: var(--rel-size);
+    display: flex;
+    /* align-content: center; */
+    align-items: center;
+    /* justify-content: center; */
+  }
+
+  .active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .icon {
+    /* float: left; */
+    width: calc(var(--rel-size) * 3);
+    height: calc(var(--rel-size) * 3);
+  }
+
+  .icon > img {
+    width: calc(var(--rel-size) * 3);
+    height: calc(var(--rel-size) * 3);
+  }
+
+  .title {
+    /* margin: auto; */
+    margin-left: var(--rel-size);
+    /* height: 100%; */
+  }
+</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>
+    <h3 class="title">{page.title}</h3>
+  </div>
+{/each}