Fix mobile menu nav style

Author: rakeshAlgo

src/css/body.css

@@ -33,7 +33,8 @@ aside.toc.sidebar {
   width: var(--width-toc);
 }
 
-@media screen and (min-width: 769px) {
+/* Make layout in full screen */
+@media screen and (min-width: 993px) {
   div.body {
     min-height: var(--height-min-body);
   }

src/css/header.css

@@ -243,6 +243,16 @@
   }
 }
 
+@media screen and (max-width: 992px) {
+  .navbar {
+    padding: 0.8rem 0;
+  }
+
+  .primary-action {
+    top: -100%;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .header {
     border-bottom: 1px solid var(--color-brand-blue);

src/css/main.css

@@ -56,6 +56,7 @@ main p {
   border-radius: 3px;
   font-family: "Open Sans", sans-serif;
   font-weight: var(--weight-normal);
+  flex-wrap: wrap;
 }
 
 .article-banner p {
@@ -64,8 +65,9 @@ main p {
   color: var(--color-brand-blue-secondary);
 }
 
-.article-banner p svg {
+.article-banner svg {
   margin-right: 10px;
+  margin-bottom: 10px;
   font-size: var(--heading-h3);
 }
 

src/css/nav.css

@@ -38,29 +38,6 @@
   }
 } */
 
-@media screen and (min-width: 769px) {
-  .left-sidebar-menu {
-    top: var(--height-to-body);
-    margin-bottom: 1.5rem;
-    height: 100%;
-    /* height: var(--height-nav); */
-    z-index: var(--z-index-nav);
-    /* border-left: 2px solid #eee; */
-  }
-
-  .left-sidebar-menu::before {
-    position: absolute;
-    content: '';
-    display: inline-block;
-    width: 1000%;
-    height: 100%;
-    background: var(--color-brand-gray7);
-    top: 0;
-    z-index: 1;
-    left: -1000%;
-  }
-}
-
 .nav-menu .nav-link,
 .nav-menu .nav-text {
   display: block;
@@ -146,12 +123,12 @@
   /* border-left: 1px solid var(--color-brand-gray5); */
 }
 
-/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list {
+/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0']  >  .nav-list {
   margin-left: 1.875rem;
   border-left: none;
 } */
 
-/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-line {
+/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0']  >  .nav-line {
   display: none;
 } */
 
@@ -176,7 +153,7 @@
   margin-top: 0.5em;
 } */
 
-/* .nav-item[data-depth="0"] > .nav-line {
+/* .nav-item[data-depth="0"]  >  .nav-line {
   text-transform: uppercase;
 } */
 
@@ -216,7 +193,7 @@
   color: var(--color-brand-blue);
 }
 
-/* .nav-menu .nav-item.is-current-page > .nav-line > a.nav-link {
+/* .nav-menu .nav-item.is-current-page  >  .nav-line  >  a.nav-link {
   color: var(--color-text);
   font-weight: var(--weight-semibold);
 } */
@@ -234,7 +211,7 @@
   transform: rotate(90deg);
 }
 
-/* .nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link {
+/* .nav-menu .nav-item.is-active[data-depth='2']  >  .nav-line .nav-link {
   color: var(--color-brand-black);
   font-weight: var(--weight-semibold);
 } */
@@ -360,7 +337,7 @@ html.is-clipped--nav {
   color: var(--color-brand-gray1);
 }
 
-/* .is-active[data-depth='1'] > .nav-line[data-depth="1"] .in-toggle {
+/* .is-active[data-depth='1']  >  .nav-line[data-depth="1"] .in-toggle {
   transform: rotate(90deg);
 } */
 
@@ -372,7 +349,7 @@ html.is-clipped--nav {
   margin-bottom: 8px;
 } */
 
-/* .nav-menu .nav-item.is-active[data-depth='1'] > .nav-line .nav-link {
+/* .nav-menu .nav-item.is-active[data-depth='1']  >  .nav-line .nav-link {
   color: var(--color-brand-blue);
 } */
 
@@ -455,6 +432,12 @@ a.menu-expand-toggle {
   border-radius: 50%;
 }
 
