implement search layout #32 #33 #35

src/components/Navbar.vue

@@ -26,59 +26,59 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <span class="navbar-toggler-icon"></span>
       </button>
       <div
-        class="collapse navbar-collapse"
+        class="collapse navbar-collapse d-lg-flex"
         :class="{ show: showMobileNav }"
         id="navbarSupportedContent"
       >
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <ul class="navbar-nav mb-2 mb-lg-0">
           <li class="nav-item">
             <router-link
               class="nav-link"
               :to="{ path: `/s/search` }"
               active-class="active"
-              >Suche</router-link
-            >
+            >Suche</router-link
+          >
           </li>
           <li class="nav-item">
             <router-link
               class="nav-link"
               :to="{ path: `/s/profile/${currentUserId}` }"
               active-class="active"
-              >Mein Profil</router-link
-            >
+            >Mein Profil</router-link
+          >
           </li>
           <li class="nav-item">
             <router-link
               class="nav-link"
               :to="{ path: `/s/profile-edit` }"
               active-class="active"
-              >Bearbeiten</router-link
-            >
-          </li>
-          <li class="nav-item">
-            <button class="btn btn-outline-danger" @click="logout()">
-              Logout
-            </button>
+            >Bearbeiten</router-link
+          >
           </li>
         </ul>
-        <form class="d-flex" @submit.prevent="searchRedirect()">
+        <form class="flex-grow-1 d-flex ms-lg-3 me-lg-4 mb-3 mb-lg-0" @submit.prevent="searchRedirect()">
           <input
-            class="form-control me-2"
+            class="form-control bg-white me-2"
             v-model="searchText"
             type="search"
             placeholder="Profile durchsuchen"
             aria-label="Search"
           />
           <button
-            class="btn btn-outline-primary"
+            class="btn btn-primary"
             type="submit"
           >
-            <img
-              src="/img/bootstrap-icons-1.5.0/search.svg"
-              alt="Suche Icon"
-            />
+            <i class="bi bi-search"></i>
           </button>
         </form>
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <button class="btn btn-danger w-100" @click="logout()">
+              <i class="bi bi-box-arrow-right"></i>
+              Logout
+            </button>
+          </li>
+        </ul>
       </div>
     </div>
   </nav>