Fix: Sidebar logo

Fixes sidebar logo to be included again instead of empty space.

Author: robertjdominguez

src/css/custom.css

@@ -455,8 +455,8 @@ iframe {
   }
 }
 
-.theme-doc-sidebar-container [class^='sidebarLogo_'] {
   border-bottom: 1px solid var(--next-prev-border-color);
+  .theme-doc-sidebar-container [class^='sidebarLogo_'] {
   margin: 0;
 }
 
@@ -1493,6 +1493,7 @@ pre[class*='language-'] code span.token {
 /* Mobile Navigation */
 .navbar-sidebar {
   background-color: var(--main-bg-color);
+  z-index: 1000;
 }
 
 .navbar-sidebar__back {

src/theme/DocSidebar/CustomSidebar.css

@@ -3,7 +3,21 @@
   background-color: var(--sidebar-bg-color) !important;
   width: 100%;
   overflow-y: auto;
-  padding-top: 5rem;
+}
+
+.custom-sidebar__logo {
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  height: 5rem;
+  width: 100%;
+  text-align: center;
+}
+
+.custom-sidebar__logo svg {
+  max-height: 100%;
+  max-width: 80%;
+  object-fit: contain;
 }
 
 .custom-sidebar__content {

src/theme/DocSidebar/Desktop/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useLocation } from '@docusaurus/router';
+import { useColorMode } from '@docusaurus/theme-common';
 import type { PropSidebarItem } from '@docusaurus/plugin-content-docs';
 import Link from '@docusaurus/Link';
 import {
@@ -9,6 +10,9 @@ import {
   type Category,
 } from '../utils'; 
 import '../CustomSidebar.css'; 
+import LogoLight from '@site/static/img/pql-logo-large.svg';
+import LogoDark from '@site/static/img/pql-logo-large-dark-mode.svg';
+
 
 interface ContentProps {
   path: string;
@@ -17,6 +21,7 @@ interface ContentProps {
 
 export default function Content({ sidebar }: ContentProps) {
   const location = useLocation();
+  const { colorMode } = useColorMode();
   const categories: Category[] = buildCategories(sidebar);
 
   const renderSidebarItem = (item: PropSidebarItem): React.ReactElement => {
@@ -80,6 +85,11 @@ export default function Content({ sidebar }: ContentProps) {
       role="navigation"
       aria-label="Documentation sidebar"
     >
+      <div className="custom-sidebar__logo">
+        <Link to="/index">
+           {colorMode === 'dark' ? <LogoDark /> : <LogoLight />}
+        </Link>
+      </div>
       <div className="custom-sidebar__content">
         {categories.map(renderCategory)}
       </div>