+a.menu-expand-toggle span,
+a.menu-expand-toggle .fa-times-circle,
+a.collapse-menu span {
+  display: none;
+}
+
 /* Responsive CSS */
 
 @media screen and (min-width: 993px) {
@@ -492,7 +475,21 @@ a.menu-expand-toggle {
   .left-sidebar-menu {
     top: var(--height-to-body);
     margin-bottom: 1.5rem;
+    height: 100%;
     /* height: var(--height-nav); */
+    z-index: var(--z-index-nav);
+  }
+
+  .left-sidebar-menu::before {
+    position: absolute;
+    content: '';
+    display: inline-block;
+    width: 1000%;
+    height: 100%;
+    background: var(--color-brand-gray7);
+    top: 0;
+    z-index: 1;
+    left: -1000%;
   }
 
   .nav-control {
@@ -503,23 +500,25 @@ a.menu-expand-toggle {
 @media screen and (max-width: 992px) {
   .left-sidebar-menu {
     left: 0;
+    top: auto;
     z-index: 9;
     transform: translate(-100%, 0);
   }
 
   .nav.collapse-menu a.menu-expand-toggle {
-    transform: rotate(0deg);
-    right: -1rem;
+    right: -0.8rem;
     opacity: 1;
-    color: var(--color-brand-blue-secondary);
+    background-color: transparent;
+    border-radius: 0;
+    top: -3px;
   }
 
-  nav.nav a.menu-expand-toggle {
+  /* nav.nav a.menu-expand-toggle {
     transform: rotate(180deg);
     right: -1.35rem;
     opacity: 1;
     color: var(--color-brand-blue-secondary);
-  }
+  } */
 
   .nav.collapse-menu .left-sidebar-menu {
     transform: translate(0, 0);
@@ -528,4 +527,44 @@ a.menu-expand-toggle {
   .nav-menu {
     height: calc(100vh - 8.5rem) !important;
   }
+
+  nav.nav a.menu-expand-toggle {
+    transform: rotate(90deg);
+    right: -4.8rem;
+    opacity: 1;
+    color: #fff;
+    background-color: var(--color-brand-blue-secondary);
+    border-radius: 0;
+    top: 60px;
+    font-size: 18px;
+    padding: 6px 14px;
+    text-decoration: none;
+  }
+
+  .nav a.menu-expand-toggle .fa-chevron-circle-left {
+    display: none;
+  }
+
+  a.menu-expand-toggle span {
+    display: inline-block;
+  }
+
+  .collapse-menu a.menu-expand-toggle .fa-times-circle {
+    display: inline-block;
+    font-size: 26px;
+    color: #ea2328;
+  }
+
+  .collapse-menu a.menu-expand-toggle span {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 767px) {
+  nav.nav a.menu-expand-toggle {
+    right: -3.8rem;
+    top: 60px;
+    font-size: 14px;
+    padding: 4px 10px;
+  }
 }

src/partials/main.hbs

@@ -3,15 +3,15 @@
 {{#with (latest-page-url)}}
 <div class="article-banner">
 {{#if (and @root.page.componentVersion.prerelease (not @root.page.latest.prerelease))}}
-<p> <i class="fas fa-file-alt"></i> You are viewing the documentation for a prerelease version.</p>
+<i class="fas fa-file-alt"></i> <p>  You are viewing the documentation for a prerelease version.</p>
 {{else}}
-<p><i class="fas fa-file-alt"></i> A newer version of this documentation is available.</p>
+<i class="fas fa-file-alt"></i> <p> A newer version of this documentation is available.</p>
 {{/if}}
 <a class="btn" href="{{relativize this}}">View Latest</a>
 </div>
 {{else if (and page.componentVersion.prerelease (not page.latest.prerelease))}}
 <div class="article-banner">
-<p>You are viewing the documentation for a prerelease version.</p>
+<i class="fas fa-file-alt"></i> <p>You are viewing the documentation for a prerelease version.</p>
 </div>
 {{/with}}
 {{/unless}}

src/partials/nav-menu.hbs

@@ -3,5 +3,5 @@
 <div class="nav-menu">
 {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
 </div>
-<a href="#" class="menu-expand-toggle"><i class="fas fa-chevron-circle-left"></i></a>
+<a href="#" class="menu-expand-toggle"> <span>Navigation</span> <i class="fas fa-times-circle"></i> <i class="fas fa-chevron-circle-left"></i></a>
 </div>

src/partials/tutorials-filter.hbs

@@ -24,7 +24,7 @@
                             <label for="devOps">DevOps</label>
 
                         </li>
-                        
+
                         {{!-- <li>
                             <input type="checkbox" id="architect" class="check-mark" name="role" value="architect" />
                             <label for="architect">Architect</label>
@@ -45,7 +45,7 @@
                             <input type="checkbox" id="node" class="check-mark" name="language" value="nodejs" />
                             <label for="node">Node.js</label>
 
-                        </li>                       
+                        </li>
                         <li>
                             <input type="checkbox" id="C#" class="check-mark" name="language" value="C#" />
                             <label for="C#">C#</label>
@@ -58,12 +58,12 @@
                             <input type="checkbox" id="android" class="check-mark" name="language" value="android" />
                             <label for="android">Android</label>
 
-                        </li> 
+                        </li>
                         <li>
                             <input type="checkbox" id="swift" class="check-mark" name="language" value="swift" />
                             <label for="swift">Swift</label>
 
-                        </li>                                                 
+                        </li>
                     </ul>
                 </li>
                 {{!-- <li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Frameworks</a></li> --}}
@@ -92,6 +92,6 @@
             </ul>
         </div>
         <!-- Collapse expand button -->
-        <a href="#" class="menu-expand-toggle"><i class="fas fa-chevron-circle-left"></i></a>
+      <a href="#" class="menu-expand-toggle"> <span>Navigation</span> <i class="fas fa-times-circle"></i> <i class="fas fa-chevron-circle-left"></i></a>
     </div>
 </nav>