still basic layouting...

budgit.client/index.html

@@ -16,7 +16,7 @@
     <strong>We're sorry but budgit.client doesn't work properly without JavaScript
       enabled. Please enable it to continue.</strong>
   </noscript>
-  <div id="app" class="h-screen"></div>
+  <div id="app"></div>
   <!-- built files will be auto injected -->
   <script type="module" src="./src/main.js"></script>
 </body>

budgit.client/src/App.vue

@@ -1,15 +1,17 @@
 <template>
-  <header class="text-slate-50">
+  <div class="flex flex-col">
-    <Navbar />
+    <header class="text-slate-50">
-  </header>
+      <Navbar />
-  <main class="text-slate-50 bg-stone-900 h-full">
+    </header>
-    <router-view />
+    <main class="text-slate-50 bg-stone-900 min-h-screen">
-  </main>
+      <router-view />
-  <footer class="text-slate-50 bg-stone-800">
+    </main>
-    <div>
+    <footer class="text-slate-50 bg-stone-800 justify-self-end">
-      An <a href="https://github.com/annikyet">Annika</a> project.
+      <div>
-    </div>
+        An <a href="https://github.com/annikyet">Annika</a> project.
-  </footer>
+      </div>
+    </footer>
+  </div>
 </template>
 
 <script>
@@ -25,5 +27,4 @@ export default {
 }
 </script>
 <style lang="postcss">
-
 </style>

budgit.client/src/components/Login.vue

@@ -1,24 +1,16 @@
 <template>
-  <span class="navbar-text">
+  <span class="flex self-start md:self-end">
-    <button class="btn selectable text-success lighten-30 text-uppercase my-2 my-lg-0" @click="login"
+    <button class="hover:text-green-300" @click="login"
       v-if="!user.isAuthenticated">
       Login
     </button>
 
-    <div class="" v-else>
+    <div class="flex" v-else>
-      <div class="flex" id="authDropdown">
+      <router-link :to="{ name: 'Account' }" class="self-start md:self-end">
-        <router-link :to="{ name: 'Account' }">
+        <span class="text-xs self-start md:self-end md:text-base md:mx-3">{{ account.name }}</span>
-          <div class="flex">
+      </router-link>
-            <div v-if="account.picture" class="">
+      <div class="hidden md:block hover:text-green-300 cursor-pointer" @click="logout">
-              <img :src="account.picture" alt="account photo" height="40" class="max-h-8" />
+        <i class="mdi mdi-logout"></i>
-            </div>
-            <span class="mx-3 text-success lighten-30">{{ account.name }}</span>
-          </div>
-        </router-link>
-        <div class="hover:text-green-300" @click="logout">
-          <i class="mdi mdi-logout"></i>
-          <!-- logout -->
-        </div>
       </div>
     </div>
   </span>

budgit.client/src/components/Navbar.vue

@@ -1,15 +1,18 @@
 <template>
-  <nav class="flex justify-between items-end w-screen bg-stone-800 p-2">
+  <nav class="flex justify-between items-end w-screen bg-stone-800 py-2 pr-3">
     <div class="flex justify-start items-end">
       <router-link :to="{ name: 'Overview' }">
         <h3 class="text-4xl mr-10 text-green-300 hover:text-slate-50">Budg.it</h3>
+        <!-- text-rose-700: color of bad -->
+      </router-link>
+      <router-link :to="{ name: 'Overview' }">
+        <p class="hidden md:block mx-3">Overview</p>
       </router-link>
       <router-link :to="{ name: 'Transactions' }">
-        <p class="hidden md:block">Transactions</p>
+        <p class="hidden md:block mx-3">Transactions</p>
       </router-link>
     </div>
-    <Login class="hidden md:block" />
+    <Login class="md:block" />
-    <div class="block md:hidden mdi mdi-menu"></div>
   </nav>
 
 

budgit.client/src/pages/OverviewPage.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="component">
-    <h1>overviewpage</h1>
+    <p class="hover:text-green-300 cursor-pointer">Add Category</p>
-
+    <div class="flex md:mx-40 flex-col md:flex-row">
+      <div class="md:w-4/12 md:order-last">analysis container</div>
+      <div class="md:w-8/12">category container</div>
+    </div>
   </div>
 </template>