add the switching b/w the shortcut logo

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 %}

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();
   }
 

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 {