From c3f35c57d0d5ee6fd1ff68a757a75605be16f314 Mon Sep 17 00:00:00 2001
From: Jonah Tan <47470981+jonahtanjz@users.noreply.github.com>
Date: Tue, 7 Dec 2021 16:03:24 +0800
Subject: [PATCH 01/10] Redesign top nav to two rows

---
 packages/vue-components/src/Navbar.vue | 105 +++++++++++++++++--------
 1 file changed, 71 insertions(+), 34 deletions(-)

diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index b55ca9d4d7..632632792b 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -5,26 +5,15 @@
         <div class="navbar-brand">
           <slot name="brand"></slot>
         </div>
-        <button
-          v-if="!slots.collapse"
-          class="navbar-toggler"
-          type="button"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-          @click="toggleCollapse"
-        >
-          <span class="navbar-toggler-icon"></span>
-          <slot name="collapse"></slot>
-        </button>
-
-        <div :class="['navbar-collapse',{collapse:collapsed}]">
+        <div class="navbar-top">
           <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
             <slot></slot>
           </ul>
-          <ul v-if="slots.right" class="navbar-nav navbar-right">
-            <slot name="right"></slot>
-          </ul>
         </div>
+
+        <ul v-if="slots.right" class="navbar-nav navbar-right">
+          <slot name="right"></slot>
+        </ul>
       </div>
     </nav>
     <div
