Improved demo navigation on mobile devices.

thednp · May 30, 2020 · 61a5d7b · 61a5d7b
1 parent 8610299
commit 61a5d7b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
@@ -1,17 +1,20 @@
 // MISC
 // scrollTo
-var sideNav = document.getElementById('side-nav'),
-		sideLinks = sideNav.getElementsByTagName("A"),
+var offCanvasCollapse = document.getElementsByClassName('offcanvas-collapse')[0],
+		sideNav = document.getElementById('side-nav'),
+		topNav = document.getElementById('top-nav'),
+		sideLinks = Array.from(sideNav.getElementsByTagName("A")).concat(Array.from(topNav.getElementsByTagName("A"))),
 		scrollTarget = /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
 
-Array.from(sideLinks).map((x,i) => x.addEventListener('click', (e) => { 
+sideLinks.map((x,i) => x.addEventListener('click', (e) => { 
 	var target = document.getElementById(x.getAttribute('href').replace('#', ''));
 	e.preventDefault();
 	scrollTarget.scrollTop = target.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop) -  70;
+	topNav.contains(x) && offCanvasCollapse.classList.toggle('open')
 })) 
 // offcanvas
 document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
-	document.getElementsByClassName('offcanvas-collapse')[0].classList.toggle('open')
+	offCanvasCollapse.classList.toggle('open')
 })
 
 // COMPONENTS

diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="offcanvas-collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto mr-0">
+        <ul class="navbar-nav ml-auto mr-0 d-none d-md-flex">
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Github</a>
             <div class="dropdown-menu dropdown-menu-right">
@@ -53,6 +53,19 @@
             </div>
           </li>
         </ul>
+        <ul id="top-nav" class="navbar-nav d-flex d-md-none flex-column">
+          <li class="nav-item"><a class="nav-link" href="#componentAlert">Alert</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentButton">Button</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentCarousel">Carousel</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentCollapse">Collapse</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentDropdown">Dropdown</a></li>            
+          <li class="nav-item"><a class="nav-link" href="#componentModal">Modal</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentPopover">Popover</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentScrollspy">ScrollSpy</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentTab">Tab</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentToast">Toast</a></li>
+          <li class="nav-item"><a class="nav-link" href="#componentTooltip">Tooltip</a></li>
+        </ul>        
       </div>
     </nav>
 
@@ -3276,7 +3289,7 @@ <h3>Tooltip Examples</h3>
 
         </div>
         <div class="col-md-3" id="side-nav">
-          <ul id="nav-scrollspy" class="nav nav-stacked flex-column">
+          <ul id="nav-scrollspy" class="nav nav-stacked d-none d-md-flex flex-column">
             <li class="nav-item">
               <a class="nav-link" href="#componentAlert">Alert</a>
               <ul class="nav">