fix: header on mobile (#136)

allinbits · Sep 22, 2024 · 4a352f4 · 4a352f4
1 parent c9ffc81
commit 4a352f4
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/src/components/layout/HeaderSection.vue b/src/components/layout/HeaderSection.vue
@@ -4,21 +4,26 @@ import WalletConnect from "@/components/popups/WalletConnect.vue";
 
 <template>
   <header>
-    <nav class="flex flex-row justify-between items-center py-4 w-full select-none relative">
-      <div class="flex flex-row justify-start gap-8 items-center select-none relative">
+    <nav class="flex flex-row justify-between md:items-center py-4 w-full select-none relative">
+      <div class="flex flex-col md:flex-row justify-start gap-x-8 md:items-center select-none relative">
         <router-link to="/" class="text-500 font-termina py-4">{{ $t("homepage.title") }}</router-link>
-        <router-link active-class="text-light" to="/" class="text-300 py-4 hover:text-light text-grey-100">{{
-          $t("homepage.viewProposals")
-        }}</router-link>
-        <router-link active-class="text-light" to="/history" class="text-300 py-4 hover:text-light text-grey-100">{{
-          $t("homepage.viewHistory")
-        }}</router-link>
-        <router-link active-class="text-light" to="/faq" class="text-300 py-4 hover:text-light text-grey-100">{{
-          $t("homepage.viewFaq")
-        }}</router-link>
-        <a target="_blank" href="https://commonwealth.im/govgen" class="text-300 py-4 hover:text-light text-grey-100">{{
-          $t("homepage.viewForums")
-        }}</a>
+        <div class="flex flex-row gap-4 md:gap-4 items-center">
+          <router-link active-class="text-light" to="/" class="text-300 py-4 hover:text-light text-grey-100">{{
+            $t("homepage.viewProposals")
+          }}</router-link>
+          <router-link active-class="text-light" to="/history" class="text-300 py-4 hover:text-light text-grey-100">{{
+            $t("homepage.viewHistory")
+          }}</router-link>
+          <router-link active-class="text-light" to="/faq" class="text-300 py-4 hover:text-light text-grey-100">{{
+            $t("homepage.viewFaq")
+          }}</router-link>
+          <a
+            target="_blank"
+            href="https://commonwealth.im/govgen"
+            class="text-300 py-4 hover:text-light text-grey-100"
+            >{{ $t("homepage.viewForums") }}</a
+          >
+        </div>
       </div>
       <WalletConnect class="hidden md:block" />
     </nav>