From c02e7b5ded246c2ffbcfe6a437e5b4b75ef193a2 Mon Sep 17 00:00:00 2001 From: Ann Barmina Date: Thu, 3 Oct 2024 18:48:11 +0200 Subject: [PATCH 01/18] style(site): add support for third level navigation Co-authored-by: ala'n (Alexey Stsefanovich) --- .../sidebar/sidebar-primary-nav.less | 6 +- .../sidebar/sidebar-seccondary-nav.less | 27 +++- site/src/navigation/sidebar/sidebar.less | 4 +- .../_includes/navigation/footer-menu.njk | 2 +- .../_includes/navigation/sidebar-item.njk | 118 ++++++++++++------ site/views/_includes/navigation/sidebar.njk | 14 +-- site/views/core/esl-event-listener.njk | 12 -- .../esl-event-listener/basic-concepts.njk | 13 ++ .../esl-event-listener/extended-behavior.njk | 13 ++ .../extended-event-targets.njk | 13 ++ site/views/core/esl-event-listener/index.njk | 21 ++++ .../core/esl-event-listener/public-api.njk | 13 ++ src/modules/esl-event-listener/README.md | 4 + 13 files changed, 195 insertions(+), 65 deletions(-) delete mode 100644 site/views/core/esl-event-listener.njk create mode 100644 site/views/core/esl-event-listener/basic-concepts.njk create mode 100644 site/views/core/esl-event-listener/extended-behavior.njk create mode 100644 site/views/core/esl-event-listener/extended-event-targets.njk create mode 100644 site/views/core/esl-event-listener/index.njk create mode 100644 site/views/core/esl-event-listener/public-api.njk diff --git a/site/src/navigation/sidebar/sidebar-primary-nav.less b/site/src/navigation/sidebar/sidebar-primary-nav.less index 3286013857..a47899c652 100644 --- a/site/src/navigation/sidebar/sidebar-primary-nav.less +++ b/site/src/navigation/sidebar/sidebar-primary-nav.less @@ -112,9 +112,7 @@ esl-d-sidebar { transform-origin: center; transition: transform 0.5s ease-in-out; } - .sidebar-nav-item-trigger[active] { - &.sidebar-nav-item-arrow::after { - transform: rotate(180deg); - } + .sidebar-nav-item-arrow[active]::after { + transform: rotate(180deg); } } diff --git a/site/src/navigation/sidebar/sidebar-seccondary-nav.less b/site/src/navigation/sidebar/sidebar-seccondary-nav.less index cb168ca339..37525cb1bd 100644 --- a/site/src/navigation/sidebar/sidebar-seccondary-nav.less +++ b/site/src/navigation/sidebar/sidebar-seccondary-nav.less @@ -4,19 +4,24 @@ esl-d-sidebar { .sidebar-nav-secondary { width: 100%; } + .sidebar-nav-secondary-list { padding: 2px 0; } + .sidebar-nav-secondary-item { display: block; position: relative; - padding: 10px 35px 10px 70px; + padding-block: 10px; + padding-inline-end: 35px; + padding-inline-start: var(--padding-inline-start); + --padding-inline-start: 70px; @media @sm { - padding-left: 81px; + --padding-inline-start: 81px; } @media @md-xl { - padding-left: 66px; + --padding-inline-start: 66px; } &.active { @@ -27,7 +32,23 @@ esl-d-sidebar { fade(@nav-dark-selected, 0%) ); } + + &.sidebar-nav-item-container { + padding: 0; + } + + .sidebar-nav-item-container-trigger { + display: block; + padding-block: 10px; + padding-inline-end: 35px; + padding-inline-start: var(--padding-inline-start); + } + + .sidebar-nav-secondary-item { + padding-inline-start: calc(var(--padding-inline-start) + 20px); + } } + .sidebar-nav-secondary-link { display: block; font-size: 1rem; diff --git a/site/src/navigation/sidebar/sidebar.less b/site/src/navigation/sidebar/sidebar.less index bcfcc6d021..be9517578d 100644 --- a/site/src/navigation/sidebar/sidebar.less +++ b/site/src/navigation/sidebar/sidebar.less @@ -41,7 +41,7 @@ esl-d-sidebar { width: 20rem; } @media @md-xl { - width: 16.875rem; + width: 18rem; } } @@ -69,7 +69,7 @@ esl-d-sidebar { &.open { max-width: 100vw; @media @md-xl { - max-width: 16.875rem; + max-width: 18rem; } } diff --git a/site/views/_includes/navigation/footer-menu.njk b/site/views/_includes/navigation/footer-menu.njk index 3196f6f689..d62cd6602b 100644 --- a/site/views/_includes/navigation/footer-menu.njk +++ b/site/views/_includes/navigation/footer-menu.njk @@ -8,7 +8,7 @@ close-on-esc>