Merge pull request #2730 from exadel-inc/tech/update-navigation

site: rework 3rd level nav, split complex doc
exadel-inc · Oct 31, 2024 · cf936c3 · cf936c3
2 parents b48f923 + 20c469c
commit cf936c3
Show file tree

Hide file tree

Showing 18 changed files with 851 additions and 837 deletions.
diff --git a/site/site.yml b/site/site.yml
@@ -21,10 +21,17 @@ rewriteRules:
   "CONTRIBUTING.md": "/introduction/contributing"
   "docs/INSTALLATION_GUIDE.md": "/introduction"
   "docs/BROWSER_SUPPORT.md": "/introduction/browser-support"
+
   "src/modules/esl-base-element/README.md": "/core/esl-base-element"
   "src/modules/esl-mixin-element/README.md": "/core/esl-mixin-element"
   "src/modules/esl-media-query/README.md": "/core/esl-media-query"
   "src/modules/esl-traversing-query/README.md": "/core/esl-traversing-query"
+  "src/modules/esl-event-listener/README.md": "/core/esl-event-listener"
+  "src/modules/esl-event-listener/docs/1-overview.md": "/core/esl-event-listener/overview"
+  "src/modules/esl-event-listener/docs/2-public-api.md": "/core/esl-event-listener/public-api"
+  "src/modules/esl-event-listener/docs/3-extended-targets.md": "/core/esl-event-listener/extended-targets"
+  "src/modules/esl-event-listener/docs/4-core-support.md": "/core/esl-event-listener/core-support"
+
   "src/modules/esl-trigger/README.md": "/components/esl-trigger"
   "src/modules/esl-toggleable/README.md": "/components/esl-toggleable"
   "src/modules/esl-tab/README.md": "/components/esl-tab"

diff --git a/site/src/navigation/sidebar/sidebar-seccondary-nav.less b/site/src/navigation/sidebar/sidebar-seccondary-nav.less
@@ -37,15 +37,32 @@ esl-d-sidebar {
       padding: 0;
     }
 
-    .sidebar-nav-item-container-trigger {
+    .sidebar-nav-item-heading {
       display: block;
       padding-block: 10px;
       padding-inline-end: 35px;
       padding-inline-start: var(--padding-inline-start);
+
+      .sidebar-nav-secondary-link {
+        display: inline-block;
+      }
+
+      .sidebar-nav-item-trigger {
+        display: inline-block;
+        position: relative;
+        margin: 0;
+
+        // Extra click area
+        &::before {
+          content: '';
+          position: absolute;
+          inset: -5px;
+        }
+      }
     }
 
     .sidebar-nav-secondary-item {
-      padding-inline-start: calc(var(--padding-inline-start) + 20px);
+      padding-inline-start: calc(var(--padding-inline-start) + 25px);
     }
   }
 

diff --git a/site/src/navigation/sidebar/sidebar-share.less b/site/src/navigation/sidebar/sidebar-share.less
@@ -20,15 +20,13 @@ esl-d-sidebar {
       padding-left: 36px;
     }
 
