From 5ff587a8afa74314306f12baeb87904ce5e78955 Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Wed, 12 Oct 2022 20:01:22 +0530
Subject: [PATCH] shortcut logic updated

---
 src/backend/views/components/sidebar.twig   |  2 +-
 src/frontend/js/classes/sidebar-filter.js   | 11 +++++------
 src/frontend/styles/components/sidebar.pcss | 13 ++-----------
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index 83be67c..6a2c0f7 100644
--- a/src/backend/views/components/sidebar.twig
+++ b/src/backend/views/components/sidebar.twig
@@ -6,7 +6,7 @@
   </div>
 
   <aside class="docs-sidebar__content docs-sidebar__content--invisible">
-    <span>
+    <span class="docs-sidebar__search-wrapper">
 	    <input class="docs-sidebar__search" type="text" placeholder="Search" />
 	  </span>
     {% for firstLevelPage in menu %}
diff --git a/src/frontend/js/classes/sidebar-filter.js b/src/frontend/js/classes/sidebar-filter.js
index dbd383f..1d14a9b 100644
--- a/src/frontend/js/classes/sidebar-filter.js
+++ b/src/frontend/js/classes/sidebar-filter.js
@@ -23,8 +23,7 @@ export default class SidebarFilter {
       sectionListItem: 'docs-sidebar__section-list-item',
       sectionListItemWrapperHidden: 'docs-sidebar__section-list-item-wrapper--hidden',
       sectionListItemSlelected: 'docs-sidebar__section-list-item--selected',
-      sidebarSearchWrapperMac: 'docs-sidebar__search-wrapper-mac',
-      sidebarSearchWrapperOther: 'docs-sidebar__search-wrapper-other',
+      sidebarSearchWrapper: 'docs-sidebar__search-wrapper',
     };
   }
 
@@ -57,13 +56,13 @@ export default class SidebarFilter {
     this.sidebarContent = sidebarContent;
     this.search = search;
     this.setSectionCollapsed = setSectionCollapsed;
-    let className = SidebarFilter.CSS.sidebarSearchWrapperOther;
+    let shortcutText = 'Ctrl P';
 
     // Search initialize with platform specific shortcut.
-    if (window.navigator.userAgent.indexOf('Mac') != -1) {
-      className = SidebarFilter.CSS.sidebarSearchWrapperMac;
+    if (window.navigator.userAgent.indexOf('Mac') !== -1) {
+      shortcutText = '⌘ P';
     }
-    this.search.parentElement.classList.add(className);
+    this.search.parentElement.setAttribute('data-shortcut', shortcutText);
 
     // Initialize search input.
     this.search.value = '';
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 7bede16..3e072d1 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -85,21 +85,12 @@
     padding-right: 45px;
     line-height: 21px;
 
-    &-wrapper-mac::after {
+    &-wrapper::after {
       color: var(--color-button-secondary);
       font-weight: 400;
       font-size: 14px;
       line-height: 17px;
-      content: "⌘ P";
-      margin-left: -50px;
-    }
-
-    &-wrapper-other::after {
-      color: var(--color-button-secondary);
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 17px;
-      content: "Ctrl P";
+      content: attr(data-shortcut);
       margin-left: -50px;
     }
   }