the background content added

src/backend/views/components/sidebar.twig

@@ -1,15 +1,19 @@
+
 <div data-module="sidebar" class="docs-sidebar">
 
   <div class="docs-sidebar__toggler">
-		{{ svg('menu') }}
+    {{ svg('menu') }} Table of contents
-		Table of contents
   </div>
 
   <aside class="docs-sidebar__content docs-sidebar__content--invisible">
-		<input class="docs-sidebar__search">
+    <span class="docs-sidebar__search-wrapper">
+	    <input class="docs-sidebar__search" type="text" placeholder="Search">
+	  </span>
     {% for firstLevelPage in menu %}
       <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
-				<a class="docs-sidebar__section-title-wrapper" href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}">
+        <a class="docs-sidebar__section-title-wrapper"
+          href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
+        >
         <div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
           <span>
             {{ firstLevelPage.title | striptags }}
@@ -25,7 +29,9 @@
           <ul class="docs-sidebar__section-list">
             {% for child in firstLevelPage.children %}
               <li>
-								<a class="docs-sidebar__section-list-item-wrapper" href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
+                <a
+                  class="docs-sidebar__section-list-item-wrapper"
+                  href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
                     <div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}">
                       <span>{{ child.title | striptags }}</span>
                     </div>

src/frontend/styles/components/sidebar.pcss

@@ -32,15 +32,24 @@
   }
 
   &__search {
-    height: 34px;
+    @apply --input;
+
     appearance: none;
-    background: url("../svg/search.svg") left 10px center no-repeat,
+    background: url("../svg/search.svg") left 10px center no-repeat;
-      url("../svg/shortcut.svg") right 10px center no-repeat;
     background-color: var(--color-input-primary);
     border: 1px solid transparent;
     border-radius: 8px;
     padding: 8px 35px;
     padding-right: 45px;
+
+    &-wrapper::after {
+      color: var(--color-button-secondary);
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 17px;
+      content: "⌘ P";
+      margin-left: -50px;
+    }
   }
 
   &__section {

src/frontend/svg/shortcut.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.856 10.5C4.424 10.5 4.928 9.52 4.928 8.344V7.182H6.468V8.344C6.468 9.52 6.972 10.5 8.54 10.5C9.842 10.5 10.682 9.674 10.682 8.386C10.682 7.028 9.87 6.23 8.274 6.23H7.448V4.69H8.274C9.87 4.69 10.682 3.892 10.682 2.534C10.682 1.246 9.842 0.42 8.54 0.42C6.972 0.42 6.468 1.4 6.468 2.576V3.738H4.928V2.576C4.928 1.4 4.424 0.42 2.856 0.42C1.554 0.42 0.714 1.246 0.714 2.534C0.714 3.892 1.526 4.69 3.122 4.69H3.948V6.23H3.122C1.526 6.23 0.714 7.028 0.714 8.386C0.714 9.674 1.554 10.5 2.856 10.5ZM7.448 2.548C7.448 1.834 7.812 1.386 8.54 1.386C9.198 1.386 9.688 1.708 9.688 2.534C9.688 3.332 9.268 3.738 8.274 3.738H7.448V2.548ZM3.122 3.738C2.128 3.738 1.708 3.332 1.708 2.534C1.708 1.708 2.198 1.386 2.856 1.386C3.584 1.386 3.948 1.834 3.948 2.548V3.738H3.122ZM4.928 6.23V4.69H6.468V6.23H4.928ZM2.856 9.534C2.198 9.534 1.708 9.212 1.708 8.386C1.708 7.588 2.128 7.182 3.122 7.182H3.948V8.372C3.948 9.086 3.584 9.534 2.856 9.534ZM7.448 8.372V7.182H8.274C9.268 7.182 9.688 7.588 9.688 8.386C9.688 9.212 9.198 9.534 8.54 9.534C7.812 9.534 7.448 9.086 7.448 8.372ZM16.3313 0.635742V10.5H17.5618V6.97949H20.0432C21.8958 6.97949 23.2151 5.67383 23.2151 3.82812C23.2151 1.94824 21.9231 0.635742 20.0569 0.635742H16.3313ZM17.5618 1.72949H19.7356C21.1643 1.72949 21.9505 2.47461 21.9505 3.82812C21.9505 5.13379 21.137 5.88574 19.7356 5.88574H17.5618V1.72949Z" fill="#717682"/>
-</svg>