From 6cd5d87dcc5784bc39563adc61bb2a38232e13f4 Mon Sep 17 00:00:00 2001
From: Yeokyung Yoon <zzzzz.co.kr@gmail.com>
Date: Thu, 21 Jul 2022 22:40:53 +0900
Subject: [PATCH] fix: fix visibility on mobile layout

* fix visibility on mobile layout
* change keyboard shortcut
* change css property
---
 package.json                                |  1 -
 src/frontend/js/modules/sidebar.js          | 41 ++++++++++++++-------
 src/frontend/styles/components/sidebar.pcss | 18 ++++-----
 yarn.lock                                   |  5 ---
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 59d6a45..d3d10df 100644
--- a/package.json
+++ b/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",
diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js
index f1194b8..3415c47 100644
--- a/src/frontend/js/modules/sidebar.js
+++ b/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) {
-      this.nodes.slider.classList.add(Sidebar.CSS.sidebarSliderHidden);
+    if (!this.isVisible) {
       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
-    const shortcutForSlider = new Shortcut({
-      name: 'CMD+SHIFT+S',
-      on: document.body,
-      callback: () => this.handleSliderClick(),
-    });
+    // add event listener to execute keyboard shortcut
+    document.body.addEventListener('keydown', (e) => this.executeSlide(e), false);
+    document.body.addEventListener('keyup', (e) => this.executeSlide(e), false);
+  }
+
+  /**
+   * @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.sidebarVisibilityStorage.set(this.visibility);
+    this.isVisible = !this.isVisible;
+    this.sidebarVisibilityStorage.set(this.isVisible);
     this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarCollapsed);
   }
 
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 77e04cf..1987f86 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/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;
-      }
+      transition: transform 200ms ease-in-out;
+      will-change: transform;
     }
   }
 
   &--collapsed {
-    .docs-sidebar__content {
-      transform: translateX(-100%);
+    @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;
diff --git a/yarn.lock b/yarn.lock
index 3be5259..c07636c 100644
--- a/yarn.lock
+++ b/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"