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>
+    <div class="justify-items-center align-middle">
         <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>
+                    <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><a href={subPage}>{subPage}</a></li>
+                <li class="sub-nav-item inline-block"><a class="sub-nav-link"href={subPage}>{subPage}</a></li>
             {/each}
         </ul>
+    </div>
 </nav>
 <slot />