541 - dashboard header fix (#542)

frontend/src/components/Dashboard/Header/DashboardHeader.vue

@@ -1,42 +1,55 @@
 <template>
   <div>
-    <v-app-bar class="navbar-custom" dark clipped-right color="#2C3E50">
-      <v-toolbar-title>
-        <a href="https://codeforpoznan.pl/">
-          <v-img
-            :src="cfpLogo"
-            contain
-            max-height="20"
-            aspect-ratio="1.7"
-            max-width="500"
-            min-width="350"
-            position="left"
-          ></v-img>
-        </a>
+    <v-app-bar class="navbar-custom" dark app color="#2C3E50">
+      <v-toolbar-title class="d-inline">
+        <v-row>
+          <v-col class="d-flex child-flex">
+            <a href="https://codeforpoznan.pl/">
+              <v-img
+                :src="cfpLogo"
+                max-height="22"
+                aspect-ratio="1.5"
+                max-width="500"
+                min-width="250"
+                inline
+              ></v-img>
+            </a>
+          </v-col>
+        </v-row>
       </v-toolbar-title>
-      <v-spacer></v-spacer>
       <v-app-bar-nav-icon
-        @click="drawer = !drawer"
+        variant="text"
+        @click.stop="drawer = !drawer"
         class="hidden-md-and-up"
+        color="white"
       ></v-app-bar-nav-icon>
-      <v-tabs background-color="transparent" right class="hidden-sm-and-down">
-        <v-tab align-right @click="onLogout">Logout</v-tab>
+      <v-tabs
+        bg-color="#2C3E50"
+        color="white"
+        dark
+        height="64"
+        right
+        class="hidden-sm-and-down"
+      >
+        <v-tab align-right theme="dark" class="tab-custom" @click="onLogout"
+          >Logout</v-tab
+        >
       </v-tabs>
     </v-app-bar>
-    <v-list class="navbar-custom hidden-md-and-up" dark>
-      <v-expand-transition>
-        <v-tabs
-          width="100%"
-          v-if="drawer"
-          background-color="transparent"
-          vertical
-        >
-          <div class="mobile-tab-items">
-            <v-tab @click="onLogout" class="tab-custom">Logout</v-tab>
-          </div>
-        </v-tabs>
-      </v-expand-transition>
-    </v-list>
+    <v-navigation-drawer
+      v-model="drawer"
+      location="top"
+      temporary
+      rail="true"
+      rail-width="190"
+      @click="drawer = false"
+    >
+      <v-list class="navbar-custom hidden-md-and-up" dark>
+        <v-list-item class="mobile-tab-custom" @click.prevent="onLogout">
+          Logout
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
   </div>
 </template>
 
@@ -64,10 +77,10 @@ export default {
   padding: 0;
 }
 .tab-custom {
+  color: hsla(0, 0%, 100%, 0.6);
+}
+.mobile-tab-custom {
   justify-content: left;
   max-width: none;
 }
-.mobile-tab-items {
-  width: 100vw;
-}
 </style>

frontend/src/components/HomePage/Header/HomePageHeader.vue

@@ -113,7 +113,4 @@ export default {
   justify-content: left;
   max-width: none;
 }
-.mobile-tab-items {
-  width: 100vw;
-}
 </style>