refactor: MantineSimpleNavbar

vuesence · Mar 10, 2024 · f38c839 · f38c839
1 parent b37187a
commit f38c839
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/components/navbars/MantineSimpleNavbar.vue b/src/components/navbars/MantineSimpleNavbar.vue
@@ -24,22 +24,26 @@ const footerLinks = [
   <nav class="navbar">
     <div class="main">
       <ul>
-        <li v-for="link in links" :key="link.label">
-          <router-link v-slot="{ href, navigate }" :to="{ name: link.name }" custom>
-            <BaseIcon size="24" :name="link.icon" class="icon" fill1="currentColor" />
-            <a role="link" :href="href" @click="onLinkClick($event, navigate)">{{ link.label }}</a>
-          </router-link>
-        </li>
+        <router-link v-for="link in links" :key="link.label" v-slot="{ href, navigate }" :to="{ name: link.name }" custom>
+          <li>
+            <a role="link" :href="href" @click="onLinkClick($event, navigate)">
+              <BaseIcon size="24" :name="link.icon" class="icon" fill1="currentColor" />
+              <span>{{ link.label }}</span>
+            </a>
+          </li>
+        </router-link>
       </ul>
     </div>
     <div class="footer">
       <ul>
-        <li v-for="link in footerLinks" :key="link.label">
-          <router-link v-slot="{ href, navigate }" :to="{ name: link.name }" custom>
-            <BaseIcon size="24" :name="link.icon" class="icon" />
-            <a role="link" :href="href" @click="onLinkClick($event, navigate)">{{ link.label }}</a>
-          </router-link>
-        </li>
+        <router-link v-for="link in footerLinks" :key="link.label" v-slot="{ href, navigate }" :to="{ name: link.name }" custom>
+          <li>
+            <a role="link" :href="href" @click="onLinkClick($event, navigate)">
+              <BaseIcon size="24" :name="link.icon" class="icon" />
+              <span>{{ link.label }}</span>
+            </a>
+          </li>
+        </router-link>
       </ul>
     </div>
   </nav>
@@ -61,7 +65,6 @@ const footerLinks = [
 
       li {
         line-height: 3em;
-        padding-left: 1em;
         display: flex;
         align-items: center;
         color: var(--vwa-c-text-2);
@@ -73,14 +76,17 @@ const footerLinks = [
 
         a {
           cursor: pointer;
-          display: block;
+          display: flex;
+          align-items: center;
+          width: 100%;
           padding: 0 2em 0 1em;
           color: var(--vwa-c-text-2);
           text-wrap: nowrap;
         }
-        // .icon {
-        //   color: var(--vwa-c-text-1)
-        // }
+        .icon {
+          // color: var(--vwa-c-text-1)
+          margin-right: 1em;
+        }
       }
 
     }