added main nav

ONSdigital · Jul 13, 2020 · e28be57 · e28be57
1 parent a35d692
commit e28be57
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 20 deletions.
diff --git a/_img/icons/icons--chevron-down-black.svg b/_img/icons/icons--chevron-down-black.svg
diff --git a/_includes/header-census.html b/_includes/header-census.html
@@ -22,9 +22,9 @@
     </div>
     <div class="header__main ">
         <div class="container">
-            <div class="grid grid--gutterless grid--align-mid u-cf">
-                <div class="grid__col ">
-                    {% if page.logoUrl %}<a href="{{ page.logoUrl }}">{% endif %}
+            <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
+                <div class="grid__col col-auto u-flex-shrink">
+                    {% if page.logoUrl %}<a class="header__title-link" href="{{ page.logoUrl }}">{% endif %}
                     <h1
                             class="header__title header__title--nav-adj">
                         <span class="js-header-title">
@@ -34,17 +34,15 @@
                                 {{ site.title }}
                             {% endif %}
                         </span>
-                        {% unless page.hideSaveLater %}
-                                    {% if page.exit %}
-                                    <button class="btn btn--ghost u-fr u-d-no@xs@m exit">Exit</button>
-                                    {% else %}
-                                    <button class="btn btn--ghost u-fr u-d-no@xs@m complete-later">Save and sign out</button>
-                                    {% endif %}
-                        <!--<button class="btn btn&#45;&#45;ghost u-fr">Cadw a chwblhau'n ddiweddarach</button>-->
-                        {% endunless %}
                     </h1>
+                    <img class="header__title-logo" src="/img/icons/census-logo-en.svg" alt="Census 2021">
                     {% if page.logoUrl %}</a>{% endif %}
                 </div>
+                <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
+                  <button type="submit" class="btn btn--mobile u-ml-s js-toggle-main" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
+                    <span class="btn__inner">Menu</span>
+                  </button>
+                </div>
             </div>
         </div>
     </div>
@@ -61,6 +59,9 @@
 						<li class="header-nav__item ">
 							<a href="" class="header-nav__link" role="menuitem">Help with your census</a>
 						</li>
+                        <li class="header-nav__item ">
+							<a href="" class="header-nav__link" role="menuitem">Keeping your data safe</a>
+						</li>
 						<li class="header-nav__item ">
 							<a href="" class="header-nav__link" role="menuitem">Contact us</a>
 						</li>

diff --git a/_prototypes/end-to-end/home.html b/_prototypes/end-to-end/home.html
@@ -122,9 +122,10 @@ <h3 class="u-fs-r--b">If you want to fill out a paper census</h3>
 
 </main>
 <script>
-    var trigger = document.getElementsByClassName('js-toggle');
+    var heroTwisty = document.getElementsByClassName('js-toggle');
+    var mobileNavBtn = document.getElementsByClassName('js-toggle-main');
 
-    $(trigger).click(function(e) {
+    $(heroTwisty).click(function(e) {
         e.preventDefault();
 
         $('.hero--with-image').toggleClass('expanded');
@@ -135,6 +136,15 @@ <h3 class="u-fs-r--b">If you want to fill out a paper census</h3>
         $('.header-nav__item:first-of-type').addClass('header-nav__item--active');
     }
 
+    function mobileNav() {
+        $(mobileNavBtn).click(function(e) {
+            e.preventDefault();
+            $(this).toggleClass('js-nav-show');
+            $('#main-nav').toggle();
+        });
+    }
+
     $(activeNavItem);
+    $(mobileNav);
 
 </script>
diff --git a/_prototypes/end-to-end/style.css b/_prototypes/end-to-end/style.css
@@ -129,11 +129,8 @@ h4 {
     margin-bottom : 0!important;
 }
 
-.header__title {
-    display: block;
-    background: url('../img/icons/census-logo-en.svg') no-repeat 0 50%;
-    max-width: 100%;
-    height: 53px;
+.header__title-link:focus {
+    outline-color: #fd0;
 }
 
 .header__title span {
@@ -152,6 +149,10 @@ h4 {
 }
 
 /* Header nav */
+.header-nav {
+    display: none;
+}
+
 .header__bottom {
     background: #93328e;
 }
@@ -186,7 +187,23 @@ h4 {
     font-weight: bold;
 }
 
+.btn--mobile:before {
+    top: 14px;
+}
+
+.btn--mobile:focus:before {
+    background: url(/img/icons/icons--chevron-down-black.svg) no-repeat 50%;
+}
+
+.btn--mobile.js-nav-show:before {
+    transform: rotate(180deg);
+}
+
 @media only screen and (min-width: 740px) {
+    .header-nav {
+        display: block;
+    }
+
     .header-nav__item {
         display: inline-block;
         position: relative;
@@ -227,7 +244,7 @@ h4 {
     }
   } */
 
-.btn:not(.btn--ghost):not(.btn--ghost-blue) {
+.btn:not(.btn--ghost):not(.btn--ghost-blue):not(.btn--mobile) {
     -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
     -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
     box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
@@ -241,7 +258,8 @@ h4 {
     border: 1px solid #fd0;
 }
 
-.btn--ghost:focus {
+.btn--ghost:focus,
+.btn--mobile:focus {
     border: 2px solid #fd0;
 }
 

diff --git a/img/icons/icons--chevron-down-black.svg b/img/icons/icons--chevron-down-black.svg