Imporve Navbar UI (#1235)

- Improved padding
- Grouped links together on the left and icons on the right
- Updated navbar link hover effect
- Moved account icon to the rightmost place (as in almost every other
application)
- Rounded account icon to make it consistent with rest of the icon
buttons

Co-authored-by: Divya Jain <dvjn.dev+git@gmail.com>

web/src/components/layout/header/ActiveBuilds.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white"
+    class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white select-none"
     :class="{
       spinner: activeBuilds.length !== 0,
     }"

web/src/components/layout/header/Navbar.vue

@@ -1,42 +1,44 @@
 <template>
-  <div class="flex shadow-lg dark:shadow-sm bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
+  <!-- Navbar -->
-    <div class="flex text-white dark:text-gray-400 items-center">
+  <div class="flex shadow-lg dark:shadow-sm bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-900">
-      <router-link :to="{ name: 'home' }" class="relative">
+    <!-- Left Links Box -->
-        <img class="-mt-3 w-8" src="../../../assets/logo.svg?url" />
+    <div class="flex text-white dark:text-gray-400 items-center space-x-2">
-        <span class="absolute -bottom-4 text-xs">{{ version }}</span>
+      <!-- Logo -->
+      <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
+        <img class="w-8 h-8" src="../../../assets/logo.svg?url" />
+        <span class="text-xs">{{ version }}</span>
       </router-link>
-      <router-link
+      <!-- Repo Link -->
-        v-if="user"
+      <router-link v-if="user" :to="{ name: 'repos' }" class="navbar-link">
-        :to="{ name: 'repos' }"
-        class="mx-4 hover:bg-lime-700 dark:hover:bg-gray-600 px-4 py-1 rounded-md"
-      >
         <span class="flex md:hidden">{{ $t('repos') }}</span>
         <span class="hidden md:flex">{{ $t('repositories') }}</span>
       </router-link>
+      <!-- Docs Link -->
+      <a :href="docsUrl" target="_blank" class="navbar-link hidden md:flex">{{ $t('docs') }}</a>
     </div>
-    <div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-400">
+    <!-- Right Icons Box -->
-      <a
+    <div class="flex ml-auto items-center space-x-3 text-white dark:text-gray-400">
-        :href="docsUrl"
+      <!-- Dark Mode Toggle -->
-        target="_blank"
-        class="hover:bg-lime-700 dark:hover:bg-gray-600 px-4 py-1 rounded-md hidden md:flex"
-        >{{ $t('docs') }}</a
-      >
       <IconButton
         :icon="darkMode ? 'dark' : 'light'"
-        class="!text-white !dark:text-gray-500"
+        class="!text-white !dark:text-gray-500 navbar-icon"
         @click="darkMode = !darkMode"
       />
+      <!-- Admin Settings -->
       <IconButton
         v-if="user?.admin"
         icon="settings"
-        class="!text-white !dark:text-gray-500"
+        class="!text-white !dark:text-gray-500 navbar-icon"
         :to="{ name: 'admin-settings' }"
       />
-      <router-link v-if="user" :to="{ name: 'user' }">
+      <!-- Active Builds Indicator -->
-        <img v-if="user && user.avatar_url" class="w-8" :src="`${user.avatar_url}`" />
-      </router-link>
-      <Button v-else :text="$t('login')" @click="doLogin" />
       <ActiveBuilds v-if="user" />
+      <!-- User Avatar -->
+      <router-link v-if="user" :to="{ name: 'user' }" class="rounded-full overflow-hidden">
+        <img v-if="user && user.avatar_url" class="navbar-icon" :src="`${user.avatar_url}`" />
+      </router-link>
+      <!-- Login Button -->
+      <Button v-else :text="$t('login')" @click="doLogin" />
     </div>
   </div>
 </template>
@@ -75,3 +77,13 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.navbar-link {
+  @apply hover:bg-black hover:bg-opacity-10 transition-colors duration-100 px-3 py-2 -my-1 rounded-md;
+}
+
+.navbar-icon {
+  @apply w-8 h-8;
+}
+</style>