Add logo

src/backend/views/components/sidebar.twig

@@ -38,5 +38,17 @@
         {% endif %}
       </section>
     {% endfor %}
+
+    <div class="docs-sidebar__logo">
+        <a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs">
+          <div class="docs-sidebar__logo-image">
+            {{ svg('aside-logo') }}
+          </div>
+          <div class="docs-sidebar__logo-caption">
+            <span>Powered by CodeX Docs</span>
+          </div>
+        </a>
+    </div>
+
   </aside>
 </div>

src/frontend/styles/components/sidebar.pcss

@@ -4,11 +4,15 @@
   padding: 30px 22px;
   position: sticky;
   top: var(--layout-height-header);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 
   @media (--desktop) {
     height: calc(100vh - var(--layout-height-header));
     border-right: 1px solid var(--color-line-gray);
     border-bottom: 0;
+    padding-bottom: 0;
   }
 
   &__wrapper {
@@ -21,6 +25,7 @@
 
   &__section {
     overflow: hidden;
+    flex-shrink: 0;
 
     &--animated {
       .docs-sidebar__section-list {
@@ -78,8 +83,10 @@
 
   &__section-title:not(&__section-title--active),
   &__section-list-item:not(&__section-list-item--active) {
-    &:hover {
-      background: var(--color-link-hover);
+    @media (--can-hover) {
+      &:hover {
+        background: var(--color-link-hover);
+      }
     }
   }
 
@@ -137,4 +144,30 @@
       margin-right: 10px;
     }
   }
+
+  &__logo {
+    display: none;
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    background: white;
+    z-index: 2;
+    padding-bottom: 30px;
+    padding-top: 10px;
+
+    @media (--desktop) {
+      display: block;
+    }
+
+    &-image{
+      display: inline-flex;
+    }
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+    }
+  }
+
 }

src/frontend/styles/vars.pcss

@@ -89,3 +89,4 @@
 @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
 @custom-media --mobile all and (max-width: 980px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
+@custom-media --can-hover all and (hover:hover)