Closes #887: Address off-canvas menu usability issues on iOS (#899)

Co-authored-by: joeparsons <[email protected]> Co-authored-by: Dana Hertzberg <[email protected]>
az-digital · Aug 25, 2023 · 4b664b8 · 4b664b8
1 parent dfe7dc0
commit 4b664b8
Show file tree

Hide file tree

Showing 7 changed files with 381 additions and 836 deletions.
diff --git a/dist/css/arizona-bootstrap.css b/dist/css/arizona-bootstrap.css
diff --git a/dist/css/arizona-bootstrap.css.map b/dist/css/arizona-bootstrap.css.map
diff --git a/dist/css/arizona-bootstrap.min.css b/dist/css/arizona-bootstrap.min.css
diff --git a/dist/css/arizona-bootstrap.min.css.map b/dist/css/arizona-bootstrap.min.css.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/scss/_navbar-offcanvas.scss b/scss/_navbar-offcanvas.scss
@@ -3,7 +3,7 @@
   display: none;
 }
 .offcanvas-toggle-body-freeze {
-  overflow-y: hidden;
+  overflow: hidden;
 }
 @keyframes fadein {
   from {
@@ -39,7 +39,9 @@
   width: 325px;
   max-width: 90%;
   height: 100vh;
+  height: 100svh;
   max-height: 100vh;
+  max-height: 100svh;
   overflow-y: hidden;
   background-color: $navbar-offcanvas-bg;
   border: none;

diff --git a/site/content/docs/2.0/components/navbar-off-canvas.md b/site/content/docs/2.0/components/navbar-off-canvas.md
@@ -51,24 +51,44 @@ Adding the `.navbar-offcanvas` class to your `<nav>` will incorporate an off-can
     </li>
     <li class="nav-item nav-item-parent dropdown keep-open">
       <button class="nav-link dropdown-toggle" id="navbarDropdown4" data-toggle="dropdown" data-display="static" aria-expanded="false">
-        Admissions
+        First Parent
       </button>
       <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown4">
-        <a class="dropdown-item" href="#">Admissions Overview</a>
-        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Item 1</a>
+        <a class="dropdown-item" href="#">Item 2</a>
+        <a class="dropdown-item" href="#">Item 3</a>
+        <a class="dropdown-item" href="#">Item 4</a>
         <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Something else here</a>
+        <a class="dropdown-item" href="#">Item 5</a>
+        <a class="dropdown-item" href="#">Item 6</a>
       </div>
     </li>
     <li class="nav-item nav-item-parent dropdown keep-open">
       <button class="nav-link dropdown-toggle" id="navbarDropdown5" data-toggle="dropdown" data-display="static" aria-expanded="false">
-        Dropdown
+        Second Parent
       </button>
       <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown5">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Item 1</a>
+        <a class="dropdown-item" href="#">Item 2</a>
+        <a class="dropdown-item" href="#">Item 3</a>
+        <a class="dropdown-item" href="#">Item 4</a>
         <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Something else here</a>
+        <a class="dropdown-item" href="#">Item 5</a>
+        <a class="dropdown-item" href="#">Item 6</a>
+      </div>
+    </li>
+    <li class="nav-item nav-item-parent dropdown keep-open">
+      <button class="nav-link dropdown-toggle" id="navbarDropdown6" data-toggle="dropdown" data-display="static" aria-expanded="false">
+        Third Parent
+      </button>
+      <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown6">
+        <a class="dropdown-item" href="#">Item 1</a>
+        <a class="dropdown-item" href="#">Item 2</a>
+        <a class="dropdown-item" href="#">Item 3</a>
+        <a class="dropdown-item" href="#">Item 4</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Item 5</a>
+        <a class="dropdown-item" href="#">Item 6</a>
       </div>
     </li>
     <li class="nav-item nav-item-parent">