Sidebar redesign #200

TatianaFomina · 2022-06-09T15:08:28Z

Updates docs sidebar styles. Top level pages become collapsable, collapsed sections state is saved between page reloads.

talyguryn · 2022-06-09T15:12:57Z

i don't like this fixed footer. a little bit annoying

talyguryn · 2022-06-09T15:13:17Z

add an issue to pr please. #174?

talyguryn · 2022-06-09T15:15:15Z

maybe it will be better if the section with current page will be opened by default on page loading?

also i'd like to see opened section with subpages if i click on parent page.

neSpecc · 2022-06-09T15:23:41Z

These buttons should have hover-styles

I've updated the Figma file

neSpecc · 2022-06-09T15:36:31Z

src/frontend/js/modules/sidebar.js

+   */
+  init(settings, moduleEl) {
+    this.nodes.sections = Array.from(moduleEl.querySelectorAll('.' + Sidebar.CSS.section));
+    this.nodes.sections.forEach(section => {


pls, move the handler to the separate method

neSpecc · 2022-06-09T15:43:51Z

src/frontend/js/modules/sidebar.js

+  handleSectionTogglerClick(sectionId, sectionEl, togglerEl, event) {
+    event.preventDefault();
+    this.collapsed[sectionId] = !this.collapsed[sectionId];
+    window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed));


pls, move the methods for working with the storage to the separate utility class,

like this (rough example):

class Storage { constructor(prefix){ } setItem(name, value){} getItem(name){} } class SidebarStorage extends Storage { constructor(){ super('sidebar-state') this.keyName = 'sections-collapsed' } set(value){ super.setItem(this.keyName, value) } get(){ return super.getItem(this.keyName) } }

neSpecc · 2022-06-09T15:44:02Z

src/frontend/js/modules/sidebar.js

+   * @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


Suggested change

* @param {boolean} animated - true if state should change with animation

* @param {boolean} [animated] - true if state should change with animation

neSpecc · 2022-06-09T15:46:41Z

src/frontend/js/modules/sidebar.js

+   * @param {boolean} animated - true if state should change with animation
+   */
+  setSectionCollapsed(sectionEl, togglerEl, collapsed, animated = true) {
+    togglerEl.classList.toggle(Sidebar.CSS.togglerCollapsed, collapsed);


why not use the parent collapsed class at the CSS?

.section--collapsed .toggler {}

src/frontend/js/modules/sidebar.js

neSpecc · 2022-06-09T15:49:35Z

src/frontend/styles/components/sidebar.pcss

+.docs-sidebar {
+  border-bottom: 1px solid var(--color-line-gray);
+  box-sizing: border-box;
+  padding: 30px 22px;


--layout-padding-vertical
--layout-padding-horizontal

--layout-padding-horizontal is 16px now

neSpecc · 2022-06-09T15:50:02Z

src/frontend/styles/components/sidebar.pcss

+    width: 100vw;
+
+    @media (--desktop) {
+      width: 344px;


use variable please

neSpecc · 2022-06-09T15:50:57Z

src/frontend/styles/components/sidebar.pcss

+    margin: 0;
+    z-index: 1;
+    position: relative;
+    max-height: 1000px;


add will-change: max-height please

neSpecc · 2022-06-09T15:51:14Z

src/frontend/styles/components/sidebar.pcss

+    margin: 0;
+    z-index: 1;
+    position: relative;
+    max-height: 1000px;


why there is a 1000px hardcoded?

neSpecc · 2022-06-10T05:03:17Z

src/backend/views/components/sidebar.twig

+
+{% set mainClass = 'docs-sidebar' %}
+
+<div data-module="sidebar" class="{{mainClass}}__wrapper">


Wrong usage of BEM: Element should not include its Block

<docs-sidebar__wrapper> <docs-sidebar/> </docs-sidebar>

The Block should include Elements instead

<docs-sidebar> <docs-sidebar__toggler/> <docs-sidebar__body/> </docs-sidebar>

neSpecc · 2022-06-10T05:05:15Z

src/backend/views/components/sidebar.twig

@@ -0,0 +1,54 @@
+
+{% set mainClass = 'docs-sidebar' %}


why do you need this variable if it's almost unused?

neSpecc · 2022-06-10T05:09:59Z

src/backend/views/components/sidebar.twig

+            {{ svg('aside-logo') }}
+          </div>
+          <div class="docs-sidebar__logo-caption">
+            <span>Powered by CodeX Docs</span>


span looks redundant

neSpecc · 2022-06-10T05:15:39Z

src/frontend/js/modules/sidebar.js

+   * Creates base properties
+   */
+  constructor() {
+    this.nodes = {};


Describe in jsdoc, please

neSpecc · 2022-06-10T05:15:50Z

src/frontend/js/modules/sidebar.js

+    this.nodes = {};
+    const storedState = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+
+    this.collapsed = storedState ? JSON.parse(storedState) : {};


maybe we can pick up a more understandable name?

neSpecc · 2022-06-10T05:19:08Z

src/frontend/js/modules/sidebar.js

+  init(settings, moduleEl) {
+    this.nodes.sections = Array.from(moduleEl.querySelectorAll('.' + Sidebar.CSS.section));
+    this.nodes.sections.forEach(section => {
+      const id = section.getAttribute('data-id');


Suggested change

const id = section.getAttribute('data-id');

const id = section.dataset.id;

neSpecc · 2022-06-10T05:25:43Z

src/frontend/styles/vars.pcss

@@ -70,6 +72,13 @@
      background: color-mod(var(--color-link-active) blackness(+10%));
    }
  }
+
+  --squircle {


TatianaFomina · 2022-06-10T13:10:48Z

@talyguryn

maybe it will be better if the section with current page will be opened by default on page loading?

if we implement the change you suggest there's going to be strange behaviour when you collapse current section and reload page - section will expand again. I have no idea how to resolve this, so, I suggest not doing this change now

talyguryn · 2022-06-10T13:14:09Z

@talyguryn

maybe it will be better if the section with current page will be opened by default on page loading?

if we implement the change you suggest there's going to be strange behaviour when you collapse current section and reload page - section will expand again. I have no idea how to resolve this, so, I suggest not doing this change now

i don't know why i may need to use site with all collapsed sections. anyway it is just an idea

nikmel2803

works cool 👍

neSpecc · 2022-06-16T09:00:28Z

src/frontend/styles/vars.pcss

@@ -27,10 +27,12 @@
  --layout-padding-vertical: 30px;
  --layout-width-aside: 300px;


is this variable still actual?

neSpecc · 2022-06-16T09:01:18Z

src/frontend/styles/components/sidebar.pcss

+  width: var(--sidebar-width);
+
+  @media (--desktop) {
+    --sidebar-width: 344px;


maybe it would be better to move it to the vars.pcss under the --layout-sidebar-width?

neSpecc · 2022-06-16T09:03:34Z

src/frontend/styles/components/sidebar.pcss

+  &__content {
+    border-bottom: 1px solid var(--color-line-gray);
+    box-sizing: border-box;
+    padding: var(--layout-padding-vertical) 22px;


use the --layout-padding-horizontal please, and update its value to 22

TatianaFomina added 10 commits June 6, 2022 20:31

New sidebar

33e02db

Save state to local storage

42d0a36

Make sidebar sticky

d2ecb70

Text overflow

f04a452

Fix add page button on mobile

c43d7f0

Mobile layout

52dfbf3

Display sidebar when ready

e90705f

Add logo

4f0f985

Remove files

0f070d9

Fix margin

e471a18

TatianaFomina requested review from neSpecc, talyguryn, nikmel2803 and Y-k-Y June 9, 2022 15:08

TatianaFomina linked an issue Jun 9, 2022 that may be closed by this pull request

ui: update the sidebar styles #173

Closed

Update logo padding-bottom

f8ef4d1

TatianaFomina added 2 commits June 9, 2022 23:35

Hovers

596ae13

Decrease logo's font size

f31858a

neSpecc requested changes Jun 9, 2022

View reviewed changes

Make logo not sticky

9436e33

neSpecc reviewed Jun 10, 2022

View reviewed changes

TatianaFomina added 5 commits June 10, 2022 15:17

Cleanup classnames

14297ed

Simplify css

92e6215

Update sidebar module

6cc2d22

Fix animation

a91faf3

Fix cursor issue

b6f481e

TatianaFomina requested a review from neSpecc June 10, 2022 13:11

nikmel2803 approved these changes Jun 15, 2022

View reviewed changes

talyguryn approved these changes Jun 15, 2022

View reviewed changes

neSpecc reviewed Jun 16, 2022

View reviewed changes

Fix vars and logo paddings

1c568fb

neSpecc approved these changes Jun 16, 2022

View reviewed changes

TatianaFomina merged commit 30d9690 into main Jun 16, 2022

TatianaFomina deleted the sidebar-update branch June 16, 2022 13:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sidebar redesign #200

Sidebar redesign #200

TatianaFomina commented Jun 9, 2022

talyguryn commented Jun 9, 2022

talyguryn commented Jun 9, 2022

talyguryn commented Jun 9, 2022

neSpecc commented Jun 9, 2022

neSpecc Jun 9, 2022

neSpecc Jun 9, 2022

neSpecc Jun 9, 2022

neSpecc Jun 9, 2022

neSpecc Jun 9, 2022

TatianaFomina Jun 10, 2022 •

edited

Loading

neSpecc Jun 9, 2022

neSpecc Jun 9, 2022

neSpecc Jun 9, 2022

neSpecc Jun 10, 2022

neSpecc Jun 10, 2022 •

edited

Loading

neSpecc Jun 10, 2022

neSpecc Jun 10, 2022

neSpecc Jun 10, 2022

neSpecc Jun 10, 2022

neSpecc Jun 10, 2022

neSpecc Jun 10, 2022

TatianaFomina commented Jun 10, 2022

talyguryn commented Jun 10, 2022

nikmel2803 left a comment

neSpecc Jun 16, 2022

neSpecc Jun 16, 2022

neSpecc Jun 16, 2022

	* @param {boolean} animated - true if state should change with animation
	* @param {boolean} [animated] - true if state should change with animation


		{% set mainClass = 'docs-sidebar' %}

		<div data-module="sidebar" class="{{mainClass}}__wrapper">

	const id = section.getAttribute('data-id');
	const id = section.dataset.id;

		@@ -27,10 +27,12 @@
		--layout-padding-vertical: 30px;
		--layout-width-aside: 300px;

Sidebar redesign #200

Sidebar redesign #200

Conversation

TatianaFomina commented Jun 9, 2022

talyguryn commented Jun 9, 2022

talyguryn commented Jun 9, 2022

talyguryn commented Jun 9, 2022

neSpecc commented Jun 9, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TatianaFomina Jun 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neSpecc Jun 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TatianaFomina commented Jun 10, 2022

talyguryn commented Jun 10, 2022

nikmel2803 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TatianaFomina Jun 10, 2022 •

edited

Loading

neSpecc Jun 10, 2022 •

edited

Loading