Improve sidebar and show next to appbar instead of below

web/src/App.vue

@@ -28,29 +28,34 @@ export default defineComponent({
 
 <template>
     <div class="box-border w-full">
-        <div class="flex bg-gray-400 dark:bg-gray-600 p-4 m-2 rounded-lg">
-            <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
-            <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
-
-            <span class="flex-1">{{ CurrentBudgetName }}</span>
-
-            <div class="flex flex-1 flex-row justify-end -mx-4">
-                <router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
-                <router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
-                <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
-            </div>
-        </div>
-
         <div class="flex flex-col md:flex-row flex-1">
             <div
                 :class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
-                class="md:block flex-shrink-0 w-full"
+                class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
             >
                 <router-view name="sidebar"></router-view>
             </div>
 
-            <div class="flex-1 p-6">
+            <div class="flex-1">
-                <router-view></router-view>
+                <div class="flex bg-gray-400 dark:bg-gray-600 p-4">
+                    <span
+                        class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
+                        @click="toggleMenuSize"
+                    >≡</span>
+                    <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
+
+                    <span class="flex-1">{{ CurrentBudgetName }}</span>
+
+                    <div class="flex flex-1 flex-row justify-end -mx-4">
+                        <router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
+                        <router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
+                        <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
+                    </div>
+                </div>
+
+                <div class="p-3 pl-6">
+                    <router-view></router-view>
+                </div>
             </div>
         </div>
     </div>

web/src/pages/BudgetSidebar.vue

@@ -31,16 +31,16 @@ function getAccountName(account : Account) {
 
 <template>
   <div class="flex flex-col">
-    <span class="m-1 p-1 px-3 text-xl">
+    <span class="m-2 p-1 px-3 h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
-      <router-link to="/dashboard">⌂</router-link>
+      <router-link to="/dashboard" style="font-size:150%">⌂</router-link>
       {{CurrentBudgetName}}
     </span>
-    <span class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3 flex flex-col">
+    <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
       <router-link :to="'/budget/'+CurrentBudgetID+'/budgeting'">Budget</router-link><br />
       <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
       <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
     </span>
-    <li class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3">
+    <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>On-Budget Accounts</span>
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
@@ -50,7 +50,7 @@ function getAccountName(account : Account) {
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
       </div>
     </li>
-    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
+    <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Off-Budget Accounts</span>
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
@@ -60,20 +60,20 @@ function getAccountName(account : Account) {
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
       </div>
     </li>
-    <!--<li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
+    <!--
+    <li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Closed Accounts</span>
       </div>
-    </li>-->
+      + Add Account
+    </li>
+    -->
     <!--<li>
       <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
     </li>-->
-    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
+    <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
-      + Add Account
-    </li>
-    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
       <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
     </li>
     <!--<li><router-link to="/admin">Admin</router-link></li>-->
   </div>        
-</template>
+</template>