feat: update bottom navigation

rotki · Jul 16, 2024 · dad3717 · dad3717
1 parent 4db75c1
commit dad3717
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 56 deletions.
diff --git a/components/footer/FooterLegalese.vue b/components/footer/FooterLegalese.vue
diff --git a/components/footer/FooterNavigation.vue b/components/footer/FooterNavigation.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+const { t } = useI18n();
+
+interface MenuItem {
+  label: string;
+  to: string;
+  external?: true;
+  highlightExactActive?: true;
+  highlightActive?: true;
+}
+
+interface MenuGroup {
+  header: string;
+  items: MenuItem[];
+}
+
+const menus: MenuGroup[] = [
+  {
+    header: t('navigation_menu.product'),
+    items: [
+      {
+        label: t('navigation_menu.home'),
+        to: '/',
+        highlightExactActive: true,
+      },
+      {
+        label: t('navigation_menu.premium_features'),
+        to: '/products',
+        highlightActive: true,
+      },
+      {
+        label: t('navigation_menu.integration.title'),
+        to: '/integrations',
+        highlightActive: true,
+      },
+    ],
+  },
+  {
+    header: t('navigation_menu.company'),
+    items: [
+      {
+        label: t('navigation_menu.jobs'),
+        to: '/jobs',
+        highlightActive: true,
+      },
+      {
+        label: t('navigation_menu.values'),
+        to: '/values',
+        highlightActive: true,
+      },
+    ],
+  },
+  {
+    header: t('navigation_menu.resources'),
+    items: [
+      {
+        label: t('navigation_menu.documentation.title'),
+        to: 'https://rotki.readthedocs.io/en/latest/index.html',
+        external: true,
+      },
+      {
+        label: t('navigation_menu.blog.title'),
+        to: 'https://blog.rotki.com',
+        external: true,
+      },
+    ],
+  },
+  {
+    header: t('navigation_menu.legal'),
+    items: [
+      {
+        label: t('navigation_menu.impressum'),
+        to: '/impressum',
+        highlightActive: true,
+      },
+      {
+        label: t('navigation_menu.privacy_policy'),
+        to: '/privacy-policy',
+        highlightActive: true,
+      },
+      {
+        label: t('navigation_menu.tos'),
+        to: '/tos',
+        highlightActive: true,
+      },
+      {
+        label: t('navigation_menu.faq'),
+        to: 'https://rotki.readthedocs.io/en/latest/faq.html',
+        external: true,
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 gap-y-8">
+    <div
+      v-for="item in menus"
+      :key="item.header"
+      class="flex flex-col gap-4"
+    >
+      <div class="text-body-1 font-bold text-rui-text-secondary">
+        {{ item.header }}
+      </div>
+      <div>
+        <div
+          v-for="menu in item.items"
+          :key="menu.label"
+        >
+          <ButtonLink
+            size="lg"
+            :to="menu.to"
+            :highlight-active="menu.highlightActive"
+            :highlight-exact-active="menu.highlightExactActive"
+            :external="menu.external"
+          >
+            {{ menu.label }}
+          </ButtonLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue
@@ -20,30 +20,27 @@ const year = new Date().getFullYear().toString();
         v-if="landing"
         class="space-y-8 pt-8 lg:pt-16 mb-10"
       >
-        <div class="flex justify-between items-center">
+        <div class="flex flex-wrap gap-12">
           <AppLogo
             text
             size="2"
           />
-          <NuxtLink to="/download">
-            <RuiButton
+          <div class="flex-1 min-w-full xl:min-w-0 flex justify-center order-2 xl:order-1">
+            <FooterNavigation class="w-full xl:max-w-[800px]" />
+          </div>
+          <div
+            class="order-1 xl:order-2 flex justify-end"
+          >
+            <ButtonLink
               color="primary"
-              variant="text"
               size="lg"
+              to="/download"
+              rounded
+              variant="filled"
             >
               {{ t('page_footer.download') }}
-            </RuiButton>
-          </NuxtLink>
-        </div>
-        <div
-          class="flex md:flex-col xl:flex-row justify-between items-start md:items-center"
-        >
-          <NavigationMenu
-            class="grow xl:grow-0 flex-col md:flex-row gap-y-3 !gap-x-4"
-          />
-          <FooterLegalese
-            class="grow xl:grow-0 mt-0 md:mt-4 xl:mt-0 flex-col md:flex-row gap-y-3"
-          />
+            </ButtonLink>
+          </div>
         </div>
       </div>
       <div class="border-t border-rui-grey-100" />

diff --git a/locales/en.json b/locales/en.json
@@ -638,12 +638,13 @@
       "description": "Latest news and updates on rotki"
     },
     "integration": {
-      "title": "Integration",
+      "title": "Integrations",
       "description": "Supported blockchains, exchanges, and protocols"
     },
-    "resources": "Resources"
-  },
-  "footer_legalese": {
+    "resources": "Resources",
+    "product": "Product",
+    "company": "Company",
+    "legal": "Legal",
     "impressum": "Impressum",
     "privacy_policy": "Privacy Policy",
     "tos": "Terms of Service",