Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-09 07:25:21 +02:00
Code Issues Releases Activity

Simplify css

Browse source
This commit is contained in:
Tanya Fomina 2022-06-10 15:37:09 +08:00
parent 14297ed852
commit 92e62158b1
2 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/frontend/js/modules/sidebar.js
View file

@ -15,13 +15,12 @@ export default class Sidebar {
static get CSS() {
return {
toggler: 'docs-sidebar__section-toggler',
togglerCollapsed: 'docs-sidebar__section-toggler--collapsed',
section: 'docs-sidebar__section',
sectionCollapsed: 'docs-sidebar__section--collapsed',
sectionAnimated: 'docs-sidebar__section--animated',
sectionTitle: 'docs-sidebar__section-title',
sectionTitleActive: 'docs-sidebar__section-title--active',
sectionList: 'docs-sidebar__section-list',
sectionListCollapsed: 'docs-sidebar__section-list--collapsed',
sectionListItemActive: 'docs-sidebar__section-list-item--active',
sidebarToggler: 'docs-sidebar__toggler',
sidebarContent: 'docs-sidebar__content',
@ -61,7 +60,7 @@ export default class Sidebar {
this.collapsed[id] = false;
}
if (this.collapsed[id]) {
this.setSectionCollapsed(section, togglerEl, true, false);
this.setSectionCollapsed(section, true, false);
}
});
this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
@ -83,7 +82,7 @@ export default class Sidebar {
event.preventDefault();
this.collapsed[sectionId] = !this.collapsed[sectionId];
window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed));
this.setSectionCollapsed(sectionEl, togglerEl, this.collapsed[sectionId]);
this.setSectionCollapsed(sectionEl, this.collapsed[sectionId]);
}
/**
@ -92,17 +91,16 @@ export default class Sidebar {
* @param {HTMLElement} sectionEl - element of the section to toggle
* @param {HTMLElement} togglerEl - section's toggler button element
* @param {boolean} collapsed - new collapsed state
* @param {boolean} animated - true if state should change with animation
* @param {boolean} [animated] - true if state should change with animation
*/
setSectionCollapsed(sectionEl, togglerEl, collapsed, animated = true) {
togglerEl.classList.toggle(Sidebar.CSS.togglerCollapsed, collapsed);
setSectionCollapsed(sectionEl, collapsed, animated = true) {
const sectionList = sectionEl.querySelector('.' + Sidebar.CSS.sectionList);
if (!sectionList) {
return;
}
sectionEl.classList.toggle(Sidebar.CSS.sectionAnimated, animated);
sectionList.classList.toggle(Sidebar.CSS.sectionListCollapsed, collapsed);
sectionEl.classList.toggle(Sidebar.CSS.sectionCollapsed, collapsed);
/**
* Highlight section item as active if active child item is collapsed.

22
src/frontend/styles/components/sidebar.pcss
View file

@ -43,6 +43,18 @@
}
}
}
&--collapsed {
.docs-sidebar__section-list {
max-height: 0;
}
.docs-sidebar__section-toggler {
svg {
transform: rotate(180deg);
}
}
}
}
&__section:not(:first-child) {
@ -116,10 +128,6 @@
z-index: 1;
position: relative;
max-height: 1000px;
&--collapsed {
max-height: 0;
}
}
&__section-toggler {
@ -144,12 +152,6 @@
svg {
display: block;
}
&--collapsed {
svg {
transform: rotate(180deg);
}
}
}