commit before refactoring bar

src/routes/+layout.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { writable } from "svelte/store";
     import "../app.css";
     
     const nav = [
@@ -36,16 +35,18 @@
 </script>
 
 <nav>
-    <ul>
-        {#each nav as main,i}
-            {#if i != 0}
-                <li><button class={selected==i ? "nav-link active p-2 ml-1" : "p-2 ml-1 nav-link"} on:click={changeComponent} id={i} >{main.name}</button></li>
-            {/if}     
-        {/each}
-        <hr />
-        {#each selected.subPages as subPage}
-            <li><a href={subPage}>{subPage}</a></li>
-        {/each}
-    </ul>
+    <div class="justify-items-center align-middle">
+        <ul>
+            {#each nav as main,i}
+                {#if i != 0}
+                    <li class="nav-item inline-block"><button class={selected==nav[i] ? "nav-link font-bold p-2 ml-1" : "p-2 ml-1 nav-link"} on:click={changeComponent} id={i} >{main.name}</button></li>
+                {/if}
+            {/each}
+            <hr />
+            {#each selected.subPages as subPage}
+                <li class="sub-nav-item inline-block"><a class="sub-nav-link"href={subPage}>{subPage}</a></li>
+            {/each}
+        </ul>
+    </div>
 </nav>
 <slot />