swizzle desktop sidebar

Author: alexandratran

docusaurus.config.js

@@ -257,12 +257,6 @@ const config = {
             label: "What's new?",
             position: 'right',
           },
-          {
-            type: "docsVersionDropdown",
-            position: "right",
-            docsPluginId: "gator",
-            dropdownActiveClassDisabled: true,
-          },
           {
             type: 'custom-navbarWallet',
             position: 'right',

src/theme/DocSidebar/Desktop/Content/index.tsx

@@ -0,0 +1,24 @@
+import React, {type ReactNode} from 'react';
+import Content from '@theme-original/DocSidebar/Desktop/Content';
+import type ContentType from '@theme/DocSidebar/Desktop/Content';
+import type {WrapperProps} from '@docusaurus/types';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+import styles from './styles.module.css';
+
+type Props = WrapperProps<typeof ContentType>;
+
+export default function ContentWrapper(props: Props): ReactNode {
+  return (
+    <div className={styles.sidebarWithVersionDropdown}>
+      <div className={styles.versionDropdownContainer}>
+        <DocsVersionDropdownNavbarItem
+          docsPluginId="gator" // Use your plugin ID if different
+          dropdownActiveClassDisabled={false}
+          dropdownItemsBefore={[]}
+          dropdownItemsAfter={[]}
+        />
+      </div>
+      <Content {...props} />
+    </div>
+  );
+}

src/theme/DocSidebar/Desktop/Content/styles.module.css

@@ -0,0 +1,82 @@
+.sidebarWithVersionDropdown {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.versionDropdownContainer {
+  padding: 1.4rem 3.2rem 1.4rem 2.4rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Style adjustments for the dropdown in sidebar context */
+.versionDropdownContainer :global(.navbar__item) {
+  display: block;
+  padding: 0;
+}
+
+/* Ensure the dropdown button looks good in the sidebar */
+.versionDropdownContainer :global(.navbar__link) {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 1.7rem;
+  padding: 0.4rem 0;
+}
+
+/* Adjust the dropdown arrow position */
+.versionDropdownContainer :global(.navbar__link:after) {
+  margin-top: 1rem;
+}
+
+/* Style dropdown menu */
+.versionDropdownContainer :global(.dropdown__menu) {
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 0.5rem 0;
+}
+
+/* Style individual dropdown items */
+.versionDropdownContainer :global(.dropdown__link) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.8rem 1rem;
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+}
+
+/* Style the active dropdown item */
+.versionDropdownContainer :global(.dropdown__link--active) {
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-primary);
+}
+
+/* Style dropdown items on hover */
+.versionDropdownContainer :global(.dropdown__link:hover) {
+  background-color: var(--ifm-color-emphasis-200);
+  text-decoration: none;
+}
+
+/* Add a small delay before closing the dropdown */
+.versionDropdownContainer :global(.dropdown) {
+  transition-delay: 0s;
+}
+
+.versionDropdownContainer :global(.dropdown--show) {
+  transition-delay: 0s;
+}
+
+.versionDropdownContainer :global(.dropdown--show .dropdown__menu) {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+/* Create a "safe area" between button and dropdown */
+.versionDropdownContainer :global(.dropdown__menu) {
+  margin-top: -5px; /* Negative margin to create overlap */
+  padding-top: 5px; /* Add padding at the top to maintain visual spacing */
+}