Improve header

Optically separate from the rest, vertically allign elements, remove home button and make title (ola-hd) a link
subugoe · Sep 10, 2024 · d107dfd · d107dfd
1 parent 7f923cc
commit d107dfd
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 33 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="app" class="min-h-screen flex flex-col flex-1">
     <NavigationMenu />
-    <div class="h-14" />
     <Main v-if="isHeaderVisible"></Main>
     <div class="flex flex-1 flex-col">
       <Router-View v-slot="{ Component, route }">

diff --git a/src/index.css b/src/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .normal-blue-button {
-  @apply bg-sky-600 font-medium px-3 py-1 mt-1 shadow-sm text-white rounded-md;
+  @apply bg-sky-600 font-medium px-3 py-1 shadow-sm text-white rounded-md;
 }
 .normal-blue-button:hover:enabled {
   @apply hover:bg-sky-700

diff --git a/src/layout/navigation-menu/index.vue b/src/layout/navigation-menu/index.vue
@@ -1,41 +1,25 @@
 <template>
   <!-- Navigation -->
   <header>
-    <nav class="left-0 right-0 z-10" style="position: fixed">
+    <nav class="left-0 right-0 z-10 px-2 border-b border-gray-300">
       <!-- Navigation menu -->
-      <div class="bg-white sticky top-0 grid grid-cols-6 gap-4 py-2">
-        <div class="flex flex-1 justify-between items-center">
-          <router-link as="nav" class="px-2" active-class="active" to="/" exact>
-            <span class="pl-2 text-sky-500 hover:text-slate-700">{{
-              "Home"
+      <div class="bg-white sticky flex py-2">
+        <!-- dummy to leave left column empty -->
+        <div class="basis-1/3 flex-none"></div>
+        <div class="basis-1/3 flex-none flex flex-1 items-center">
+          <router-link as="nav" class="flex-1 px-2 flex" active-class="active" to="/" exact>
+            <span class="flex-1 text-sky-500 hover:text-slate-700 text-center">{{
+              "OLA-HD"
             }}</span>
           </router-link>
         </div>
-        <div
-          class="
-            flex flex-1
-            items-center
-            justify-center
-            col-start-3 col-span-2
-            text-sky-500
-            lg:flex-1
-          "
-        >
-          <span>OLA-HD Service</span>
-        </div>
-
-        <div class="flex col-start-5 col-span-2 justify-end">
-          <div
-            v-if="isSearchBarVisible"
-            class="flex"
-          >
-            <Search />
+        <div class="basis-1/3 flex flex-wrap flex-row-reverse gap-4 ">
+          <div class="items-center justify-center">
+            <LoginBtnCustom :authService="authService" v-if="isCustomLogin"/>
+            <LoginBtnKeycloak :authService="authService" v-else/>
           </div>
-          <div class="flex ">
-            <div class="ml-3 mr-3 relative w-max">
-              <LoginBtnCustom :authService="authService" v-if="isCustomLogin" />
-              <LoginBtnKeycloak :authService="authService" v-else />
-            </div>
+          <div v-if="isSearchBarVisible" class="flex flex-1 items-center flex-row-reverse">
+            <Search/>
           </div>
         </div>
       </div>

diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container mt-2">
     <!-- Error message -->
     <div class="row my-3" v-if="error">
       <div class="col">