From 8c442bc25be0ce77934e6884f5fce4866bf58d40 Mon Sep 17 00:00:00 2001
From: NotXia <35894453+NotXia@users.noreply.github.com>
Date: Thu, 19 Jan 2023 19:27:49 +0100
Subject: [PATCH] Update navbar

---
 src/components/Navbar/Navbar.vue              | 14 +++----
 .../language-selector/LanguageSelector.vue    | 40 ++++++++++---------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index efe6030..0feab2e 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -1,17 +1,15 @@
 <template>
-    <nav class="bg-white border-gray-200 dark:bg-gray-900 px-2 sm:px-4 py-2.5 ">
-    <div class="container flex flex-wrap items-center justify-between md:justify-start mx-auto">
-        <div></div>
-
-        <div class="block md:flex">
-            <div class="flex justify-end items-center order-2">
+    <nav class="bg-white border-gray-200 dark:bg-gray-900 py-2.5">
+    <div class="container flex flex-wrap items-center justify-end md:justify-start mx-auto">
+        <div class="block md:flex w-full">
+            <div class="flex justify-end items-center order-2 md:w-1/2">
                 <a href="https://github.com/NotXia" class="rounded-full p-1 mx-1 hover:bg-slate-200 dark:hover:bg-slate-700">
                     <img :src="github_icon" alt="Github" class="h-5 dark:invert" /> 
                 </a>
                 <ThemeSwitch class="mx-1" />
                 <LanguageSelector class="mx-1" />
 
-                <button class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
+                <button class="inline-flex items-center mx-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
                     data-collapse-toggle="navbar-main" type="button" aria-controls="navbar-main" aria-expanded="false">
                     <span class="sr-only">{{ t("open nav") }}</span>
                     <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -20,7 +18,7 @@
                 </button>
             </div>
 
-            <div class="flex items-center order-1">
+            <div class="flex items-center order-1 md:w-1/2">
                 <div class="hidden w-full md:block md:w-auto" id="navbar-main">
                     <ul class="flex flex-col py-4 pr-4 mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium bg-transparent">
                         <NavLink to="/" :label="t('home')"/>
diff --git a/src/components/language-selector/LanguageSelector.vue b/src/components/language-selector/LanguageSelector.vue
index b96a8a0..4a8e6a8 100644
--- a/src/components/language-selector/LanguageSelector.vue
+++ b/src/components/language-selector/LanguageSelector.vue
@@ -1,24 +1,26 @@
 <template>
-    <button id="button-dropdown-locales" data-dropdown-toggle="dropdown-locales" type="button"
-            class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700">
-        <div class="w-5 h-5 flex items-center justify-center">
-            <img :src="globe_icon" alt="Language" class="h-full w-full dark:invert" />
+    <div>
+        <button id="button-dropdown-locales" data-dropdown-toggle="dropdown-locales" type="button"
+                class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700">
+            <div class="w-5 h-5 flex items-center justify-center">
+                <img :src="globe_icon" alt="Language" class="h-full w-full dark:invert" />
+            </div>
+        </button>
+    
+        <div id="dropdown-locales" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
+            <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="button-dropdown-locales">
+                
+                <li v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">
+                    <input :id="`radio-locale-${locale}`" type="radio" :value="locale" name="locale" class="hidden" v-model="$i18n.locale" :onChange="changeLocale">
+                    <label :for="`radio-locale-${locale}`" class="text-sm font-medium uppercase text-gray-900 rounded dark:text-gray-300 ">
+                        <div class="flex items-center p-2 px-5 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                            {{ locale }}
+                        </div>
+                    </label>
+                </li>
+    
+            </ul>
         </div>
-    </button>
-
-    <div id="dropdown-locales" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
-        <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="button-dropdown-locales">
-            
-            <li v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">
-                <input :id="`radio-locale-${locale}`" type="radio" :value="locale" name="locale" class="hidden" v-model="$i18n.locale" :onChange="changeLocale">
-                <label :for="`radio-locale-${locale}`" class="text-sm font-medium uppercase text-gray-900 rounded dark:text-gray-300 ">
-                    <div class="flex items-center p-2 px-5 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
-                        {{ locale }}
-                    </div>
-                </label>
-            </li>
-
-        </ul>
     </div>
 </template>