Learn css side nav (GoogleChrome#4892)

* comment editorconfig

* svg icons for hamburger and close button

* abstract default nav out

* remove unresolved stuff

* Fix overflow hidden bug when side nav is open

* move hero banner styles into an actual stylesheet

* style the side nav links

* get last links to scroll into vieww

* leftpad!

* sidenav and header roughly working

* the many states of the side nav buttons

* Get default drawer working again

* Dismiss is working again.

* Add standard drawer type and clean up css for navs

* wip

* sticky headers

* wire up sticky header

* rough impl of drawer hover effect

* add background image

* add gradient text

* remove app-bar background

* Add header styles

* Hack in some scrollbar nastiness

* wip

* checkpoint

* min/max breakpoint working

* simplify course nav

* Add translated course title

* Make header use BaseStateElement

* Remove Live from default drawer

* localize header buttons

* localize close button

* add scrollbar back to side toc

* rename course-nav to drawer-course

* localize close button

* use flexbox instead of hardcoding vh on drawer links

* Add configurable backgrounds

* remove unused breakpoint on course body

Author: robdodson

.editorconfig

@@ -1,9 +1,19 @@
+# https://EditorConfig.org
+
+# top-most EditorConfig file
 root = true
 
+# Make sure every file:
+# - Uses utf-8
+# - Indents with spaces instead of tabs
+# - Uses two space indents
+# - Uses Unix-style newlines
+# - Has a newline at the end of every file
+# - Trims trailing whitespace
 [*]
+charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true

.eleventy.js

@@ -89,6 +89,7 @@ const stripBlog = require(`./${filtersDir}/strip-blog`);
 const stripQueryParamsDev = require(`./${filtersDir}/strip-query-params-dev`);
 const getPaths = require(`./${filtersDir}/get-paths`);
 const navigation = require(`./${filtersDir}/navigation`);
+const padStart = require(`./${filtersDir}/pad-start`);
 
 const transformsDir = 'src/site/_transforms';
 const disableLazyLoad = require(`./${transformsDir}/disable-lazy-load`);
@@ -209,6 +210,7 @@ module.exports = function (config) {
   config.addFilter('strip', strip);
   config.addFilter('courseToc', courseToc);
   config.addFilter('updateSvgForInclude', updateSvgForInclude);
+  config.addFilter('padStart', padStart);
 
   // ----------------------------------------------------------------------------
   // SHORTCODES

src/images/courses/learn-css.svg

@@ -124,41 +124,58 @@ export const requestFetchReports = store.action((_, url, startDate) => {
   });
 });
 
-export const expandSideNav = store.action(() => {
-  openModal();
-  return {isSideNavExpanded: true};
+/**
+ * Inert the page so scrolling and pointer events are disabled.
+ * This is used when we open the navigation drawer or show a modal dialog.
+ */
+const disablePage = () => {
+  /** @type {HTMLElement|object} */
+  const main = document.querySelector('main') || {};
+  /** @type {HTMLElement|object} */
+  const header = document.querySelector('web-header') || {};
+  /** @type {HTMLElement|object} */
+  const footer = document.querySelector('.w-footer') || {};
+
+  document.documentElement.classList.add('overflow-hidden');
+  main.inert = true;
+  header.inert = true;
+  footer.inert = true;
+};
+
+/**
+ * Uninert the page so scrolling and pointer events work again.
+ */
+const enablePage = () => {
+  /** @type {HTMLElement|object} */
+  const main = document.querySelector('main') || {};
+  /** @type {HTMLElement|object} */
+  const header = document.querySelector('web-header') || {};
+  /** @type {HTMLElement|object} */
+  const footer = document.querySelector('.w-footer') || {};
+
+  document.documentElement.classList.remove('overflow-hidden');
+  main.inert = false;
+  header.inert = false;
+  footer.inert = false;
+};
+
+export const openNavigationDrawer = store.action(() => {
+  disablePage();
+  return {isNavigationDrawerOpen: true};
 });
 
-export const collapseSideNav = store.action(() => {
-  closeModal();
-  return {isSideNavExpanded: false};
+export const closeNavigationDrawer = store.action(() => {
+  enablePage();
+  return {isNavigationDrawerOpen: false};
 });
 
 export const openModal = store.action(() => {
-  const main = document.querySelector('main');
-  /** @type import('./components/Header').Header */
-  const header = document.querySelector('web-header');
-  /** @type {HTMLElement} */
-  const footer = document.querySelector('.w-footer');
-
-  document.documentElement.classList.add('web-modal__overflow-hidden');
-  main.inert = true;
-  header.inert = true;
-  footer.inert = true;
+  disablePage();
   return {isModalOpen: true};
 });
 
 export const closeModal = store.action(() => {
-  const main = document.querySelector('main');
-  /** @type import('./components/Header').Header */
-  const header = document.querySelector('web-header');
-  /** @type {HTMLElement} */
-  const footer = document.querySelector('.w-footer');
-
-  document.documentElement.classList.remove('web-modal__overflow-hidden');
-  main.inert = false;
-  header.inert = false;
-  footer.inert = false;
+  enablePage();
   return {isModalOpen: false};
 });
 

src/lib/actions.js

@@ -3,10 +3,6 @@
 $MODAL_CONTENT_PADDING: 1.5rem;
 $MODAL_ANIMATION_DURATION: 150ms;
 
-.web-modal__overflow-hidden {
-  overflow: hidden;
-}
-
 @keyframes fadein {
   0% {
     opacity: 0;

src/lib/components/BaseModalElement/_styles.scss

@@ -15,32 +15,33 @@
  */
 
 /**
- * @fileoverview A responsive header that can trigger a side-nav.
+ * @fileoverview A responsive header that can trigger a navigation drawer.
  *
  * This does not inherit from BaseStateElement as it is not a LitElement.
  */
 
 import {store} from '../../store';
-import {expandSideNav} from '../../actions';
+import {openNavigationDrawer} from '../../actions';
+import {BaseStateElement} from '../BaseStateElement';
 
-export class Header extends HTMLElement {
+export class Header extends BaseStateElement {
   constructor() {
     super();
-
-    this.onStateChanged = this.onStateChanged.bind(this);
   }
 
   connectedCallback() {
+    super.connectedCallback();
     /** @type HTMLButtonElement */
-    this.hamburgerBtn = this.querySelector('.web-header__hamburger-btn');
-    this.hamburgerBtn.classList.remove('unresolved');
-    this.hamburgerBtn.addEventListener('click', expandSideNav);
-
-    store.subscribe(this.onStateChanged);
+    this.openDrawerBtn = this.querySelector('[data-open-drawer-button]');
+    if (this.openDrawerBtn) {
+      this.openDrawerBtn.addEventListener('click', openNavigationDrawer);
+    }
   }
 
   disconnectedCallback() {
-    this.hamburgerBtn.removeEventListener('click', expandSideNav);
+    if (this.openDrawerBtn) {
+      this.openDrawerBtn.removeEventListener('click', openNavigationDrawer);
+    }
 
     store.unsubscribe(this.onStateChanged);
   }
@@ -72,12 +73,14 @@ export class Header extends HTMLElement {
   }
 
   /**
-   * This is called by the SideNav to return focus to this control when the
-   * user closes the SideNav.
+   * This is called by the NavigationDrawer to return focus to this control when
+   * the user closes the NavigationDrawer.
    * This is important for accessibility.
    */
   manageFocus() {
-    this.hamburgerBtn.focus();
+    if (this.openDrawerBtn) {
+      this.openDrawerBtn.focus();
+    }
   }
 }