footer changes two columns

floyd-li · Apr 10, 2023 · 4401c11 · 4401c11
1 parent 3349857
commit 4401c11
Showing 1 changed file with 47 additions and 16 deletions.
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
@@ -25,12 +25,37 @@
           <script src="https://substackapi.com/widget.js" async></script>
         </div>
       </div>
+      <div class="footer-container-info is-flex is-flex-direction-column">
+        <h4 class="subtitle is-5">Marketplace</h4>
+        <div>
+          <ul class="">
+            <li
+              v-for="item in menuMarketplace"
+              :key="item.url"
+              class="footer-container-info-list-item">
+              <a
+                v-if="item.external"
+                :href="item.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="is-flex is-align-items-center">
+                {{ item.name }}
+                <b-icon icon="external-link-alt" class="ml-1" size="is-small">
+                </b-icon>
+              </a>
+              <nuxt-link v-else :to="item.url">
+                {{ item.name }}
+              </nuxt-link>
+            </li>
+          </ul>
+        </div>
+      </div>
       <div class="footer-container-info is-flex is-flex-direction-column">
         <h4 class="subtitle is-5">KodaDot</h4>
         <div>
-          <ul class="footer-container-info-list">
+          <ul>
             <li
-              v-for="item in menu"
+              v-for="item in menuKodadot"
               :key="item.url"
               class="footer-container-info-list-item">
               <a
@@ -50,6 +75,7 @@
           </ul>
         </div>
       </div>
+
       <div class="footer-container-socials is-flex is-flex-direction-column">
         <h4 class="subtitle is-5">
           {{ $t('footer.join') }}
@@ -90,15 +116,27 @@ interface Menu {
 const { $i18n } = useNuxtApp()
 const { isDarkMode } = useTheme()
 
-const menu: Menu[] = [
-  {
-    name: $i18n.t('about'),
-    url: '/about',
-  },
+const menuMarketplace: Menu[] = [
   {
     name: $i18n.t('faq.page'),
     url: '/rmrk/faq',
   },
+  {
+    name: $i18n.t('documentation'),
+    url: 'https://docs.kodadot.xyz/',
+    external: true,
+  },
+  {
+    name: $i18n.t('contribute'),
+    url: '/contribute',
+  },
+]
+
+const menuKodadot: Menu[] = [
+  {
+    name: $i18n.t('about'),
+    url: '/about',
+  },
   {
     name: $i18n.t('careers'),
     url: '/jobs',
@@ -108,20 +146,13 @@ const menu: Menu[] = [
     url: 'https://shop.kodadot.xyz',
     external: true,
   },
-  {
-    name: $i18n.t('contribute'),
-    url: '/contribute',
-  },
+
   {
     name: $i18n.t('referralProgram'),
     url: 'https://docs.kodadot.xyz/referral-program.html',
     external: true,
   },
-  {
-    name: $i18n.t('documentation'),
-    url: 'https://docs.kodadot.xyz/',
-    external: true,
-  },
+
   {
     name: $i18n.t('artist ambassador'),
     url: 'https://docs.kodadot.xyz/artist-ambassador.html#conditions-%F0%9F%94%8D',