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

Fix animation

Browse source
This commit is contained in:
Tanya Fomina 2022-06-10 16:11:30 +08:00
parent 6cc2d22e45
commit a91faf358b
2 changed files with 25 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,12 @@ import { Storage } from '../utils/storage';
*/ */
const LOCAL_STORAGE_KEY = 'docs_sidebar_state'; const LOCAL_STORAGE_KEY = 'docs_sidebar_state';
/**
* Section list item height in px
*/
const ITEM_HEIGHT = 31;
/** /**
* Sidebar module * Sidebar module
*/ */
@ -85,6 +91,19 @@ export default class Sidebar {
if (this.sectionsState[id]) { if (this.sectionsState[id]) {
this.setSectionCollapsed(section, true, false); this.setSectionCollapsed(section, true, false);
} }
/**
* Calculate and set sections list max height for smooth animation
*/
const sectionList = section.querySelector('.' + Sidebar.CSS.sectionList);
if (!sectionList) {
return;
}
const itemsCount = sectionList.children.length;
sectionList.style.maxHeight = `${ itemsCount * ITEM_HEIGHT }px`;
} }
/** /**

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

@ -1,14 +1,16 @@
.docs-sidebar { .docs-sidebar {
width: 100vw; --sidebar-width: 100vw;
width: var(--sidebar-width);
@media (--desktop) { @media (--desktop) {
width: 344px; --sidebar-width: 344px;
} }
&__content { &__content {
border-bottom: 1px solid var(--color-line-gray); border-bottom: 1px solid var(--color-line-gray);
box-sizing: border-box; box-sizing: border-box;
padding: 30px 22px; padding: var(--layout-padding-vertical) 22px;
position: sticky; position: sticky;
top: var(--layout-height-header); top: var(--layout-height-header);
display: flex; display: flex;
@ -46,7 +48,7 @@
&--collapsed { &--collapsed {
.docs-sidebar__section-list { .docs-sidebar__section-list {
max-height: 0; max-height: 0 !important;
} }
.docs-sidebar__section-toggler { .docs-sidebar__section-toggler {
@ -127,7 +129,6 @@
margin: 0; margin: 0;
z-index: 1; z-index: 1;
position: relative; position: relative;
max-height: 1000px;
} }
&__section-toggler { &__section-toggler {