From: Minobi <unknown>
Date: Sun, 23 Feb 2020 12:33:27 +0000 (+0200)
Subject: Example dashboard: fix menu disappearing on small viewport
X-Git-Tag: v5.0.0-alpha1~410
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a99c531aa7a2d2ba1052a8250c67a7d1337745fa;p=thirdparty%2Fbootstrap.git

Example dashboard: fix menu disappearing on small viewport
---

diff --git a/site/content/docs/4.3/examples/dashboard/dashboard.css b/site/content/docs/4.3/examples/dashboard/dashboard.css
index 0893e83e61..259cf6382e 100644
--- a/site/content/docs/4.3/examples/dashboard/dashboard.css
+++ b/site/content/docs/4.3/examples/dashboard/dashboard.css
@@ -22,6 +22,13 @@ body {
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 5rem;
+  }
+}
+
+
 .sidebar-sticky {
   position: relative;
   top: 0;
@@ -88,6 +95,11 @@ body {
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 }
 
+.navbar .navbar-toggler {
+  top: 4px;
+  right: 4px;
+}
+
 .navbar .form-control {
   padding: .75rem 1rem;
   border-width: 0;
diff --git a/site/content/docs/4.3/examples/dashboard/index.html b/site/content/docs/4.3/examples/dashboard/index.html
index f030eeeff5..f76df4f669 100644
--- a/site/content/docs/4.3/examples/dashboard/index.html
+++ b/site/content/docs/4.3/examples/dashboard/index.html
@@ -12,7 +12,10 @@ extra_js:
 ---
 
 <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
+  <a class="navbar-brand col-md-2 mr-0" href="#">Company name</a>
+  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
   <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
   <ul class="navbar-nav px-3">
     <li class="nav-item text-nowrap">
@@ -23,7 +26,7 @@ extra_js:
 
 <div class="container-fluid">
   <div class="row">
-    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+    <nav id="sidebarMenu" class="col-md-2 d-md-block bg-light sidebar collapse">
       <div class="sidebar-sticky">
         <ul class="nav flex-column">
           <li class="nav-item">