@@ -78,7 +67,6 @@ export default {
   data() {
     return {
       id: 'bs-example-navbar-collapse-1',
-      collapsed: true,
       styles: {},
       isLowerNavbarShowing: false,
     };
@@ -111,10 +99,6 @@ export default {
     },
   },
   methods: {
-    toggleCollapse(e) {
-      if (e) { e.preventDefault(); }
-      this.collapsed = !this.collapsed;
-    },
     // Splits a normalised URL into its parts,
     // e.g http://site.org/foo/bar/index.html -> ['foo','bar','index.html']
     splitUrl(url) {
@@ -167,7 +151,8 @@ export default {
     },
     highlightLink(url) {
       const defHlMode = this.defaultHighlightOn;
-      const navLis = Array.from(this.$el.querySelector('.navbar-nav').children);
+      const navLis = [];
+      this.$el.querySelectorAll('.navbar-nav').forEach(nav => navLis.push(...Array.from(nav.children)));
       // attempt an exact match first
       for (let i = 0; i < navLis.length; i += 1) {
         const li = navLis[i];
@@ -254,13 +239,6 @@ export default {
         if (!content.contains(e.target)) content.classList.remove('open');
       });
     });
-    $(this.$el).on('click', 'li:not(.dropdown)>a', (e) => {
-      if (e.target.classList.contains('submenu-toggle')) { return; }
-      setTimeout(() => { this.collapsed = true; }, 200);
-    }).onBlur((e) => {
-      if (!this.$el.contains(e.target)) { this.collapsed = true; }
-    });
-    if (this.slots.collapse) $('[data-toggle="collapse"]', this.$el).on('click', e => this.toggleCollapse(e));
 
     // highlight current nav link
     this.highlightLink(window.location.href);
@@ -270,7 +248,6 @@ export default {
   },
   beforeDestroy() {
     $('.dropdown', this.$el).off('click').offBlur();
-    if (this.slots.collapse) $('[data-toggle="collapse"]', this.$el).off('click');
     $(window).off('resize', this.toggleLowerNavbar);
   },
 };
@@ -278,10 +255,58 @@ export default {
 
 <style scoped>
     @media (max-width: 767px) {
-        .navbar-collapse {
-            max-height: 80vh !important;
-            overflow-x: hidden !important;
-            overflow-y: scroll !important;
+        .navbar {
+            padding-left: 0;
+            padding-right: 0;
+            padding-bottom: 0;
+        }
+
+        div.navbar-brand {
+            padding-left: 1rem;
+        }
+
+        .navbar-right {
+            position: absolute;
+            top: 14px;
+            right: 16px;
+            max-width: 40vw;
+        }
+
+        .navbar-top {
+            display: block;
+            margin-top: 0.3125rem;
+            width: 100%;
+            overflow-x: scroll;
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+
+        .navbar-top::-webkit-scrollbar {
+            display: none;
+        }
+
+        .navbar-top ul {
+            flex-direction: row;
+            margin-top: 0 !important;
+            width: 100%;
+        }
+
+        .navbar-top > ul > li, .navbar-top > ul > div {
+            padding: 0.3125rem 0.625rem;
+            flex: 1;
+            background: rgba(0, 0, 0, 0.3);
+            text-align: center;
+        }
+
+        .navbar-top a,
+        >>> .dropdown-toggle {
+            margin: 0 auto;
+            width: max-content;
+        }
+
+        >>> .dropdown-toggle {
+            display: block;
+            padding: 0.5rem 0;
         }
     }
 
@@ -291,6 +316,13 @@ export default {
         z-index: 1000;
     }
 
+    .navbar-top {
+        display: flex;
+        flex-basis: auto;
+        flex-grow: 1;
+        align-items: center;
+    }
+
     >>> .dropdown-current {
         color: #fff !important;
         background: #007bff;
@@ -305,6 +337,11 @@ export default {
     }
 
     /* Navbar link highlight for current page */
+    .navbar .navbar-nav >>> .current:not(.dropdown),
+    .navbar .navbar-nav >>> .dropdown.current {
+        background: none;
+    }
+
     .navbar.navbar-dark .navbar-nav >>> .current:not(.dropdown) a,
     .navbar.navbar-dark .navbar-nav >>> .dropdown.current > a {
         color: #fff;

From 85035488fbeb5d2f10abb5ff853ae1de6135e861 Mon Sep 17 00:00:00 2001
From: Jonah Tan <47470981+jonahtanjz@users.noreply.github.com>
Date: Tue, 7 Dec 2021 16:07:41 +0800
Subject: [PATCH 02/10] Update navbar snapshot test

---
 .../__snapshots__/Navbar.spec.js.snap         | 72 ++++---------------
 1 file changed, 12 insertions(+), 60 deletions(-)

diff --git a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
index 5fef17d709..f62106bbf8 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -20,20 +20,8 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-top"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -58,9 +46,9 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
@@ -97,20 +85,8 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-top"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -135,9 +111,9 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
@@ -176,20 +152,8 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-top"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -214,9 +178,9 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
@@ -253,20 +217,8 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-top"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -291,9 +243,9 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    

From 4fa43142eddfd361cda63a54b19fb1abb50b1119 Mon Sep 17 00:00:00 2001
From: Jonah Tan <47470981+jonahtanjz@users.noreply.github.com>
Date: Tue, 7 Dec 2021 16:08:37 +0800
Subject: [PATCH 03/10] Run lintfix

---
 packages/vue-components/src/Navbar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index 632632792b..56e291dd55 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -291,7 +291,8 @@ export default {
             width: 100%;
         }
 
-        .navbar-top > ul > li, .navbar-top > ul > div {
+        .navbar-top > ul > li,
+        .navbar-top > ul > div {
             padding: 0.3125rem 0.625rem;
             flex: 1;
             background: rgba(0, 0, 0, 0.3);

From 92b2a2ecb4506c4df6791cdb0f4f0d3ebb63d0cd Mon Sep 17 00:00:00 2001
From: Jonah Tan <47470981+jonahtanjz@users.noreply.github.com>
Date: Tue, 7 Dec 2021 16:12:32 +0800
Subject: [PATCH 04/10] Add comments to css

---
 packages/vue-components/src/Navbar.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index 56e291dd55..7d7d53ba8d 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -277,10 +277,13 @@ export default {
             margin-top: 0.3125rem;
             width: 100%;
             overflow-x: scroll;
+
+            /* Hide overflow scroll bar */
             -ms-overflow-style: none;  /* IE and Edge */
             scrollbar-width: none;  /* Firefox */
         }
 
+        /* Hide overflow scroll bar for Chrome */
         .navbar-top::-webkit-scrollbar {
             display: none;
         }

From 386fc8f166e29f3d3703f3fb1389bd535a102841 Mon Sep 17 00:00:00 2001
From: jonahtanjz <jonahtanjz8@gmail.com>
Date: Sat, 11 Dec 2021 11:33:02 +0800
Subject: [PATCH 05/10] Improve mobile navbar and dropdown

---
 packages/vue-components/src/Dropdown.vue      | 36 +++++++++++++++++-
 packages/vue-components/src/Navbar.vue        | 38 ++++++++++++++-----
 packages/vue-components/src/Submenu.vue       |  9 ++++-
 packages/vue-components/src/utils/dropdown.js | 19 ++++++++++
 4 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 packages/vue-components/src/utils/dropdown.js

diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
index e5297ac3db..073d8d0ae0 100644
--- a/packages/vue-components/src/Dropdown.vue
+++ b/packages/vue-components/src/Dropdown.vue
@@ -56,6 +56,7 @@
 import Submenu from './Submenu.vue';
 import { toBoolean } from './utils/utils';
 import $ from './utils/NodeList';
+import preventOverflowOnMobile from './utils/dropdown';
 
 export default {
   components: {
@@ -131,11 +132,24 @@ export default {
     },
     hideDropdownMenu() {
       this.show = false;
-      $(this.$refs.dropdown).findChildren('ul').each(ul => ul.classList.toggle('show', false));
+      $(this.$refs.dropdown).findChildren('ul').each(ul => {
+        ul.classList.toggle('show', false);
+
+        if (window.innerWidth < 768 && this.$refs.dropdown.closest('div.navbar-default') !== null) {
+          ul.style.removeProperty('left');
+        }
+      });
     },
     showDropdownMenu() {
       this.show = true;
-      $(this.$refs.dropdown).findChildren('ul').each(ul => ul.classList.toggle('show', true));
+      $(this.$refs.dropdown).findChildren('ul').each(ul => {
+        ul.classList.toggle('show', true);
+
+        // check if the dropdown is part of the sliding menu on mobile
+        if (window.innerWidth < 768 && this.$refs.dropdown.closest('div.navbar-default') !== null) {
+          preventOverflowOnMobile(ul);
+        }
+      });
     },
   },
   mounted() {
@@ -169,6 +183,24 @@ export default {
 </script>
 
 <style scoped>
+    @media (max-width: 767px) {
+        .navbar-default .dropdown {
+            position: static;
+        }
+
+        .navbar-default .dropdown-menu {
+            position: absolute;
+            max-width: 100%;
+            max-height: 75vh;
+            overflow-y: auto;
+            overscroll-behavior: contain;
+        }
+        
+        .navbar-default .dropdown-menu-right {
+            right: auto;
+        }
+    }
+
     .secret {
         position: absolute;
         clip: rect(0 0 0 0);
diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index 7d7d53ba8d..1f06c49b28 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -5,7 +5,7 @@
         <div class="navbar-brand">
           <slot name="brand"></slot>
         </div>
-        <div class="navbar-top">
+        <div ref="navbarDefault" class="navbar-default">
           <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
             <slot></slot>
           </ul>
@@ -245,10 +245,30 @@ export default {
 
     this.toggleLowerNavbar();
     $(window).on('resize', this.toggleLowerNavbar);
+
+    // scroll default navbar horizontally when mousewheel is scrolled
+    const navbarDefault = this.$el.querySelector('.navbar-default');
+    $(navbarDefault).on('wheel', (e) => {
+      const isDropdown = nodes => {
+        for (let i = 0; i < nodes.length; i += 1) {
+          if (nodes[i].classList && nodes[i].classList.contains('dropdown-menu')) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      // prevent horizontal scrolling if the scroll is on dropdown menu
+      if (window.innerWidth < 768 && !isDropdown(e.path)) {
+        e.preventDefault();
+        navbarDefault.scrollLeft += e.deltaY;
+      }
+    })
   },
   beforeDestroy() {
     $('.dropdown', this.$el).off('click').offBlur();
     $(window).off('resize', this.toggleLowerNavbar);
+    $(this.$el.querySelector('.navbar-default')).off('wheel');
   },
 };
 </script>
@@ -272,7 +292,7 @@ export default {
             max-width: 40vw;
         }
 
-        .navbar-top {
+        .navbar-default {
             display: block;
             margin-top: 0.3125rem;
             width: 100%;
@@ -283,26 +303,26 @@ export default {
             scrollbar-width: none;  /* Firefox */
         }
 
-        /* Hide overflow scroll bar for Chrome */
-        .navbar-top::-webkit-scrollbar {
+        /* Hide overflow scroll bar for Chrome and Safari */
+        .navbar-default::-webkit-scrollbar {
             display: none;
         }
 
-        .navbar-top ul {
+        .navbar-default ul {
             flex-direction: row;
             margin-top: 0 !important;
             width: 100%;
         }
 
-        .navbar-top > ul > li,
-        .navbar-top > ul > div {
+        .navbar-default > ul > li,
+        .navbar-default > ul > div {
             padding: 0.3125rem 0.625rem;
             flex: 1;
             background: rgba(0, 0, 0, 0.3);
             text-align: center;
         }
 
-        .navbar-top a,
+        .navbar-default a,
         >>> .dropdown-toggle {
             margin: 0 auto;
             width: max-content;
@@ -320,7 +340,7 @@ export default {
         z-index: 1000;
     }
 
-    .navbar-top {
+    .navbar-default {
         display: flex;
         flex-basis: auto;
         flex-grow: 1;
diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue
index f573eedca4..d4589435a6 100644
--- a/packages/vue-components/src/Submenu.vue
+++ b/packages/vue-components/src/Submenu.vue
@@ -25,6 +25,7 @@
 import { toBoolean } from './utils/utils';
 import $ from './utils/NodeList';
 import positionSubmenu from './utils/submenu';
+import preventOverflowOnMobile from './utils/dropdown';
 
 export default {
   props: {
@@ -64,7 +65,13 @@ export default {
         } else {
           this.alignMenuLeft();
         }
-        positionSubmenu.preventOverflow(ul);
+
+        // check if submenu is part of the navbar sliding menu on mobile
+        if (window.innerWidth < 768 && this.$refs.submenu.closest('div.navbar-default') !== null) {
+          preventOverflowOnMobile(ul);
+        } else {
+          positionSubmenu.preventOverflow(ul);
+        }
       });
     },
     alignMenuRight() {
diff --git a/packages/vue-components/src/utils/dropdown.js b/packages/vue-components/src/utils/dropdown.js
new file mode 100644
index 0000000000..a2d4d6605c
--- /dev/null
+++ b/packages/vue-components/src/utils/dropdown.js
@@ -0,0 +1,19 @@
+export default function preventOverflowOnMobile(el) {
+  // get highest-level dropdown menu
+  let rootDropdownMenu = el;
+  while (el = el.parentNode) {
+    if (el.classList && el.classList.contains('dropdown-menu')) {
+      rootDropdownMenu = el;
+    }
+  }
+
+  // shift dropdown relative to its parent and prevent overflow if necessary
+  if (rootDropdownMenu.offsetWidth > window.innerWidth) {
+    rootDropdownMenu.setAttribute('style', 'left: 0px;');
+  } else {
+    const dropdownPosition = rootDropdownMenu.parentNode.getBoundingClientRect();
+    const overflowedWidth = dropdownPosition.left + rootDropdownMenu.offsetWidth - window.innerWidth;
+    const leftPosition = overflowedWidth < 0 ? dropdownPosition.left : dropdownPosition.left - overflowedWidth;
+    rootDropdownMenu.setAttribute('style', `left: ${leftPosition}px;`);
+  }
+}

From 506cb148b2d150e5be55daaa3dbb4135b9a6f91c Mon Sep 17 00:00:00 2001
From: jonahtanjz <jonahtanjz8@gmail.com>
Date: Sat, 11 Dec 2021 11:44:46 +0800
Subject: [PATCH 06/10] Update snapshot test

---
 packages/vue-components/src/Dropdown.vue             |  6 +++---
 packages/vue-components/src/Navbar.vue               |  6 +++---
 .../src/__tests__/__snapshots__/Navbar.spec.js.snap  |  8 ++++----
 packages/vue-components/src/utils/dropdown.js        | 12 ++++++++----
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
index 073d8d0ae0..5abc8c7012 100644
--- a/packages/vue-components/src/Dropdown.vue
+++ b/packages/vue-components/src/Dropdown.vue
@@ -132,7 +132,7 @@ export default {
     },
     hideDropdownMenu() {
       this.show = false;
-      $(this.$refs.dropdown).findChildren('ul').each(ul => {
+      $(this.$refs.dropdown).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', false);
 
         if (window.innerWidth < 768 && this.$refs.dropdown.closest('div.navbar-default') !== null) {
@@ -142,7 +142,7 @@ export default {
     },
     showDropdownMenu() {
       this.show = true;
-      $(this.$refs.dropdown).findChildren('ul').each(ul => {
+      $(this.$refs.dropdown).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', true);
 
         // check if the dropdown is part of the sliding menu on mobile
@@ -195,7 +195,7 @@ export default {
             overflow-y: auto;
             overscroll-behavior: contain;
         }
-        
+
         .navbar-default .dropdown-menu-right {
             right: auto;
         }
diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index 1f06c49b28..cb6416f38c 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -249,21 +249,21 @@ export default {
     // scroll default navbar horizontally when mousewheel is scrolled
     const navbarDefault = this.$el.querySelector('.navbar-default');
     $(navbarDefault).on('wheel', (e) => {
-      const isDropdown = nodes => {
+      const isDropdown = (nodes) => {
         for (let i = 0; i < nodes.length; i += 1) {
           if (nodes[i].classList && nodes[i].classList.contains('dropdown-menu')) {
             return true;
           }
         }
         return false;
-      }
+      };
 
       // prevent horizontal scrolling if the scroll is on dropdown menu
       if (window.innerWidth < 768 && !isDropdown(e.path)) {
         e.preventDefault();
         navbarDefault.scrollLeft += e.deltaY;
       }
-    })
+    });
   },
   beforeDestroy() {
     $('.dropdown', this.$el).off('click').offBlur();
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
index f62106bbf8..854036b05b 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -21,7 +21,7 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
       </div>
        
       <div
-        class="navbar-top"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -86,7 +86,7 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
       </div>
        
       <div
-        class="navbar-top"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -153,7 +153,7 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
       </div>
        
       <div
-        class="navbar-top"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -218,7 +218,7 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
       </div>
        
       <div
-        class="navbar-top"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
diff --git a/packages/vue-components/src/utils/dropdown.js b/packages/vue-components/src/utils/dropdown.js
index a2d4d6605c..fb93264f25 100644
--- a/packages/vue-components/src/utils/dropdown.js
+++ b/packages/vue-components/src/utils/dropdown.js
@@ -1,10 +1,12 @@
 export default function preventOverflowOnMobile(el) {
   // get highest-level dropdown menu
   let rootDropdownMenu = el;
-  while (el = el.parentNode) {
-    if (el.classList && el.classList.contains('dropdown-menu')) {
-      rootDropdownMenu = el;
+  let currentEl = el;
+  while (currentEl) {
+    if (currentEl.classList && currentEl.classList.contains('dropdown-menu')) {
+      rootDropdownMenu = currentEl;
     }
+    currentEl = currentEl.parentNode;
   }
 
   // shift dropdown relative to its parent and prevent overflow if necessary
@@ -13,7 +15,9 @@ export default function preventOverflowOnMobile(el) {
   } else {
     const dropdownPosition = rootDropdownMenu.parentNode.getBoundingClientRect();
     const overflowedWidth = dropdownPosition.left + rootDropdownMenu.offsetWidth - window.innerWidth;
-    const leftPosition = overflowedWidth < 0 ? dropdownPosition.left : dropdownPosition.left - overflowedWidth;
+    const leftPosition = overflowedWidth < 0
+      ? dropdownPosition.left
+      : dropdownPosition.left - overflowedWidth;
     rootDropdownMenu.setAttribute('style', `left: ${leftPosition}px;`);
   }
 }

From d18a902a9356cac6bf47e9a28db37e4b149d47d7 Mon Sep 17 00:00:00 2001
From: jonahtanjz <jonahtanjz8@gmail.com>
Date: Mon, 13 Dec 2021 23:08:00 +0800
Subject: [PATCH 07/10] Update after review

---
 packages/vue-components/src/Dropdown.vue |  9 ++++++--
 packages/vue-components/src/Navbar.vue   | 28 ++++++++++++------------
 packages/vue-components/src/Submenu.vue  | 20 +++++++++++------
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
index 5abc8c7012..a85a43c4f9 100644
--- a/packages/vue-components/src/Dropdown.vue
+++ b/packages/vue-components/src/Dropdown.vue
@@ -85,6 +85,9 @@ export default {
     hasParentDropdown: {
       default: undefined,
     },
+    isParentNavbar: {
+      default: false,
+    },
   },
   data() {
     return {
@@ -135,7 +138,7 @@ export default {
       $(this.$refs.dropdown).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', false);
 
-        if (window.innerWidth < 768 && this.$refs.dropdown.closest('div.navbar-default') !== null) {
+        if (window.innerWidth < 768 && this.isParentNavbar) {
           ul.style.removeProperty('left');
         }
       });
@@ -146,7 +149,7 @@ export default {
         ul.classList.toggle('show', true);
 
         // check if the dropdown is part of the sliding menu on mobile
-        if (window.innerWidth < 768 && this.$refs.dropdown.closest('div.navbar-default') !== null) {
+        if (window.innerWidth < 768 && this.isParentNavbar) {
           preventOverflowOnMobile(ul);
         }
       });
@@ -219,6 +222,8 @@ export default {
 
     .dropdown-toggle {
         cursor: pointer;
+        display: block;
+        width: max-content;
     }
 
     .navbar .dropdown-toggle {
diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index cb6416f38c..1fc2091e8d 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -62,6 +62,7 @@ export default {
   provide() {
     return {
       toggleLowerNavbar: this.toggleLowerNavbar,
+      isParentNavbar: true,
     };
   },
   data() {
@@ -247,8 +248,7 @@ export default {
     $(window).on('resize', this.toggleLowerNavbar);
 
     // scroll default navbar horizontally when mousewheel is scrolled
-    const navbarDefault = this.$el.querySelector('.navbar-default');
-    $(navbarDefault).on('wheel', (e) => {
+    $(this.$refs.navbarDefault).on('wheel', (e) => {
       const isDropdown = (nodes) => {
         for (let i = 0; i < nodes.length; i += 1) {
           if (nodes[i].classList && nodes[i].classList.contains('dropdown-menu')) {
@@ -261,14 +261,14 @@ export default {
       // prevent horizontal scrolling if the scroll is on dropdown menu
       if (window.innerWidth < 768 && !isDropdown(e.path)) {
         e.preventDefault();
-        navbarDefault.scrollLeft += e.deltaY;
+        this.$refs.navbarDefault.scrollLeft += e.deltaY;
       }
     });
   },
   beforeDestroy() {
     $('.dropdown', this.$el).off('click').offBlur();
     $(window).off('resize', this.toggleLowerNavbar);
-    $(this.$el.querySelector('.navbar-default')).off('wheel');
+    $(this.$refs.navbarDefault).off('wheel');
   },
 };
 </script>
@@ -283,19 +283,21 @@ export default {
 
         div.navbar-brand {
             padding-left: 1rem;
+            max-width: 50%;
+            order: 1;
         }
 
         .navbar-right {
-            position: absolute;
-            top: 14px;
-            right: 16px;
-            max-width: 40vw;
+            order: 1;
+            max-width: 50%;
+            padding: 0 16px;
         }
 
         .navbar-default {
             display: block;
             margin-top: 0.3125rem;
             width: 100%;
+            order: 2;
             overflow-x: scroll;
 
             /* Hide overflow scroll bar */
@@ -314,12 +316,10 @@ export default {
             width: 100%;
         }
 
-        .navbar-default > ul > li,
-        .navbar-default > ul > div {
+        .navbar-default > ul > * {
             padding: 0.3125rem 0.625rem;
             flex: 1;
             background: rgba(0, 0, 0, 0.3);
-            text-align: center;
         }
 
         .navbar-default a,
@@ -328,9 +328,9 @@ export default {
             width: max-content;
         }
 
-        >>> .dropdown-toggle {
-            display: block;
-            padding: 0.5rem 0;
+        >>> .dropdown {
+            display: flex;
+            align-items: center;
         }
     }
 
diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue
index d4589435a6..c35e93391b 100644
--- a/packages/vue-components/src/Submenu.vue
+++ b/packages/vue-components/src/Submenu.vue
@@ -45,6 +45,11 @@ export default {
       dropleft: false,
     };
   },
+  inject: {
+    isParentNavbar: {
+      default: false,
+    },
+  },
   computed: {
     disabledBool() {
       return toBoolean(this.disabled);
@@ -60,18 +65,19 @@ export default {
       this.show = true;
       $(this.$refs.submenu).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', true);
-        if (positionSubmenu.isRightAlign(ul)) {
-          this.alignMenuRight();
-        } else {
-          this.alignMenuLeft();
-        }
 
         // check if submenu is part of the navbar sliding menu on mobile
-        if (window.innerWidth < 768 && this.$refs.submenu.closest('div.navbar-default') !== null) {
+        if (window.innerWidth < 768 && this.isParentNavbar) {
           preventOverflowOnMobile(ul);
+          return;
+        }
+
+        if (positionSubmenu.isRightAlign(ul)) {
+          this.alignMenuRight();
         } else {
-          positionSubmenu.preventOverflow(ul);
+          this.alignMenuLeft();
         }
+        positionSubmenu.preventOverflow(ul);
       });
     },
     alignMenuRight() {

From fe1e578890d08bf123572890831bd85eaa5597c8 Mon Sep 17 00:00:00 2001
From: jonahtanjz <jonahtanjz8@gmail.com>
Date: Sat, 18 Dec 2021 23:11:09 +0800
Subject: [PATCH 08/10] Update after review

---
 packages/vue-components/src/Navbar.vue | 27 ++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index 1fc2091e8d..2c75619b76 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -244,6 +244,11 @@ export default {
     // highlight current nav link
     this.highlightLink(window.location.href);
 
+    // forward navbar background color to css variable for .current to use for link highlighting
+    const navbarBackgroundColor = window.getComputedStyle(this.$refs.navbar).backgroundColor
+        || 'rgba(255, 255, 255, 0.1)';
+    this.$refs.navbarDefault.style.setProperty('--mobile-link-highlight-color', navbarBackgroundColor);
+
     this.toggleLowerNavbar();
     $(window).on('resize', this.toggleLowerNavbar);
 
@@ -283,10 +288,14 @@ export default {
 
         div.navbar-brand {
             padding-left: 1rem;
-            max-width: 50%;
+            max-width: calc(50% - 1rem);
             order: 1;
         }
 
+        .navbar-brand * {
+            white-space: normal;
+        }
+
         .navbar-right {
             order: 1;
             max-width: 50%;
@@ -294,6 +303,7 @@ export default {
         }
 
         .navbar-default {
+            background: rgba(0, 0, 0, 0.2);
             display: block;
             margin-top: 0.3125rem;
             width: 100%;
@@ -310,6 +320,10 @@ export default {
             display: none;
         }
 
+        .navbar-light .navbar-default {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
         .navbar-default ul {
             flex-direction: row;
             margin-top: 0 !important;
@@ -318,8 +332,10 @@ export default {
 
         .navbar-default > ul > * {
             padding: 0.3125rem 0.625rem;
-            flex: 1;
-            background: rgba(0, 0, 0, 0.3);
+        }
+
+        .navbar-default > ul > .current {
+            background: var(--mobile-link-highlight-color);
         }
 
         .navbar-default a,
@@ -361,11 +377,6 @@ export default {
     }
 
     /* Navbar link highlight for current page */
-    .navbar .navbar-nav >>> .current:not(.dropdown),
-    .navbar .navbar-nav >>> .dropdown.current {
-        background: none;
-    }
-
     .navbar.navbar-dark .navbar-nav >>> .current:not(.dropdown) a,
     .navbar.navbar-dark .navbar-nav >>> .dropdown.current > a {
         color: #fff;

From 270a51bc4cf301a8d479648e9a474701185fcdd0 Mon Sep 17 00:00:00 2001
From: jonahtanjz <jonahtanjz8@gmail.com>
Date: Sat, 18 Dec 2021 23:16:00 +0800
Subject: [PATCH 09/10] Update navbar test

---
 .../src/__tests__/__snapshots__/Navbar.spec.js.snap           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
index 854036b05b..4c4a7ca1f2 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -22,6 +22,7 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
        
       <div
         class="navbar-default"
+        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -87,6 +88,7 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
        
       <div
         class="navbar-default"
+        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -154,6 +156,7 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
        
       <div
         class="navbar-default"
+        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -219,6 +222,7 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
        
       <div
         class="navbar-default"
+        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"

From b3dd82f3ef90d7e12b0fb704411408e8b41a9d0f Mon Sep 17 00:00:00 2001
From: jonahtanjz <jonahtanjz8@gmail.com>
Date: Sun, 26 Dec 2021 21:02:08 +0800
Subject: [PATCH 10/10] Improve default navbar implementation

---
 packages/vue-components/src/Navbar.vue        | 44 ++++++++++++-------
 packages/vue-components/src/Searchbar.vue     |  6 ++-
 .../__snapshots__/Navbar.spec.js.snap         | 12 ++---
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index 2c75619b76..fdaa098805 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -2,7 +2,7 @@
   <div>
     <nav ref="navbar" :class="['navbar', 'navbar-expand-md', themeOptions, addClass, fixedOptions]">
       <div class="container-fluid">
-        <div class="navbar-brand">
+        <div class="navbar-left">
           <slot name="brand"></slot>
         </div>
         <div ref="navbarDefault" class="navbar-default">
@@ -244,10 +244,13 @@ export default {
     // highlight current nav link
     this.highlightLink(window.location.href);
 
-    // forward navbar background color to css variable for .current to use for link highlighting
-    const navbarBackgroundColor = window.getComputedStyle(this.$refs.navbar).backgroundColor
-        || 'rgba(255, 255, 255, 0.1)';
-    this.$refs.navbarDefault.style.setProperty('--mobile-link-highlight-color', navbarBackgroundColor);
+    // scroll default navbar horizontally to current link if it is beyond the current scroll
+    const currentNavlink = $(this.$refs.navbarDefault).find('.current')[0];
+    if (currentNavlink && window.innerWidth < 768
+        && currentNavlink.offsetLeft + currentNavlink.offsetWidth > window.innerWidth) {
+      this.$refs.navbarDefault.scrollLeft = currentNavlink.offsetLeft + currentNavlink.offsetWidth
+        - window.innerWidth;
+    }
 
     this.toggleLowerNavbar();
     $(window).on('resize', this.toggleLowerNavbar);
@@ -286,13 +289,13 @@ export default {
             padding-bottom: 0;
         }
 
-        div.navbar-brand {
-            padding-left: 1rem;
-            max-width: calc(50% - 1rem);
+        .navbar-left {
+            max-width: 50%;
             order: 1;
+            padding-left: 1rem;
         }
 
-        .navbar-brand * {
+        .navbar-left * {
             white-space: normal;
         }
 
@@ -303,7 +306,6 @@ export default {
         }
 
         .navbar-default {
-            background: rgba(0, 0, 0, 0.2);
             display: block;
             margin-top: 0.3125rem;
             width: 100%;
@@ -320,10 +322,6 @@ export default {
             display: none;
         }
 
-        .navbar-light .navbar-default {
-            background: rgba(0, 0, 0, 0.05);
-        }
-
         .navbar-default ul {
             flex-direction: row;
             margin-top: 0 !important;
@@ -331,11 +329,17 @@ export default {
         }
 
         .navbar-default > ul > * {
+            background: rgba(0, 0, 0, 0.2);
             padding: 0.3125rem 0.625rem;
+            flex-grow: 1;
+        }
+
+        .navbar-light .navbar-default > ul > * {
+            background: rgba(0, 0, 0, 0.05);
         }
 
         .navbar-default > ul > .current {
-            background: var(--mobile-link-highlight-color);
+            background: transparent;
         }
 
         .navbar-default a,
@@ -350,6 +354,16 @@ export default {
         }
     }
 
+    .navbar-left {
+        display: inline-block;
+        font-size: 1.25rem;
+        line-height: inherit;
+        padding-right: 1rem;
+        padding-top: 0.3125rem;
+        padding-bottom: 0.3125rem;
+        white-space: nowrap;
+    }
+
     .navbar-fixed {
         position: fixed;
         width: 100%;
diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue
index 865ec6cc50..fe19f63e26 100644
--- a/packages/vue-components/src/Searchbar.vue
+++ b/packages/vue-components/src/Searchbar.vue
@@ -264,9 +264,13 @@ export default {
 
     @media screen and (max-width: 768px) {
         .search-dropdown-menu {
-            min-width: auto;
+            min-width: 90vw;
             max-height: 30em;
             overflow-y: scroll;
         }
+
+        .dropdown-menu.search-dropdown-menu {
+            position: absolute;
+        }
     }
 </style>
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
index 4c4a7ca1f2..0658a93736 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -9,7 +9,7 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -22,7 +22,6 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
        
       <div
         class="navbar-default"
-        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -75,7 +74,7 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -88,7 +87,6 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
        
       <div
         class="navbar-default"
-        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -143,7 +141,7 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -156,7 +154,6 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
        
       <div
         class="navbar-default"
-        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -209,7 +206,7 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -222,7 +219,6 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
        
       <div
         class="navbar-default"
-        style="--mobile-link-highlight-color: rgba(255, 255, 255, 0.1);"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"