Update site and page navigation

MarkBind · Feb 2, 2021 · fb628c9 · fb628c9
1 parent a671e23
commit fb628c9
Show file tree

Hide file tree

Showing 14 changed files with 783 additions and 97 deletions.
diff --git a/docs/userGuide/syntax/navBars.mbdf b/docs/userGuide/syntax/navBars.mbdf
@@ -158,3 +158,26 @@ Name | Description
 </navbar>
 
 </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.
+
+```html
+<navbar>
+  <!-- Any normal navbar items -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/usingComponents.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- Use slot to wrap the buttons in the lower navbar -->
+  <div slot="lower-navbar" class="nav-menu-container">
+    <site-nav-button />
+    <page-nav-button />
+  </div>
+</navbar>
+```
+
+Component | Description
+--- | ---
+`page-nav-button` | Will pull everything wrapped with an identifier, `id=page-nav`, in the layout file into the menu. Alternatively, if the identifier is not present, it will pull the page navigation menu in automatically if it exist. 
+`site-nav-button` | Will pull everything wrapped with an identifier, `id=site-nav`, in the layout file into the menu. Alternatively, if the identifier is not present, it will pull the first site navigation menu in automatically if it exist. 
diff --git a/docs/userGuide/syntax/pageNavigationMenus.mbdf b/docs/userGuide/syntax/pageNavigationMenus.mbdf
@@ -17,6 +17,8 @@
 
 3. **Position the page navigation menu** within your layout using the `{% raw %}{{ pageNav }}{% endraw %}` variable.
 
