fix: fix visibility on mobile layout

* fix visibility on mobile layout
* change keyboard shortcut
* change css property

package.json

@@ -17,7 +17,6 @@
     "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest"
   },
   "dependencies": {
-    "@codexteam/shortcuts": "^1.1.1",
     "config": "^3.3.6",
     "cookie-parser": "^1.4.5",
     "csurf": "^1.11.0",

src/frontend/js/modules/sidebar.js

@@ -1,5 +1,4 @@
 import { Storage } from '../utils/storage';
-import Shortcut from '@codexteam/shortcuts';
 
 /**
  * Local storage key
@@ -64,7 +63,8 @@ export default class Sidebar {
     this.sidebarVisibilityStorage = new Storage(SIDEBAR_VISIBILITY_KEY);
     const storedVisibility = this.sidebarVisibilityStorage.get();
 
-    this.visibility = storedVisibility !== 'false';
+    this.isVisible = storedVisibility !== 'false';
+    this.keys = {};
   }
 
   /**
@@ -189,22 +189,37 @@ export default class Sidebar {
    * @returns {void}
    */
   initSidebar() {
-    if (!this.visibility) {
+    if (!this.isVisible) {
-      this.nodes.slider.classList.add(Sidebar.CSS.sidebarSliderHidden);
       this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarCollapsed);
     }
 
-    // prevent sidebar animation on page load
+    /**
+     * prevent sidebar animation on page load
+     * Since animated class contains transition, hiding will be animated with it
+     * To prevent awkward animation when visibility is set to false, we need to remove animated class
+     */
     setTimeout(() => {
       this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarAnimated);
     }, 200);
 
-    // add shortcut to slide sidebar
+    // add event listener to execute keyboard shortcut
-    const shortcutForSlider = new Shortcut({
+    document.body.addEventListener('keydown', (e) => this.executeSlide(e), false);
-      name: 'CMD+SHIFT+S',
+    document.body.addEventListener('keyup', (e) => this.executeSlide(e), false);
-      on: document.body,
+  }
-      callback: () => this.handleSliderClick(),
+
-    });
+  /**
+   * @param {KeyboardEvent} event - keydown event
+   * @returns {void}
+   */
+  executeSlide(event) {
+    this.keys[event.key.toLowerCase()] = event.type === 'keydown';
+
+    /**
+     * Execute slide when ctrl + . is pressed
+     */
+    if (this.keys['control'] && this.keys['.']) {
+      this.handleSliderClick();
+    }
   }
 
   /**
@@ -213,8 +228,8 @@ export default class Sidebar {
    * @returns {void}
    */
   handleSliderClick() {
-    this.visibility = !this.visibility;
+    this.isVisible = !this.isVisible;
-    this.sidebarVisibilityStorage.set(this.visibility);
+    this.sidebarVisibilityStorage.set(this.isVisible);
     this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarCollapsed);
   }
 

src/frontend/styles/components/sidebar.pcss

@@ -4,24 +4,24 @@
   &--animated {
     .docs-sidebar__content {
       transition: transform 200ms ease-in-out;
+      will-change: transform;
     }
 
     .docs-sidebar__slider {
-      transition: left 200ms ease-in-out;
-
-      svg {
       transition: transform 200ms ease-in-out;
-      }
+      will-change: transform;
     }
   }
 
   &--collapsed {
+    @media (--desktop) {
       .docs-sidebar__content {
         transform: translateX(-100%);
       }
+    }
 
     .docs-sidebar__slider {
-      left: 20px;
+      transform: translateX(20px);
 
       svg {
         transform: rotate(180deg);
@@ -219,7 +219,7 @@
   &__slider {
     display: none;
     position: fixed;
-    left: calc(var(--layout-sidebar-width) + 20px);
+    transform: translateX(calc(var(--layout-sidebar-width) + 20px));
     bottom: 20px;
     width: 32px;
     height: 32px;

yarn.lock

@@ -907,11 +907,6 @@
   resolved "https://registry.yarnpkg.com/@codexteam/misprints/-/misprints-1.0.0.tgz#e5a7dec7389fe0f176cd51a040d6dc9bdc252086"
   integrity sha512-R2IO1JmcaWCuWNPFVEAyar2HqQFuJwkeQUyVF0ovY4ip7z+VnVTYWxeYhCx7eZYEQCyXmcJooICQDihtn16lOA==
 
-"@codexteam/shortcuts@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@codexteam/shortcuts/-/shortcuts-1.1.1.tgz#6aa19ed0476da78045847ddc6d5b311f2f015094"
-  integrity sha512-wtpYocFlFQSOiea3KAySn9ONno/yKL4JukokV0vJUq1BOUmVEx71sdTW7qgQhG1wcfIO2R/XJ/y4K9EZQyBzng==
-
 "@cspotcode/source-map-consumer@0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz#33bf4b7b39c178821606f669bbc447a6a629786b"