-    .esl-share {
+    .esl-share-list {
+      max-width: 100%;
       display: flex;
       align-items: center;
-    }
+      justify-content: space-between;
 
-    .esl-share-list {
-      max-width: 100%;
-      flex: 0 0 auto;
-      margin: 0 -5px; // Offset for facebook icon
+      margin: 0 -4px; // Offset for facebook icon
       gap: 1.75rem;
       @media @sm-xl {
         gap: 0.65rem;

diff --git a/site/src/navigation/sidebar/sidebar.less b/site/src/navigation/sidebar/sidebar.less
@@ -1,6 +1,12 @@
 @import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
+  --esl-sidebar-width: 100vw;
+  --esl-sidebar-width-closed: 72px;
+  @media @sm-xl {
+    --esl-sidebar-width: 20rem;
+  }
+
   display: block;
   @media print {
     display: none;
@@ -36,13 +42,7 @@ esl-d-sidebar {
 
   &,
   & .sidebar-content {
-    width: 100vw;
-    @media @sm {
-      width: 20rem;
-    }
-    @media @md-xl {
-      width: 18rem;
-    }
+    width: var(--esl-sidebar-width);
   }
 
   @media @xs-sm {
@@ -58,19 +58,15 @@ esl-d-sidebar {
   @media @md-xl {
     position: relative;
     top: 0;
+    max-width: var(--esl-sidebar-width-closed);
     height: var(--100vh, 100vh);
-    max-width: 72px;
-
     @supports (height: 100dvh) {
       height: 100dvh;
     }
   }
 
   &.open {
-    max-width: 100vw;
-    @media @md-xl {
-      max-width: 18rem;
-    }
+    max-width: var(--esl-sidebar-width);
   }
 
   @media @md-xl {

diff --git a/site/src/navigation/sidebar/sidebar.ts b/site/src/navigation/sidebar/sidebar.ts
@@ -15,7 +15,7 @@ export class ESLDemoSidebar extends ESLToggleable {
   @prop() public override closeOnEsc = true;
   @prop() public override closeOnOutsideAction = true;
 
-  @prop() public submenus: string = '.sidebar-nav-secondary';
+  @prop() public submenus: string = 'esl-panel';
   @prop() public activeMenuAttr: string = 'data-open';
 
   @boolAttr({name: 'animation'}) protected _animation: boolean;
@@ -44,9 +44,13 @@ export class ESLDemoSidebar extends ESLToggleable {
   }
 
   public expandActive(noAnimate: boolean = false): void {
-    this.$submenus
-      .filter((menu) => menu.hasAttribute('data-open'))
-      .forEach((menu) => menu.show({noAnimate, activator: this}));
+    const $open = this.$submenus.filter((menu) => menu.hasAttribute('data-open'));
+    const $children = $open.filter((menu) => !!menu.parentElement?.closest(this.submenus));
+    const $roots = $open.filter((menu) => !$children.includes(menu));
+
+    // TODO: fix order on ESLPanel level
+    $children.forEach(($menu) => $menu.show({noAnimate: true, activator: this}));
+    $roots.forEach(($menu) => $menu.show({noAnimate, activator: this}));
   }
 
   protected override updateA11y(): void {

diff --git a/site/views/_includes/navigation/sidebar-item.njk b/site/views/_includes/navigation/sidebar-item.njk
@@ -57,31 +57,45 @@
 {% endmacro %}
 
 {% macro subnavItem(item, isDraftCollection) %}
-  {% set isActive = functions.isActivePath(page.url, item.url) %}
+  {% set isActive = page.url === item.url %}
+  {% set hasActive = functions.isActivePath(page.url, item.url) %}
   {% set isDraft = [].concat(item.data.tags).includes('draft') %}
   {% set isNew = [].concat(item.data.tags).includes('new') %}
   {% set isBeta = [].concat(item.data.tags).includes('beta') %}
+  {% set isDeprecated = [].concat(item.data.tags).includes('deprecated') %}
 
   <li class="sidebar-nav-secondary-item sidebar-nav-item-container {{ 'draft' if isDraft }}"
-      {% if isActive %}aria-selected="true"{% endif %}>
-    <esl-trigger class="sidebar-nav-item-container-trigger sidebar-nav-item-arrow"
-                 target="::next"
-                 a11y-label-active="Collapse {{ item.data.name }} section"
-                 a11y-label-inactive="Expand {{ item.data.name }} section"
-                 {% if isActive %}active{% endif %}>
-      {{ item.data.navTitle or item.data.title }}
-      {% if isBeta %}
-        <sup class="badge badge-sup badge-warning">beta</sup>
-      {% endif %}
-      {% if isNew %}
-        <sup class="badge badge-sup badge-success">new</sup>
-      {% endif %}
-    </esl-trigger>
+      {% if hasActive %}aria-selected="true"{% endif %}>
+    <div class="sidebar-nav-item-heading sidebar-nav-item-heading-secondary {{ 'active' if hasActive }}">
+      <a class="sidebar-nav-secondary-link"
+         {% if isActive %}aria-current="page"{% endif %} {% if isDraft %}rel="nofollow"{% endif %}
+         href="{{ item.url | url }}">
+        {% if isNew %}
+          <sup class="badge badge-sup badge-success badge-sidebar">new</sup>
+        {% endif %}
+        {% if isBeta %}
+          <sup class="badge badge-sup badge-warning badge-sidebar">beta</sup>
+        {% endif %}
+        {% if isDraft %}
+          <sup class="badge badge-sup badge-danger badge-sidebar" {% if isDraftCollection %}hidden{% endif %}>draft</sup>
+        {% endif %}
+        {% if isDeprecated %}
+          <span class="badge badge-img badge-deprecated badge-sidebar" aria-label="Deprecated component" title="Deprecated component"></span>
+        {% endif %}
+        {{ item.data.name }}
+      </a>
+      <esl-trigger class="sidebar-nav-item-trigger sidebar-nav-item-arrow"
+                   target="::parent::next"
+                   a11y-label-active="Collapse {{ item.data.name }} section"
+                   a11y-label-inactive="Expand {{ item.data.name }} section"
+                   {% if hasActive %}active{% endif %}>
+      </esl-trigger>
+    </div>
 
-    <esl-panel class="sidebar-nav-secondary {{ 'open' if isActive }}"
-               {% if isActive %}data-open{% endif %}
+    <esl-panel class="sidebar-nav-secondary {{ 'open' if hasActive }}"
+               {% if hasActive %}data-open{% endif %}
                fallback-duration="400">
-      {{ linkList(item.children, isDraftCollection, [item]) }}
+      {{ linkList(item.children, isDraftCollection) }}
     </esl-panel>
   </li>
 {% endmacro %}
@@ -92,7 +106,6 @@
   {% set isNew = [].concat(item.data.tags).includes('new') %}
   {% set isBeta = [].concat(item.data.tags).includes('beta') %}
   {% set isDeprecated = [].concat(item.data.tags).includes('deprecated') %}
-  {% set isPlayground = [].concat(item.data.tags).includes('playground') %}
 
   <li class="sidebar-nav-secondary-item {{ 'active' if isActive }} {{ 'draft' if isDraft }}"
       {% if isActive %}aria-selected="true"{% endif %}>
@@ -111,9 +124,6 @@
       {% if isDeprecated %}
         <span class="badge badge-img badge-deprecated badge-sidebar" aria-label="Deprecated component" title="Deprecated component"></span>
       {% endif %}
-      {% if isPlayground %}
-        <span class="badge badge-img badge-playground badge-sidebar" aria-label="Live code" title="Page with a live code example"></span>
-      {% endif %}
       {{ item.data.name }}
     </a>
   </li>

diff --git a/site/views/_includes/navigation/sidebar.njk b/site/views/_includes/navigation/sidebar.njk
@@ -60,13 +60,12 @@
 </esl-d-sidebar>
 <script>
   if (localStorage.getItem('sidebar-collapsed')) {
-    var sidebar = document.querySelector('#sidebar');
+    const sidebar = document.querySelector('#sidebar');
     sidebar.classList.remove('open');
 
     sidebar.querySelector('.sidebar-trigger-btn').removeAttribute('active');
-    Array.from(sidebar.querySelectorAll('.sidebar-nav-secondary'))
-      .forEach(function(menu) {
-        menu.classList.remove('open');
-      });
+    Array.from(sidebar.querySelectorAll('esl-panel')).forEach(function(menu) {
+      menu.classList.remove('open');
+    });
   }
 </script>
diff --git a/site/views/core/esl-eslint-plugin.njk b/site/views/core/esl-eslint-plugin.njk
@@ -3,7 +3,7 @@ layout: content
 title: 'Support and Migration: ESL ESLint Deprecation Rules'
 seoTitle: Custom ESLint deprecation rules to assist ESL version migration
 name: Support and Migration (ESLint Rules)
-tags: [core, new]
+tags: [core]
 order: 10
 ---
 

diff --git a/.../esl-event-listener/extended-behavior.njk → .../core/esl-event-listener/core-support.njk b/.../esl-event-listener/extended-behavior.njk → .../core/esl-event-listener/core-support.njk
@@ -10,4 +10,4 @@ aside:
 source: src/modules/esl-event-listener
 ---
 
-{% mdRender 'src/modules/esl-event-listener/README.md', 'extended-behavior' %}
+{% mdRender 'src/modules/esl-event-listener/docs/4-core-support.md' %}
diff --git a/...event-listener/extended-event-targets.njk → ...e/esl-event-listener/extended-targets.njk b/...event-listener/extended-event-targets.njk → ...e/esl-event-listener/extended-targets.njk
@@ -10,4 +10,4 @@ aside:
 source: src/modules/esl-event-listener
 ---
 
-{% mdRender 'src/modules/esl-event-listener/README.md', 'extended-event-targets', 'extended-behavior' %}
+{% mdRender 'src/modules/esl-event-listener/docs/3-extended-targets.md' %}
diff --git a/site/views/core/esl-event-listener/index.njk b/site/views/core/esl-event-listener/index.njk
@@ -2,20 +2,11 @@
 layout: content
 title: ESL Event Listeners
 seoTitle: Built-in ESL EventListeners
-name: Overview
+name: ESL Event Listeners
 tags: [core]
 order: 2
 aside:
   source: src/modules/esl-event-listener
 ---
 
-{% mdRender 'src/modules/esl-event-listener/README.md', 'intro', 'basic-concepts' %}
-
-<div class="markdown-container">
-  <ul>
-    <li><a href="{{ '/core/esl-event-listener/basic-concepts' | url }}">Basic concepts</a></li>
-    <li><a href="{{ '/core/esl-event-listener/public-api' | url }}">Public API (`ESLEventUtils`)</a></li>
-    <li><a href="{{ '/core/esl-event-listener/extended-event-targets' | url }}">Extended `EventTarget`s and standard optimizations</a></li>
-    <li><a href="{{ '/core/esl-event-listener/extended-behavior' | url }}">Embedded behavior of `ESLBaseElement` / `ESLMixinElement`</a></li>
-  </ul>
-</div>
+{% mdRender 'src/modules/esl-event-listener/README.md', 'intro' %}
diff --git a/...ore/esl-event-listener/basic-concepts.njk → ...iews/core/esl-event-listener/overview.njk b/...ore/esl-event-listener/basic-concepts.njk → ...iews/core/esl-event-listener/overview.njk
@@ -10,4 +10,4 @@ aside:
   source: src/modules/esl-event-listener
 ---
 
-{% mdRender 'src/modules/esl-event-listener/README.md', 'basic-concepts', 'public-api' %}
+{% mdRender 'src/modules/esl-event-listener/docs/1-overview.md' %}
diff --git a/site/views/core/esl-event-listener/public-api.njk b/site/views/core/esl-event-listener/public-api.njk
@@ -10,4 +10,4 @@ aside:
   source: src/modules/esl-event-listener
 ---
 
-{% mdRender 'src/modules/esl-event-listener/README.md', 'public-api', 'extended-event-targets' %}
+{% mdRender 'src/modules/esl-event-listener/docs/2-public-api.md' %}