Some header and footer improvements.

app/controllers/App.php

@@ -38,9 +38,9 @@ class App extends Controller
                 || get_option('pb_network_twitter')
                 || is_active_sidebar("network-footer-block-$index")
             ) {
-                return "network-footer-block-$index";
+                return "network-footer__block--$index";
             } else {
-                return 'empty';
+                return 'network-footer__block--empty';
             }
         }
         return (is_active_sidebar("network-footer-block-$index")) ? "network-footer-block-$index" : 'empty';

resources/assets/scripts/routes/common.js

@@ -2,10 +2,10 @@ export default {
   init() {
     // JavaScript to be fired on all pages
     $('body').removeClass('no-js').addClass('js');
-    $('.toggle-menu').click((event) => {
+    $('.toggle').click((event) => {
       event.preventDefault();
-      $(event.currentTarget).toggleClass('is-active');
-      $('.primary-navigation').toggleClass('is-visible');
+      $(event.currentTarget).toggleClass('toggle--active');
+      $('.banner__navigation').toggleClass('banner__navigation--visible');
     });
   },
   finalize() {

resources/assets/styles/layouts/_footer.scss

@@ -1,4 +1,4 @@
-.content-info {
+.footer {
   .network-footer {
     margin-bottom: 0;
     padding: 60px 42.5px 40px;
@@ -27,7 +27,7 @@
       }
     }
 
-    .network-footer-block.empty {
+    &__block {
       display: none;
     }
 
@@ -39,7 +39,7 @@
       border-top: solid 1px var(--accent-fg, $white);
     }
 
-    .network-footer-block-1 {
+    .network-footer__block-1 {
       margin: 0 -5px;
       padding: 0 0 40px;
     }

resources/assets/styles/layouts/_header.scss

@@ -13,7 +13,7 @@
     max-width: 1440px;
   }
 
-  .toggle-menu {
+  .toggle {
     display: block;
     position: absolute;
     top: 30px;
@@ -23,7 +23,7 @@
     z-index: 99;
     text-indent: -9999em;
 
-    .icon {
+    &__icon {
       display: block;
       position: absolute;
       top: 7px;
@@ -52,8 +52,8 @@
       }
     }
 
-    &.is-active .icon {
-      // TODO
+    &--active {
+      .toggle__icon {
         background: var(--primary-fg, $white);
 
         &::before,
@@ -62,8 +62,9 @@
         }
       }
     }
+  }
 
-  .brand {
+  &__brand {
     display: block;
     align-self: flex-start;
     width: 6.5625rem;
@@ -78,7 +79,7 @@
     }
   }
 
-  .primary-navigation {
+  &__navigation {
     display: flex;
     position: absolute;
     flex-direction: column;
@@ -104,7 +105,7 @@
       display: none;
     }
 
-    &.is-visible {
+    &--visible {
       margin: 0;
       padding: 0 52px;
       z-index: 1;
@@ -122,7 +123,7 @@
     }
   }
 
-  .branding {
+  &__branding {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -147,18 +148,18 @@
       margin: 0 auto;
     }
 
-    .toggle-menu {
+    .toggle {
       display: none;
     }
 
-    .brand {
+    &__brand {
       align-self: center;
       width: 16.5625rem;
       height: auto;
       margin-top: 40px;
     }
 
-    .primary-navigation {
+    &__navigation {
       top: 40px;
       height: 40px;
       max-width: 1440px;
@@ -193,7 +194,7 @@
       }
     }
 
-    .branding {
+    &__branding {
       height: 576px;
 
       p {

resources/views/partials/footer.blade.php

@@ -1,15 +1,15 @@
-<footer class="content-info">
+<footer class="footer">
   <div class="container">
     @if(get_option('pb_network_contact_form'))
       @include('partials.contact-form')
     @endif
     <section class="network-footer">
-      <div class="network-footer-block {{ App::networkFooter(1) }}">
+      <div class="network-footer__block {{ App::networkFooter(1) }}">
         @if(App::networkFooter(1) !== 'empty')
             @php(dynamic_sidebar('network-footer-block-1'))
         @endif
       </div>
-      <div class="network-footer-block {{ App::networkFooter(2) }}">
+      <div class="network-footer__block {{ App::networkFooter(2) }}">
         @if(App::networkFooter(2) !== 'empty')
           @php(dynamic_sidebar('network-footer-block-2'))
         @endif
@@ -26,7 +26,7 @@
           @endif
         </div>
       </div>
-      <div class="network-footer-block network-footer-menu">
+      <div class="network-footer__block network-footer__menu">
         @php(wp_nav_menu('network-footer-menu'))
       </div>
     </section>

resources/views/partials/header.blade.php

@@ -4,9 +4,9 @@
   @asset('images/catalog-header.jpg')
 @endif);">
   <div class="container">
-    <a class="toggle-menu" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon"></span></a>
-    <a class="brand" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
-    <nav id="primary-navigation" class="primary-navigation">
+    <a class="toggle" href="#navigation">{{ __('Toggle menu', 'aldine') }}<span class="toggle__icon"></span></a>
+    <a class="banner__brand" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
+    <nav class="banner__navigation" id="navigation">
         <a href="{{ home_url('/catalog') }}">Catalog</a>
         <a href="#contact">Contact</a>
         @if(!is_user_logged_in())
@@ -19,7 +19,7 @@
           <a href="{{ wp_logout_url() }}">{{ __('Sign out', 'aldine') }}</a>
         @endif
     </nav>
-    <header class="branding">
+    <header class="banner__branding">
       <h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
       <p>{{ get_bloginfo('description', 'display') }}</p>
     </header>