Add 25/75 grid split support to top navigation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.7.0
+  features:
+    - component: Navigation / 25/75 split
+      url: /docs/patterns/navigation
+      status: Updated
+      notes: We've introduced a new variant of top navigation that aligns with 25/75 grid split using <code>p-navigation__row--25-75</code>.
 - version: 4.6.0
   features:
     - component: Grid / Responsive

scss/_patterns_navigation.scss

@@ -186,6 +186,52 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
   }
 
+  .p-navigation__row--25-75 {
+    // ideally we'd like to extend row only on large screens,
+    // but that's not possible to use @extend inside media query
+    @extend %vf-row;
+
+    // when mobile navigation is displayed, remove default row padding
+    @media (width < $breakpoint-navigation-threshold) {
+      padding: 0;
+    }
+
+    // when large screen navigation is displayed, use 25/75 grid split
+    @media (min-width: $breakpoint-navigation-threshold) {
+      // remove padding from logo banner (the grid has its own padding)
+      .p-navigation__banner {
+        padding-left: 0;
+      }
+
+      // shift navigation items by the size of grid margin to align with grid
+      .p-navigation__items:first-child {
+        margin-left: calc(-1 * map-get($grid-margin-widths, default));
+      }
+
+      // on medium screen sizes (6 columns) use 2/4 column split
+      @media (min-width: $threshold-4-6-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 2;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 4;
+        }
+      }
+
+      // on large screen sizes (12 columns) use 3/9 column split
+      @media (min-width: $threshold-6-12-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 3;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 9;
+        }
+      }
+    }
+  }
+
   .p-navigation__item,
   .p-navigation__item--dropdown-toggle {
     @media (min-width: $breakpoint-navigation-threshold) {

scss/standalone/patterns_navigation.scss

@@ -12,3 +12,6 @@
 
 // used by navigation
 @include vf-u-off-screen;
+
+// needed in example that aligns navigation with the grid
+@include vf-p-grid;

templates/_layouts/_header.html

@@ -63,7 +63,7 @@
     </div>
   </div>
   {% else %}
-  <div class="p-navigation__row">
+  <div class="p-navigation__row--25-75">
     {{ nav_logo() }}
     {{ nav_items() }}
   </div>

templates/docs/examples/patterns/navigation/default.html

@@ -1,11 +1,12 @@
 {% extends "_layouts/examples.html" %}
-{% block title %}Navigation / Default{% endblock %}
+{% block title %}Navigation / Grid{% endblock %}
 
 {% block standalone_css %}patterns_navigation{% endblock %}
 
 {% block content %}
-<header id="navigation" class="p-navigation">
-  <div class="p-navigation__row">
+
+<header id="navigation" class="p-navigation is-dark">
+  <div class="p-navigation__row--25-75">
     <div class="p-navigation__banner">
       <div class="p-navigation__tagged-logo">
         <a class="p-navigation__link" href="#">
@@ -15,10 +16,17 @@
           <span class="p-navigation__logo-title">Ubuntu</span>
         </a>
       </div>
-      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
-      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item">
+          <button class="js-search-button p-navigation__link--search-toggle">
+            <span class="p-navigation__search-label">Search</span>
+          </button>
+        </li>
+        <li class="p-navigation__item">
+          <button class="js-menu-button p-navigation__link">Menu</button>
+        </li>
+      </ul>
     </div>
-
     <nav class="p-navigation__nav" aria-label="Example main">
       <ul class="p-navigation__items">
         <li class="p-navigation__item is-selected">
@@ -31,7 +39,21 @@
           <a class="p-navigation__link" href="#">Partners</a>
         </li>
       </ul>
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item">
+          <li class="p-navigation__item">
+            <a class="p-navigation__link" href="#">Sign in</a>
+          </li>
+        </li>
+      </ul>
     </nav>
   </div>
 </header>
+
+<div class="row--25-75">
+  <div class="col">
+    <h1>Page content in the grid</h1>
+  </div>
+</div>
+
 {% endblock %}

templates/docs/examples/patterns/navigation/default-dark.html → templates/docs/examples/patterns/navigation/deprecated-dark.html

@@ -1,5 +1,5 @@
 {% extends "_layouts/examples.html" %}
-{% block title %}Navigation / Default dark{% endblock %}
+{% block title %}Navigation / Deprecated dark{% endblock %}
 
 {% block standalone_css %}patterns_navigation{% endblock %}
 

templates/docs/examples/patterns/navigation/deprecated-logo.html

@@ -0,0 +1,157 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Deprecated old logo{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+<p>Light theme with expanding search:</p>
+<header id="navigation" class="p-navigation">
+  <div class="p-navigation__row">
+    <div class="p-navigation__banner">
+      <div class="p-navigation__logo">
+        <a class="p-navigation__item" href="#">
+          <img class="p-navigation__image" src="https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg" alt="Canonical" width="95" />
+        </a>
+      </div>
+      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
+      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
+    </div>
+    <nav class="p-navigation__nav" aria-label="Example main navigation">
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item is-selected">
+          <a class="p-navigation__link" href="#">Products</a>
+        </li>
+        <li class="p-navigation__item">
+          <a class="p-navigation__link" href="#">Services</a>
+        </li>
+        <li class="p-navigation__item">
+          <a class="p-navigation__link" href="#">Partners</a>
+        </li>
+      </ul>
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item">
+          <a href="#" class="js-search-button p-navigation__link--search-toggle">
+            <span class="p-navigation__search-label">Search</span>
+          </a>
+        </li>
+      </ul>
+      <div class="p-navigation__search">
+        <form class="p-search-box">
+          <input type="search" class="p-search-box__input" name="q" placeholder="Search our sites" required="" aria-label="Search our sites">
+          <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
+          <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
+        </form>
+      </div>
+    </nav>
+  </div>
+  <div class="p-navigation__search-overlay"></div>
+</header>
+
+
+<p>Dark theme with search box:</p>
+
+<header id="navigation2" class="p-navigation is-dark">
+  <div class="p-navigation__row">
+    <div class="p-navigation__banner">
+      <div class="p-navigation__logo">
+        <a class="p-navigation__item" href="#">
+          <img class="p-navigation__image" src="https://assets.ubuntu.com/v1/3c7954dd-logo-canonical-white.svg" alt="" width="95" />
+        </a>
+      </div>
+      <a href="#navigation2" class="p-navigation__toggle--open" title="menu">Menu</a>
+      <a href="#navigation2-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
+    </div>
+    <nav class="p-navigation__nav" aria-label="Example with a search box component">
+      <span class="u-off-screen">
+        <a href="#main-content">Jump to main content</a>
+      </span>
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item"><a class="p-navigation__link" href="#">Products</a></li>
+        <li class="p-navigation__item"><a class="p-navigation__link" href="#">Services</a></li>
+        <li class="p-navigation__item"><a class="p-navigation__link" href="#">Partners</a></li>
+      </ul>
+      <form class="p-search-box is-dark">
+        <label class="u-off-screen" for="search">Search</label>
+        <input type="search" class="p-search-box__input" name="search" placeholder="Search" id="search" required autocomplete="on">
+        <button type="reset" class="p-search-box__reset"><i class="p-icon--close is-light">Close</i></button>
+        <button type="submit" class="p-search-box__button"><i class="p-icon--search is-light">Search</i></button>
+      </form>
+    </nav>
+  </div>
+</header>
+
+
+<p>Dark theme with dropdowns:</p>
+
+<header id="navigation3" class="p-navigation is-dark">
+  <div class="p-navigation__row">
+    <div class="p-navigation__banner">
+      <div class="p-navigation__logo">
+        <a class="p-navigation__item" href="#">
+          <img class="p-navigation__image" src="https://assets.ubuntu.com/v1/20673d9f-lxd_primary--for-dark-bg.svg" alt="LXD" width="95">
+        </a>
+      </div>
+      <a href="#navigation3" class="p-navigation__toggle--open" title="menu">Menu</a>
+      <a href="#navigation3-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
+    </div>
+    <nav class="p-navigation__nav" aria-label="Example main">
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item--dropdown-toggle" id="link-2">
+          <a href="#link-2-menu" aria-controls="link-2-menu" class="p-navigation__link">LXD</a>
+          <ul class="p-navigation__dropdown" id="link-2-menu" aria-hidden="true">
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Introduction</a>
+            </li>
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">News</a>
+            </li>
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Getting started - Command line</a>
+            </li>
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Getting started - OpenStack</a>
+            </li>
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Getting started - OpenNebula</a>
+            </li>
+          </ul>
+        </li>
+        <li class="p-navigation__item--dropdown-toggle is-active" id="link-3">
+          <a href="#link-3-menu" aria-controls="link-3-menu" class="p-navigation__link">LXCFS</a>
+          <ul class="p-navigation__dropdown" id="link-3-menu" aria-hidden="false">
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Introduction</a>
+            </li>
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">News</a>
+            </li>
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Getting started</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <ul class="p-navigation__items">
+        <li class="p-navigation__item--dropdown-toggle" id="link-4">
+          <a class="p-navigation__link" aria-controls="account-menu">
+            My account
+          </a>
+          <ul class="p-navigation__dropdown--right" id="account-menu" aria-hidden="true">
+            <li>
+              <a href="#" class="p-navigation__dropdown-item">Sign out</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>
+
+<script>
+  {% include 'docs/examples/patterns/navigation/_script-search.js' %}
+  {% include 'docs/examples/patterns/navigation/_script.js' %}
+
+  initNavDropdowns('.p-navigation__item--dropdown-toggle')
+</script>
+{% endblock %}