From 0d358457fbaf0785a5a3c00fab1aec40c85ca593 Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Fri, 22 Jul 2022 10:19:01 +0530
Subject: [PATCH] add the switching b/w the shortcut logo

---
 src/backend/views/components/sidebar.twig   |  2 +-
 src/frontend/js/modules/sidebar.js          | 11 +++++++++++
 src/frontend/styles/components/sidebar.pcss | 14 +++++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index b42f732..63dc01a 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 class="docs-sidebar__search-wrapper">
+    <span>
 	    <input class="docs-sidebar__search" type="text" placeholder="Search">
 	  </span>
     {% for firstLevelPage in menu %}
diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js
index dcb6d60..8f16a04 100644
--- a/src/frontend/js/modules/sidebar.js
+++ b/src/frontend/js/modules/sidebar.js
@@ -34,6 +34,7 @@ export default class Sidebar {
       sidebarContent: 'docs-sidebar__content',
       sidebarContentHidden: 'docs-sidebar__content--hidden',
       sidebarContentInvisible: 'docs-sidebar__content--invisible',
+      sidebarSearch: 'docs-sidebar__search',
     };
   }
 
@@ -67,6 +68,16 @@ export default class Sidebar {
     this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
     this.nodes.toggler = moduleEl.querySelector('.' + Sidebar.CSS.sidebarToggler);
     this.nodes.toggler.addEventListener('click', () => this.toggleSidebar());
+
+    let className =  Sidebar.CSS.sidebarSearch+'-wrapper-';
+
+    if (window.navigator.userAgent.indexOf('Mac') != -1) {
+      className += 'mac';
+    } else {
+      className += 'other';
+    }
+
+    moduleEl.querySelector('.' + Sidebar.CSS.sidebarSearch).parentElement.classList.add(className);
     this.ready();
   }
 
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 59fca35..7de7c31 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -42,7 +42,7 @@
     padding: 8px 35px;
     padding-right: 45px;
 
-    &-wrapper::after {
+    &-wrapper-mac::after {
       color: var(--color-button-secondary);
       font-weight: 400;
       font-size: 14px;
@@ -50,6 +50,18 @@
       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";
+      margin-left: -60px;
+    }
+    /* &-wrapper:focus-within::after {
+      content: "";
+    } */
   }
 
   &__section {