From 52dfbf37e945c10ede6f4f57cfb37ca3e5dfb5fd Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Thu, 9 Jun 2022 20:53:53 +0800 Subject: [PATCH] Mobile layout --- src/backend/views/components/sidebar.twig | 71 +++++++++++---------- src/frontend/js/modules/sidebar.js | 27 ++++++-- src/frontend/styles/components/sidebar.pcss | 38 ++++++++++- src/frontend/styles/layout.pcss | 20 +----- 4 files changed, 99 insertions(+), 57 deletions(-) diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig index 61b0e55..f76d707 100644 --- a/src/backend/views/components/sidebar.twig +++ b/src/backend/views/components/sidebar.twig @@ -1,35 +1,42 @@ {% set mainClass = 'docs-sidebar' %} - \ No newline at end of file +
+ +
+ {{ svg('menu') }} Table of contents +
+ + +
diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js index 3f837fe..f6cadb2 100644 --- a/src/frontend/js/modules/sidebar.js +++ b/src/frontend/js/modules/sidebar.js @@ -23,6 +23,9 @@ export default class Sidebar { sectionList: 'docs-sidebar__section-list', sectionListCollapsed: 'docs-sidebar__section-list--collapsed', sectionListItemActive: 'docs-sidebar__section-list-item--active', + sidebarToggler: 'docs-sidebar__toggler', + sidebar: 'docs-sidebar', + sidebarHidden: 'docs-sidebar--hidden', }; } @@ -30,9 +33,7 @@ export default class Sidebar { * Creates base properties */ constructor() { - this.nodes = { - section: null, - }; + this.nodes = {}; const storedState = window.localStorage.getItem(LOCAL_STORAGE_KEY); this.collapsed = storedState ? JSON.parse(storedState) : {}; @@ -50,7 +51,11 @@ export default class Sidebar { const id = section.getAttribute('data-id'); const togglerEl = section.querySelector('.' + Sidebar.CSS.toggler); - togglerEl.addEventListener('click', e => this.handleTogglerClick(id, section, togglerEl, e)); + if (!togglerEl) { + return; + } + + togglerEl.addEventListener('click', e => this.handleSectionTogglerClick(id, section, togglerEl, e)); if (typeof this.collapsed[id] === 'undefined') { this.collapsed[id] = false; @@ -59,6 +64,9 @@ export default class Sidebar { this.setSectionCollapsed(section, togglerEl, true, false); } }); + this.nodes.sidebar = moduleEl.querySelector('.' + Sidebar.CSS.sidebar); + this.nodes.toggler = moduleEl.querySelector('.' + Sidebar.CSS.sidebarToggler); + this.nodes.toggler.addEventListener('click', () => this.toggleSidebar()); } /** @@ -70,7 +78,7 @@ export default class Sidebar { * @param {MouseEvent} event - click event * @returns {void} */ - handleTogglerClick(sectionId, sectionEl, togglerEl, event) { + handleSectionTogglerClick(sectionId, sectionEl, togglerEl, event) { event.preventDefault(); this.collapsed[sectionId] = !this.collapsed[sectionId]; window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed)); @@ -112,4 +120,13 @@ export default class Sidebar { sectionTitle.classList.toggle(Sidebar.CSS.sectionTitleActive, collapsed); } } + + /** + * Toggles sidebar visibility + * + * @returns {void} + */ + toggleSidebar() { + this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarHidden); + } } diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss index 766fa0f..eb6d328 100644 --- a/src/frontend/styles/components/sidebar.pcss +++ b/src/frontend/styles/components/sidebar.pcss @@ -1,12 +1,24 @@ .docs-sidebar { - width: 344px; - border-right: 1px solid var(--color-line-gray); + border-bottom: 1px solid var(--color-line-gray); box-sizing: border-box; padding: 30px 22px; - height: calc(100vh - var(--layout-height-header)); position: sticky; top: var(--layout-height-header); + @media (--desktop) { + height: calc(100vh - var(--layout-height-header)); + border-right: 1px solid var(--color-line-gray); + border-bottom: 0; + } + + &__wrapper { + width: 100vw; + + @media (--desktop) { + width: 344px; + } + } + &__section { overflow: hidden; @@ -105,4 +117,24 @@ transform: rotate(180deg); } } + + &--hidden { + display: none; + } + + &__toggler { + font-size: 13px; + cursor: pointer; + color: var(--color-text-second); + padding: 20px 15px; + border-bottom: 1px solid var(--color-line-gray); + + @media (--desktop) { + display: none; + } + + svg { + margin-right: 10px; + } + } } \ No newline at end of file diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss index e06db78..ca89c3f 100644 --- a/src/frontend/styles/layout.pcss +++ b/src/frontend/styles/layout.pcss @@ -1,21 +1,8 @@ .docs { - display: flex; min-height: calc(100vh - var(--layout-height-header)); - @media (--mobile) { - flex-wrap: wrap; - } - - &__aside { - width: var(--layout-width-aside); - - @media (--mobile) { - width: 100%; - flex-basis: 100%; - padding: 20px var(--layout-padding-horizontal) !important; - margin: 0 calc(-1 * var(--layout-padding-horizontal)); - border-bottom: 1px solid var(--color-line-gray); - } + @media (--desktop) { + display: flex; } &__content { @@ -34,12 +21,11 @@ } } - &__aside, &__content { padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); @media (--mobile) { - padding: 20px 0; + padding: 20px var(--layout-padding-horizontal); } } }