+4. **(Optional) To make pageNav accessible on smaller screens, you can use the `<page-nav-button />` component in the [navbar]({{baseUrl}}/userGuide/usingComponents.html#navbars).**
+
 <div id="short" class="indented">
 
 {{ icon_example }}

diff --git a/docs/userGuide/syntax/siteNavigationMenus.mbdf b/docs/userGuide/syntax/siteNavigationMenus.mbdf
@@ -7,6 +7,7 @@
 Steps to add a siteNav:
 1. Format your siteNav as an unordered Markdown list
 2. Include it under a `<site-nav>` element.
+3. (Optional) To make siteNav accessible on smaller screens, you can use the `<site-nav-button />` component in the [navbar]({{baseUrl}}/userGuide/usingComponents.html#navbars).
 
 <div id="short">
 

diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js
@@ -1,7 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import MarkBindVue from '@markbind/vue-components/src';
 import initScrollTopButton from './scrollTopButton';
-import initNavMenuBar from './navMenuBar';
 import './styles/index.css';
 
 Vue.use(MarkBindVue);
@@ -38,15 +37,7 @@ function detectAndApplyFixedHeaderStyles() {
 
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  const navMenuBarHeight = 50;
-  insertCss(`.fixed-header-padding { 
-        padding-top: ${headerHeight}px !important; 
-      }
-      @media (max-width: 992px) {
-        .fixed-header-padding { 
-          padding-top: ${headerHeight + navMenuBarHeight}px !important;
-        } 
-      }`);
+  insertCss(`.fixed-header-padding { padding-top: ${headerHeight}px !important }`);
   insertCss(
     `span.anchor {
     position: relative;
@@ -160,6 +151,5 @@ window.popoverInnerGetters = {
 window.tooltipInnerContentGetter = makeMbSlotGetter('_content');
 
 initScrollTopButton();
-initNavMenuBar();
 
 export default { setup, setupWithSearch };
diff --git a/packages/core-web/src/styles/nav-menu-bar.css b/packages/core-web/src/styles/nav-menu-bar.css
@@ -1,65 +1,39 @@
-@media (min-width: 993px) {
-    #nav-menu-bar {
-        display: none !important;
-    }
-}
-
-@media (max-width: 575px) {
-    #nav-menu-bar {
-        margin: 0px -10px;
-    }
-}
-
-@media (min-width: 576px) and (max-width: 992px) {
-    #nav-menu-bar {
-        margin: 0px -20px;
-    }
+.hide-nav-button {
+    display: none;
 }
 
-#nav-menu-bar {
-    position: fixed;
-    top: 66px;
-    width: 100%;
-    z-index: 1000;
-    border-bottom: 1px solid #C1C1C1;
+.nav-menu-container {
+    background-color: #fff;
+    border-bottom: 1px solid #c1c1c1;
     height: 50px;
-    background: #F8F8F8;
-    display: none;
+    position: relative;
 }
 
-#toggle-site-nav-button {
-    float: left;
-    padding: 15px;
-    display: none;
-} 
-
-#toggle-site-nav-button:before {
-    content: "\e236";
-    font-size: 20px;
+.nav-menu-container > div > #toggle-site-nav-button {
+    position: absolute;
+    left: 0;
 }
 
-#toggle-page-nav-button {
-    float: right;
-    padding: 15px;
-    display: none;
+.nav-menu-container > div > #toggle-page-nav-button {
+    position: absolute;
+    right: 0;
 }
 
-#toggle-page-nav-button:before {
-    content:"\e235";
-    font-size: 20px;
+.nav-menu-container > div > .site-nav-menu,
+.nav-menu-container > div > .page-nav-menu {
+    padding-top: 50px;
 }
 
-.nav-menu-close-icon:before {
+.nav-menu-close-icon::before {
     content: "\e014" !important;
 }
 
 .nav-menu-open {
     display: block !important;
-    position: fixed !important;
     width: 100% !important;
     max-width: 100% !important;
     background: #fff;
-    top: 50px !important;
     height: 100%;
     max-height: 100% !important;
+    clear: both;
 }
diff --git a/packages/core/src/Page/index.js b/packages/core/src/Page/index.js
@@ -347,7 +347,7 @@ class Page {
     const headingStack = [];
     Object.keys(this.navigableHeadings).forEach((key) => {
       const currentHeadingLevel = this.navigableHeadings[key].level;
-      const currentHeadingHTML = `<a onclick="closePageNav();" class="nav-link py-1" href="#${key}">`
+      const currentHeadingHTML = `<a class="nav-link py-1" href="#${key}">`
         + `${this.navigableHeadings[key].text}&#x200E;</a>\n`;
       const nestedHeadingHTML = '<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">\n'
         + `${currentHeadingHTML}`;
@@ -415,8 +415,7 @@ class Page {
       return `${pageNavTitleHtml}\n`
           + `<nav id="${PAGE_NAV_ID}" class="nav nav-pills flex-column my-0 small no-flex-wrap">\n`
           + `${pageNavHeadingHTML}\n`
-          + '</nav>\n'
-          + '<script>initPageNavButton();</script>';
+          + '</nav>\n';
     }
 
     return '';
@@ -455,15 +454,14 @@ class Page {
     let content = variableProcessor.renderWithSiteVariables(this.pageConfig.sourcePath, pageSources);
     content = await nodeProcessor.process(this.pageConfig.sourcePath, content);
     this.processFrontMatter(nodeProcessor.frontMatter);
-    content = Page.addNavMenuBar(content);
     content = Page.addScrollToTopButton(content);
     content = pluginManager.postRender(this.frontMatter, content);
     const pageContent = content;
 
     pluginManager.collectPluginPageNjkAssets(this.frontMatter, content, this.asset);
 
     await layoutManager.generateLayoutIfNeeded(this.layout);
-    const pageNav = Page.addNavMenuScript(this.buildPageNav(content));
+    const pageNav = this.buildPageNav(content);
     content = layoutManager.combineLayoutWithPage(this.layout, content, pageNav, this.includedFiles);
     this.asset = {
       ...this.asset,
@@ -484,18 +482,6 @@ class Page {
     this.collectHeadingsAndKeywords(pageContent);
   }
 
-  static addNavMenuBar(pageData) {
-    const menuBar = '<div id="nav-menu-bar">'
-    + '<span id="toggle-site-nav-button" onclick="toggleSiteNav()" class="glyphicon"></span>'
-    + '<span id="toggle-page-nav-button" onclick="togglePageNav()" class="glyphicon"></span></div>';
-    return `${pageData}\n${menuBar}`;
-  }
-
-  static addNavMenuScript(pageData) {
-    const script = '<script>showNavMenuToggleButtons();</script>';
-    return `${pageData}\n${script}`;
-  }
-
   static addScrollToTopButton(pageData) {
     const button = '<i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" '
     + 'onclick="handleScrollTop()" aria-hidden="true"></i>';

diff --git a/packages/core/src/html/siteNavProcessor.js b/packages/core/src/html/siteNavProcessor.js
@@ -67,7 +67,7 @@ function renderSiteNav(node) {
   });
 
   $original.empty();
-  $original.append($('site-nav').children()).append('<script>initSiteNavButton();</script>');
+  $original.append($('site-nav').children());
 }
 
 module.exports = {

diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
@@ -1,36 +1,46 @@
 <template>
-  <nav ref="navbar" :class="['navbar', 'navbar-expand-md', themeOptions, addClass, fixedOptions]">
-    <div class="container-fluid">
-      <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 ref="navbarContainer">
+    <nav ref="navbar" :class="['navbar', 'navbar-expand-md', themeOptions, addClass, fixedOptions]">
+      <div class="container-fluid">
+        <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}]">
-        <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 :class="['navbar-collapse',{collapse:collapsed}]">
+          <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>
       </div>
+    </nav>
+    <div v-show="isNavMenuShowing">
+      <slot name="lower-navbar">
+        <div class="nav-menu-container">
+          <site-nav-button />
+          <page-nav-button />
+        </div>
+      </slot>
     </div>
-  </nav>
+  </div>
 </template>
 
 <script>
 import $ from './utils/NodeList.js';
-import { toBoolean } from './utils/utils';
+import { toBoolean, resizeHeader } from './utils/utils';
 import normalizeUrl from './utils/urls';
 
 export default {
@@ -52,11 +62,20 @@ export default {
       default: 'sibling-or-child',
     },
   },
+  provide() { 
+    return {
+      initSiteNav: this.initSiteNav,
+      initPageNav: this.initPageNav,
+    };
+  },
   data() {
     return {
       id: 'bs-example-navbar-collapse-1',
       collapsed: true,
       styles: {},
+      hasSiteNav: false,
+      hasPageNav: false,
+      isNavMenuShowing: false,
     };
   },
   computed: {
@@ -198,6 +217,33 @@ export default {
         }
       }
     },
+    initSiteNav() {
+      this.hasSiteNav = true;
+      this.toggleNavMenu();
+    },
+    initPageNav() {
+      this.hasPageNav = true;
+      this.toggleNavMenu();
+    },
+    showNavMenu() {
+      this.isNavMenuShowing = true;
+    },
+    hideNavMenu() {
+      this.isNavMenuShowing = false;
+    },
+    toggleNavMenu() {
+      if ((this.hasPageNav && window.innerWidth < 1300) 
+        || (this.hasSiteNav && window.innerWidth < 992)) {
+        this.showNavMenu();
+      } else {
+        this.hideNavMenu();
+      }
+    },
+  },
+  watch: {
+    isNavMenuShowing: function (newValue) {
+      setTimeout(() => resizeHeader(newValue), 200);
+    }
   },
   created() {
     this._navbar = true;
@@ -228,10 +274,15 @@ export default {
 
     // highlight current nav link
     this.highlightLink(window.location.href);
+
+    $(window).on('resize', (e) => {
+      this.toggleNavMenu();
+    }); 
   },
   beforeDestroy() {
     $('.dropdown', this.$el).off('click').offBlur();
     if (this.slots.collapse) $('[data-toggle="collapse"]', this.$el).off('click');
+    $(window).off();
   },
 };
 </script>