Forward root element styles to mobile navigation menu

docs/css/main.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

docs/userGuide/syntax/navBars.mbdf

@@ -159,10 +159,25 @@ Name | Description
 
 </span>
 
-****Page and site navigation menus****  
-Both [site navigation]({{ baseUrl }}/userGuide/usingComponents.html#site-navigation-menus) and [page navigation]({{ baseUrl }}/userGuide/usingComponents.html#page-navigation-menus) menus will be hidden on smaller screens.
-To make these accessible on smaller screens, you can use the `<site-nav-button />` and `<page-nav-button />` components in the `lower-navbar` slot. By default, if the `lower-navbar` slot is not specified, both the site and 
-page navigation buttons will automatically be added if they exist.
+****Mobile page and site navigation menus****
+
+The navbar component also provides access to MarkBind's [site navigation]({{ baseUrl }}/userGuide/usingComponents.html#site-navigation-menus) and [page navigation]({{ baseUrl }}/userGuide/usingComponents.html#page-navigation-menus) menu **components** if used in the page's [layout](../tweakingThePageStructure.md#layouts). No additional setup is required!
+
+If you are viewing the documentation on a larger device, resize the window to see what it looks like.
+
+Alternatively, if you want to display <tooltip content="e.g. adding an image to the site nav">additional content</tooltip> in these navigation menus, the navbar is also able to "pull in" any **container element** with a html `id` of `"site-nav"` or `"page-nav"`. You may refer to the [layouts](../tweakingThePageStructure.md#layouts) section for an example.
+
+<box type="tip" seamless>
+
+The navbar component auto-detects if the MarkBind's navigation components or your element containers has any <tooltip content="`<a>` tags in particular">links</tooltip>.<br>
+If absent, the navigation buttons to open the menus are _automatically hidden_.
+</box>
+
+****Mobile navigation menu button placement****
+
+If you wish to alter the button placement on the navbar, you may use the `<site-nav-button />` and `<page-nav-button />` components in the `lower-navbar` slot.
+
+By default, if the `lower-navbar` slot is not specified, the site and page navigation buttons are simply placed as such.
 
 ```html{.no-line-numbers}
 <navbar>
@@ -180,4 +195,38 @@ page navigation buttons will automatically be added if they exist.
 Component | Description
 --- | ---
 `page-nav-button` | Pulls any element with an identifier, `id=page-nav` into the menu. If no such element exists, it pulls any [page navigation menu]({{ baseUrl }}/userGuide/usingComponents.html#page-navigation-menus) used in the layout.
-`site-nav-button` | Pulls any element with an identifier, `id=site-nav` into the menu. If no such element exists, it pulls the first [site navigation menu]({{ baseUrl }}/userGuide/usingComponents.html#site-navigation-menus) used in the layout.
+`site-nav-button` | Pulls any element with an identifier, `id=site-nav` into the menu. If no such element exists, it pulls all [site navigation menu components]({{ baseUrl }}/userGuide/usingComponents.html#site-navigation-menus) used in the layout.
+
+****Styling the mobile page and site navigation menus****
+
+You may also wish to style your navigation content differently on mobile view.
+By default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.
+
+```css {.no-line-numbers heading="Css class attached to the root navigation element"}
+.mb-mobile-nav {
+    display: block !important;
+    margin: 0 !important;
+    border: none !important;
+    padding: 10px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+```
+
+If you require greater customisation, you may simply compose the respective selectors with the `.mb-mobile-nav` element.
+
+{{ icon_example }}
+
+```css {.no-line-numbers heading=""}
+#site-nav.mb-mobile-nav {
+  /* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */
+  border: 1px solid black !important;
+  /* For other properties, there is no need. */
+  color: red;
+}
+```
+
+<box type="tip" seamless>
+
+Refer to the [layouts](../tweakingThePageStructure.md) section to find out how to add custom css files to a page!
+</box>

packages/cli/test/functional/test_site/expected/stylesheets/styles.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site/stylesheets/styles.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site_convert/expected/stylesheets/main.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site_convert/non_markbind_site/stylesheets/main.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site_templates/test_default/expected/stylesheets/main.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/core/template/default/stylesheets/main.css

@@ -91,11 +91,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/vue-components/src/OverlaySource.vue

@@ -2,7 +2,14 @@
   <component :is="tagName" v-bind="$attrs">
     <slot></slot>
     <portal v-if="enablePortal" :to="to">
-      <slot></slot>
+      <component
+        :is="tagName"
+        v-bind="$attrs"
+        :class="[$vnode.data.staticClass || '', 'mb-mobile-nav']"
+        :style="$vnode.data.staticStyle"
+      >
+        <slot></slot>
+      </component>
     </portal>
   </component>
 </template>
@@ -36,3 +43,14 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+    .mb-mobile-nav {
+        display: block !important;
+        margin: 0 !important;
+        border: none !important;
+        padding: 10px !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+</style>

packages/vue-components/src/PageNavButton.vue

@@ -35,10 +35,9 @@ export default {
     },
   },
   mounted() {
-    const hasAutoGeneratedPageNav = document.getElementById('mb-page-nav') !== null;
-    if (document.getElementById('page-nav') !== null && hasAutoGeneratedPageNav) {
+    if (document.querySelector('#page-nav a') !== null) {
       this.portalName = 'page-nav';
-    } else if (hasAutoGeneratedPageNav) {
+    } else if (document.querySelector('#mb-page-nav a') !== null) {
       this.portalName = 'mb-page-nav';
     }
 

packages/vue-components/src/SiteNavButton.vue

@@ -35,10 +35,9 @@ export default {
     },
   },
   mounted() {
-    const hasSiteNavComponent = document.getElementsByClassName('site-nav-root').length !== 0;
-    if (document.getElementById('site-nav') !== null && hasSiteNavComponent) {
+    if (document.querySelector('#site-nav a') !== null) {
       this.portalName = 'site-nav';
-    } else if (hasSiteNavComponent) {
+    } else if (document.querySelector('.site-nav-root a') !== null) {
       this.portalName = 'mb-site-nav';
     }
 

packages/vue-components/src/__tests__/Navbar.spec.js

@@ -89,3 +89,59 @@ describe('Navbar and secondary navbar', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 });
+
+describe('Mobile nav buttons test:', () => {
+  beforeEach(() => {
+    const rootDiv = document.createElement('div');
+    const navbarDiv = document.createElement('div');
+    const navContentDiv = document.createElement('div');
+
+    rootDiv.id = 'root';
+    navbarDiv.id = 'navbarTarget';
+    navContentDiv.id = 'navContentTarget';
+
+    rootDiv.appendChild(navbarDiv);
+    rootDiv.appendChild(navContentDiv);
+    document.body.appendChild(rootDiv);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(document.getElementById('root'));
+  });
+
+  test.each([
+    // Should not show up
+    ['<div id="site-nav">no link here</div>', SITE_NAV_BUTTON, SiteNavButton, undefined],
+    ['<div class="site-nav-root">no link here</div>', SITE_NAV_BUTTON, SiteNavButton, undefined],
+    ['<div id="page-nav">no link here</div>', PAGE_NAV_BUTTON, PageNavButton, undefined],
+    ['<div id="mb-site-nav">no link here</div>', PAGE_NAV_BUTTON, PageNavButton, undefined],
+    // Should show up
+    ['<div id="site-nav"><a href="x">dummy</a></div>', SITE_NAV_BUTTON, SiteNavButton, 'site-nav'],
+    ['<div class="site-nav-root"><a href="x">dummy</a></div>', SITE_NAV_BUTTON, SiteNavButton, 'mb-site-nav'],
+    ['<div id="page-nav"><a href="x">dummy</a></div>', PAGE_NAV_BUTTON, PageNavButton, 'page-nav'],
+    ['<div id="mb-page-nav"><a href="x">dummy</a></div>', PAGE_NAV_BUTTON, PageNavButton, 'mb-page-nav'],
+  ])('Nav buttons set the portal name accordingly if the respective selectors are not found.',
+     async (navContent, lowerNavbarSlot, NavComponent, portalName) => {
+       document.getElementById('navContentTarget').innerHTML = navContent;
+
+       const wrapper = mount(Navbar, {
+         attachTo: '#navbarTarget',
+         slots: {
+           brand: NAVBAR_BRAND,
+           default: NAVBAR_CONTENT,
+           'lower-navbar': lowerNavbarSlot,
+         },
+         stubs: {
+           ...DEFAULT_STUBS,
+           'overlay': true,
+         },
+       });
+
+       const navComponent = wrapper.findComponent(NavComponent);
+       expect(navComponent.exists()).toBe(true);
+
+       expect(navComponent.vm.portalName).toBe(portalName);
+
+       wrapper.destroy();
+     });
+});