Merge pull request #241 from adobe/redesign/documentation-nav

[#230] block side navigation ux - without search

blocks/side-navigation/README.md

@@ -0,0 +1,28 @@
+## Side Navigation
+
+Notes: The Side Navigation is a block meant to be used a a fragment on the Documentation Landing and Documentation Detail pages with the Page metadata template set to `guides`.
+
+##### Custom Classes 
+|  Class | Function   |  
+|--------|------------|
+|   - |  -   |  
+
+
+#### Example:
+
+See Live output (Link TBD)
+
+#### Content Structure:
+
+[See Content in Document](https://docs.google.com/document/d/1ST15vxa7XD9vVYJM-CH3fgJwtn8ERogEjZdSwcMkrLI/edit)
+
+#### Code:
+Side Navigation is styled in the block CSS code.
+
+There is Javascript code for decoration purposes and to set up a target click handler for list items that require a toggle to reveal additional list items. 
+
+[Decoration Code](side-navigation.js)
+
+The CSS Styling is very project specific and gets adjusted as needed for a project or block by block.
+
+[Styling Code](side-navigation.css)

blocks/side-navigation/side-navigation.css

@@ -0,0 +1,103 @@
+.side-navigation {
+  width: 252px;
+  border-radius: 4px;
+  padding: 24px;
+  font-size: var(--type-body-s-size);
+
+  /* Temp color */
+  background: aliceblue; 
+  display: none;
+}
+
+.side-navigation.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: calc(100% - 48px);
+  height: 100%;
+  overflow: scroll;
+  display: block;
+}
+
+.side-navigation ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.side-navigation .list-section {
+  margin-bottom: var(--spacing-m);
+
+  /* Temp color */
+  color: blue;
+}
+
+.side-navigation .list-section .list-section-inner {
+  color: initial;
+}
+
+.side-navigation .list-section .list-section-inner li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: wrap;
+}
+
+.side-navigation .list-section .list-section-inner-nested {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.side-navigation .list-section .list-section-inner li span {
+  display: flex;
+}
+
+.side-navigation .list-section .list-section-inner li a {
+  text-decoration: none;
+}
+
+.side-navigation .list-section .list-section-inner li a.active {
+  display: block;
+  width: 100%;
+  border-radius: 4px;
+  color: black;
+  padding: 0 6px;
+
+  /* Temp color */
+  background: #d1e5f5;
+}
+
+.side-navigation .list-section .side-navigation-nested-target:not(.collapse) .icon {
+  transform: rotate(180deg);
+}
+
+.side-navigation .side-navigation-nested-target {
+  position: relative;
+}
+
+.side-navigation .side-navigation-nested-target.collapse ul {
+  display: none;
+}
+
+.side-navigation-overlay-btn-wrapper {
+  text-align: left;
+}
+
+.side-navigation-overlay-btn-wrapper button {
+  appearance: none;
+  border: solid 1px black;
+  background-color: white;;
+  border-radius: 6px;
+  padding: 8px 16px;
+}
+
+@media screen and (min-width: 900px) {
+  .side-navigation-overlay-btn-wrapper {
+    display: none;
+  }
+
+  .side-navigation {
+    display: block;
+  }
+}

blocks/side-navigation/side-navigation.js

@@ -0,0 +1,42 @@
+import createTag from '../../utils/tag.js';
+
+export default function decorate(block) {
+  const docBtnInner = '<button>📖 Docs</button>';
+  const docButton = createTag('div', { class: 'side-navigation-overlay-btn-wrapper' }, docBtnInner);
+
+  const backBtnInner = '<button>← Back</button>';
+  const backBtn = createTag('div', { class: 'side-navigation-overlay-btn-wrapper' }, backBtnInner);
+
+  block.parentElement.prepend(docButton);
+  block.prepend(backBtn);
+
+  [docButton, backBtn].forEach((btn) => {
+    btn.addEventListener('click', () => {
+      block.classList.toggle('overlay');
+    });
+  });
+
+  block.querySelectorAll(':scope > div > div > ul > li').forEach((list) => {
+    list.classList.add('list-section');
+    list.querySelectorAll(':scope > ul').forEach((listInner) => {
+      listInner.classList.add('list-section-inner');
+
+      listInner.querySelectorAll(':scope > li > ul').forEach((nestedList) => {
+        const listTarget = nestedList.parentElement;
+
+        nestedList.classList.add('list-section-inner-nested');
+
+        listTarget.classList.add('side-navigation-nested-target', 'collapse');
+        listTarget.addEventListener('click', (e) => {
+          e.target.classList.toggle('collapse');
+        });
+      });
+
+      listInner.querySelectorAll(':scope li a').forEach((link) => {
+        if (window.location.pathname === link.getAttribute('href')) {
+          link.classList.add('active');
+        }
+      });
+    });
+  });
+}

scripts/scripts.js

@@ -612,7 +612,10 @@ function buildEmbeds() {
 
 function buildHeader() {
   const header = document.querySelector('header');
-  header.append(buildBlock('header', ''));
+  if (!document.querySelector('header > .header')) {
+    header.append(buildBlock('header', ''));
+  }
+  // console.log('appending header')
 }
 
 function buildFooter() {
@@ -642,7 +645,7 @@ export function buildAutoBlocks(main) {
 export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
-  decorateButtons(main);
+  // decorateButtons(main);
   decorateHeadings(main);
   decorateBlocks(main);
 }

styles/styles.css

@@ -679,6 +679,59 @@ main .section.separator
   padding: 20px 0;
 }
 
+/* Layout for Guide pages  */
+
+body.guides-template main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+body.guides-template .section {
+  box-sizing: border-box;
+}
+
+body.guides-template main .section.heading {
+  width: 100%;
+}
+
+body.guides-template main .section.content {
+  max-width: 1200px;
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (min-width: 900px) {
+  body.guides-template main .section.content {
+    display: flex;
+    height: auto;
+  }
+
+  body.guides-template main .section.content .default-content-wrapper {
+    margin-left: 32px;
+  }
+}
+
+body.guides-template main .section.content .default-content-wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+body.guides-template .icon-icon-caret-right,
+body.guides-template .icon-icon-caret-down {
+  width: 20px;
+  height: 20px;
+}
+
+body.guides-template .icon-icon-caret-right {
+  background-image: url("/img/icon-caret-right.svg");
+}
+
+body.guides-template .icon-icon-caret-down {
+  background-image: url("/img/icon-caret-down.svg");
+}
+
 /* redesign styles */
 main .section.title-section {
   padding-bottom: 0;