Adjust navigation bar to use the updated design and fix some quirks (Fixes #520) (#567)

* Adjust navigation bar to use the updated design and fix some quirks (Fixes #520)

* Revert dropdown's clickaway, and adjust styling so navbar remains consistently spaced.

* console log removal

* Fix horizontal scrollbar on desktop

* Hide unnecessary navbar and footer links in subscribe page

---------

Co-authored-by: Davi Nakano <davinakanoca@gmail.com>

Author: MelissaAutumn

assets/app/vue/components/FooterBar.vue

@@ -46,6 +46,7 @@ const navItemsMail = [
 const currentRoute = useRoute();
 
 const isThundermail = computed(() => currentRoute.path.startsWith('/mail'));
+const isSubscribePage = computed(() => currentRoute.path.startsWith('/subscribe'));
 const navItems = computed(() => isThundermail.value ? navItemsMail : navItemsAccounts);
 
 // https://vite.dev/guide/assets.html#new-url-url-import-meta-url
@@ -66,7 +67,7 @@ const logoSrc = computed(() => {
           <img :src="logoSrc" :alt="isThundermail ? 'Thundermail' : 'Thunderbird Pro'" />
         </router-link>
         <ul>
-          <template v-if="isAuthenticated">
+          <template v-if="isAuthenticated && !isSubscribePage">
             <li v-for="navItem in navItems" :key="navItem.route">
               <router-link :to="navItem.route">
                 {{ t(`navigationLinks.${navItem.i18nKey}`) }}

assets/app/vue/components/HeaderBar.vue

@@ -15,40 +15,17 @@ const navItemsAccounts = [
     route: '/dashboard',
     i18nKey: 'dashboard',
   },
-  // {
-  //   route: '/manage-mfa',
-  //   i18nKey: 'manageMfa',
-  // },
-  // {
-  //   route: '/privacy-and-data',
-  //   i18nKey: 'privacyAndData',
-  // },
-];
-
-const navItemsMail = [
   {
     route: '/mail',
-    i18nKey: 'dashboard',
-  },
-  {
-    route: '/mail#email-settings',
-    i18nKey: 'manageEmails',
-  },
-  {
-    route: '/mail#custom-domains',
-    i18nKey: 'customDomains',
+    i18nKey: 'manageThundermail',
   },
-  // TODO: Uncomment when implementing security settings
-  // {
-  //   route: '/mail/security-settings',
-  //   i18nKey: 'securitySettings',
-  // },
 ];
 
 const currentRoute = useRoute();
 
 const isThundermail = computed(() => currentRoute.path.startsWith('/mail'));
-const navItems = computed(() => isThundermail.value ? navItemsMail : navItemsAccounts);
+const isSubscribePage = computed(() => currentRoute.path.startsWith('/subscribe'));
+const navItems = computed(() => navItemsAccounts);
 
 // https://vite.dev/guide/assets.html#new-url-url-import-meta-url
 const logoSrc = computed(() => {
@@ -74,7 +51,7 @@ const logoSrc = computed(() => {
     </template>
 
     <template v-if="isAuthenticated">
-      <nav class="desktop">
+      <nav class="desktop" v-if="!isSubscribePage">
         <ul>
           <li v-for="navItem in navItems" :key="navItem.route">
             <router-link :to="navItem.route" :class="{ active: currentRoute.path === navItem.route }">
@@ -103,11 +80,25 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   height: 68px;
   padding: 1rem;
   backdrop-filter: blur(24px);
   box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1);
   background-image: linear-gradient(to top, #1a202c, #2f3a50);
+  width: 100%;
+
+  /* Without this we can't be on top of main content when we need */
+  position: relative;
+  z-index: var(--z-index-header-dropdown);
+
+  &:first-child {
+    margin-right: auto;
+  }
+
+  &:last-child {
+    margin-left: auto;
+  }
 
   nav.desktop {
     display: none;
@@ -117,7 +108,8 @@ header {
     text-decoration: none;
 
     .brand.outline {
-      color: #eeeef0; /* var(--colour-ti-base) dark mode */
+      color: #eeeef0;
+      /* var(--colour-ti-base) dark mode */
     }
   }
 
@@ -148,13 +140,19 @@ header {
   header {
     nav.desktop {
       display: block;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 }
 
 @media (min-width: 1024px) {
-  header {
+
+  header> :first-child,
+  header> :last-child {
     padding: 1rem 3.5rem;
   }
+
 }
 </style>

assets/app/vue/components/UserMenu.vue

@@ -1,23 +1,36 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { UserAvatar } from '@thunderbirdops/services-ui';
 
 defineProps<{
   username: string;
 }>();
 
 const { t } = useI18n();
-const router = useRouter();
 const currentRoute = useRoute();
 
-const internalMenuItems = [
-  {
-    label: t('components.userMenu.contact'),
+const isSubscribePage = computed(() => currentRoute.path.startsWith('/subscribe'));
+
+const internalMenuItems = computed(() => {
+  const items = []
+
+  // Only show the account / dashboard link on non subscribe pages
+  if (!isSubscribePage.value) {
+    items.push({
+      label: t('components.userMenu.account'),
+      to: '/dashboard',
+    });
+  }
+
+  items.push({
+    label: t('components.userMenu.support'),
     to: '/contact',
-  },
-]
+  });
+
+  return items;
+});
 
 const externalMenuItems = [
   {
@@ -27,14 +40,9 @@ const externalMenuItems = [
 ];
 
 const showMenu = ref(false);
-const menuRef = ref<HTMLElement | null>(null);
+const menuRef = useTemplateRef<HTMLElement>('menuRef');
 
 const toggleMenu = () => {
-  if (currentRoute.path.startsWith('/mail')) {
-    router.push('/');
-    return;
-  }
-
   showMenu.value = !showMenu.value;
 };
 
@@ -59,24 +67,17 @@ onBeforeUnmount(() => {
 
     <div v-if="showMenu" class="dropdown">
       <!-- Holds internal links (VueJS routes) -->
-      <router-link
-        v-for="internalItem in internalMenuItems"
-        :key="internalItem.label"
-        :to="internalItem.to"
-      >
+      <router-link v-for="internalItem in internalMenuItems" :key="internalItem.label" :to="internalItem.to"
+        @click="toggleMenu">
         {{ internalItem.label }}
       </router-link>
 
       <!-- Holds external links (primarily Django routes) -->
-      <a
-        v-for="externalItem in externalMenuItems"
-        :key="externalItem.label"
-        :href="externalItem.href"
-      >
+      <a v-for="externalItem in externalMenuItems" :key="externalItem.label" :href="externalItem.href">
         {{ externalItem.label }}
       </a>
     </div>
-</button>
+  </button>
 </template>
 
 <style scoped>
@@ -85,12 +86,14 @@ onBeforeUnmount(() => {
   display: inline-block;
   background: none;
   border: none;
-  cursor: pointer;
 
   /* TODO: Temporary fix for UserAvatar color bug */
   .avatar {
+    cursor: pointer;
+
     & :first-child {
-      color: #eeeef0; /* var(--colour-ti-base) dark mode */
+      color: #eeeef0;
+      /* var(--colour-ti-base) dark mode */
     }
   }
 
@@ -104,6 +107,7 @@ onBeforeUnmount(() => {
     box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
     padding: 0.5rem 0;
     min-width: 150px;
+    z-index: var(--z-index-header-dropdown);
 
     a {
       display: flex;

assets/app/vue/locales/en.json

@@ -1,6 +1,7 @@
 {
   "navigationLinks": {
     "dashboard": "Dashboard",
+    "manageThundermail": "Manage Thundermail",
     "manageMfa": "Manage MFA",
     "privacyAndData": "Privacy & Data",
     "manageEmails": "Manage Emails",
@@ -16,7 +17,8 @@
       "yourServices": "Your Services"
     },
     "userMenu": {
-      "contact": "Contact",
+      "account": "Account",
+      "support": "Support",
       "logout": "Logout"
     }
   },

assets/app/vue/types.ts

@@ -10,4 +10,4 @@ export enum SERVER_MESSAGE_LEVEL {
 export type ServerMessage = {
   level: SERVER_MESSAGE_LEVEL;
   message: string;
-};
+};

assets/css/main.css

@@ -1,4 +1,5 @@
 @import 'fonts.css';
+@import "variables.css";
 
 *,
 *::before,

assets/css/variables.css

@@ -0,0 +1,6 @@
+:root {
+    /* Z-index definitions */
+    --z-index-base: 1;
+    --z-index-header-dropdown: 10;
+    --z-index-fullscreen-clickbox: calc(var(--z-index-header-dropdown, 0) - 1);
+}