@seqera/docusaurus-theme-seqera 1.0.4 → 1.0.6-next.22

package/lib/styles/admonition-alerts.css

@@ -1,10 +1,16 @@
 .alert {
   box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .theme-admonition {
+  margin: .75rem 0;
   p {
     line-height: 1.8;
+    margin-top: 0;
   }
 }
 .alert--warning {
@@ -65,9 +71,38 @@
   }
 }
 
+.theme-admonition-caution {
+  background-color: #FEF8E8;
+  border-color: #ECD79F;
+}
+
+[data-theme='dark'] {
+  .theme-admonition-caution {
+    background-color: #74570A;
+    border-color: #BEA04E;
+  }
+}
+
 .alert--secondary {
   --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
   --ifm-alert-background-color-highlight: #ffba0026;
   --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
   --ifm-alert-border-color: var(--ifm-color-warning-dark);
 }
+
+summary {
+  &:hover {
+    color: black !important;
+  }
+}
+
+[data-theme='dark'] {
+  summary {
+    &::before {
+      border-color: transparent transparent transparent white !important;
+    }
+    &:hover {
+      color: white;
+    }
+  }
+}

package/lib/styles/other-overrides.css

@@ -3,4 +3,9 @@ svg.excalidraw {
     max-width: 100%;
     height: 100%;
     margin-bottom: 2rem;
+}
+
+/* force height on searchbar to match button heights */
+.DocSearch-Button {
+    height: 33px!important;
 }

package/lib/styles/search.css

@@ -11,12 +11,12 @@
   }
 
   mark {
-    background: var(--color-nextflow-200)!important;
+    background: var(--color-nextflow-200) !important;
   }
 }
 
 .search-page-wrapper .theme-layout-main {
-   h2 {
+  h2 {
     font-size: 1.8rem;
     line-height: 1.5;
 
@@ -27,12 +27,23 @@
 }
 
 [data-theme='dark'] {
-    --docsearch-key-gradient: rgba(255,255,255,.3)!important;
-    --docsearch-key-shadow: none!important;
-    --docsearch-muted-color: var(--color-nextflow-100) !important;
-    --docsearch-highlight-color: var(--color-nextflow-800)!important;
-    --docsearch-searchbox-shadow: var(--color-nextflow-600)!important;
-    --docsearch-modal-background: var(--ifm-color-gray-900)!important;
-    --docsearch-modal-shadow: var(--ifm-color-gray-900)!important;
-    --docsearch-footer-background: var(--ifm-color-gray-900)!important;
+  --docsearch-key-gradient: rgba(255, 255, 255, 0.3) !important;
+  --docsearch-key-shadow: none !important;
+  --docsearch-muted-color: var(--color-nextflow-100) !important;
+  --docsearch-highlight-color: var(--color-nextflow-800) !important;
+  --docsearch-searchbox-shadow: var(--color-nextflow-600) !important;
+  --docsearch-modal-background: var(--ifm-color-gray-900) !important;
+  --docsearch-modal-shadow: var(--ifm-color-gray-900) !important;
+  --docsearch-footer-background: var(--ifm-color-gray-900) !important;
+}
+
+/* force height on searchbar to match button heights */
+.DocSearch-Button {
+  height: 33px !important;
+}
+
+@media (max-width: 996px) {
+  .DocSearch-Button {
+    background: none!important;
+  }
 }

package/lib/styles/typography.css

@@ -370,4 +370,4 @@ main prose styles
       color: var(--color-primary)!important;
     }
   }
-}
+}

package/lib/theme/Details/styles.module.css

@@ -4,6 +4,7 @@
   margin: 0 0 var(--ifm-spacing-vertical);
   border: 1px solid var(--ifm-alert-border-color);
   display: block;
+  overflow-x: scroll;
   summary {
     width: 100%;
     padding: 0 1rem;

package/lib/theme/DocItem/Layout/index.js

@@ -35,10 +35,10 @@ export default function DocItemLayout({children}) {
   const docTOC = useDocTOC();
   const {metadata} = useDoc();
   return (
-    <div className="row">
+    <div className="row flex-row flex justify-between">
       <div
         className={clsx(
-          'prose__wrapper mx-auto',
+          'prose__wrapper mx-auto lg:pr-8',
           !docTOC.hidden && styles.docItemCol,
         )}>
         <ContentVisibility metadata={metadata} />
@@ -54,7 +54,7 @@ export default function DocItemLayout({children}) {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      <div className="col col--3">{docTOC.desktop && docTOC.desktop} </div>
     </div>
   );
 }

package/lib/theme/DocSidebar/Desktop/Content/VersionSwitcher/index.d.ts

@@ -0,0 +1,7 @@
+import React, { Dispatch, SetStateAction } from "react";
+interface VersionSwitcherProps {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+declare const VersionSwitcher: React.FC<VersionSwitcherProps>;
+export default VersionSwitcher;

package/lib/theme/DocSidebar/Desktop/Content/VersionSwitcher/index.js

@@ -0,0 +1,100 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {
+  useVersions,
+  useDocsVersion,
+  useDocsPreferredVersion,
+} from '@docusaurus/plugin-content-docs/client';
+import {useLocation} from '@docusaurus/router';
+import Link from '@docusaurus/Link';
+const VersionSwitcher = ({isOpen, setIsOpen}) => {
+  const dropdownRef = useRef(null);
+  const location = useLocation();
+  const {savePreferredVersionName} = useDocsPreferredVersion(
+    'platform-enterprise',
+  );
+  const versions = useVersions('platform-enterprise');
+  const currentVersion = useDocsVersion();
+  const [isEnterprisePage, setEnterprisePage] = useState(false);
+  useEffect(() => {
+    if (location.pathname.startsWith('/platform-enterprise')) {
+      setEnterprisePage(true);
+    } else {
+      setEnterprisePage(false);
+    }
+  }, [location.pathname]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current?.contains(event.target)) return;
+      setTimeout(() => setIsOpen(false), 100);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setIsOpen]);
+  const toggleDropdown = () => setIsOpen((prev) => !prev);
+  function handleSelectVersion(version) {
+    savePreferredVersionName(version);
+  }
+  if (typeof window === 'undefined') return null;
+  if (!versions || versions.length === 0) return null;
+  if (!isEnterprisePage) return null;
+  const items = versions.filter(
+    (version) => version.label !== currentVersion?.label,
+  );
+  let urlSuffix = '';
+  if (
+    currentVersion &&
+    location.pathname.startsWith(`/platform-enterprise/${currentVersion.label}`)
+  ) {
+    const currentVersionPrefix = `/platform-enterprise/${currentVersion.label}`;
+    urlSuffix = location.pathname.replace(currentVersionPrefix, '');
+  }
+  return (
+    <div ref={dropdownRef} className="relative px-4">
+      <div
+        className={`bg-white dark:bg-gray-900 rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden ${
+          isOpen ? 'rounded-b-none' : ''
+        }`}>
+        <button
+          onClick={toggleDropdown}
+          className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent border-none cursor-pointer relative z-10 text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800">
+          <span>
+            {currentVersion ? `v${currentVersion.label}` : 'Version'}{' '}
+            {currentVersion && currentVersion.label === versions[0]?.label
+              ? '(current)'
+              : ''}
+          </span>
+          <svg
+            className={`w-5 h-5 transition-transform duration-200 ${
+              isOpen ? 'rotate-0' : '-rotate-90'
+            }`}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="4 4 16 16"
+            fill="currentColor">
+            <path d="M11.8152 13.1989L10.0167 11.1432C9.80447 10.9013 9.97697 10.5214 10.2991 10.5214H13.8961C13.9682 10.5214 14.0388 10.5421 14.0994 10.5811C14.16 10.6201 14.2081 10.6758 14.2379 10.7414C14.2677 10.8071 14.2779 10.8799 14.2674 10.9512C14.2569 11.0226 14.226 11.0893 14.1785 11.1435L12.38 13.1985C12.3448 13.2388 12.3014 13.2711 12.2527 13.2932C12.204 13.3153 12.1511 13.3268 12.0976 13.3268C12.0441 13.3268 11.9912 13.3153 11.9425 13.2932C11.8938 13.2711 11.8504 13.2388 11.8152 13.1985V13.1989Z" />
+          </svg>
+        </button>
+
+        {isOpen && (
+          <div className="absolute left-4 right-4 top-full -mt-0.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 border-t-gray-200 dark:border-t-gray-600 rounded-b-lg overflow-hidden z-50 transition-all duration-100">
+            {items?.map((version) => (
+              <div
+                key={version.name}
+                className="w-full"
+                onClick={() => handleSelectVersion(version.name)}>
+                <Link
+                  to={`${version.path}${urlSuffix}`}
+                  className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent cursor-pointer text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 no-underline border-t border-gray-200 dark:border-gray-700 first:border-t-0">
+                  v{version.label}{' '}
+                  {version.label === versions[0]?.label ? '(current)' : ''}
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default VersionSwitcher;

package/lib/theme/DocSidebar/Desktop/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, {useState} from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
+import VersionSwitcher from './Content/VersionSwitcher';
 import styles from './styles.module.css';
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const {
@@ -12,6 +13,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
       sidebar: {hideable},
     },
   } = useThemeConfig();
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <div
       className={clsx(
@@ -21,6 +23,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
         'h-full relative w-full',
       )}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <VersionSwitcher isOpen={isOpen} setIsOpen={setIsOpen} />
       <Content path={path} sidebar={sidebar} />
       {hideable && (
         <div className="absolute right-0 top-[3.75rem]">

package/lib/theme/DocSidebarItem/Html/index.js

@@ -11,7 +11,7 @@ export default function DocSidebarItemHtml({item, level, index}) {
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
         level > 1 &&
           ThemeClassNames.docs.docSidebarItemLinkLevel(level) &&
-          'ml-2',
+          'ml-3 lg:ml-0',
         defaultStyle && [styles.menuHtmlItem, 'menu__list-item '],
         className,
       )}

package/lib/theme/DocSidebarItem/Link/index.js

@@ -31,7 +31,7 @@ export default function DocSidebarItemLink({
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
         level > 1 &&
           ThemeClassNames.docs.docSidebarItemLinkLevel(level) &&
-          'ml-2',
+          'ml-3 lg:ml-0',
         'menu__list-item',
         className,
       )}

package/lib/theme/DocVersionBanner/index.js

@@ -101,7 +101,7 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
       <div>
         <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
       </div>
-      <div className="margin-top--md">
+      <div className="">
         <LatestVersionSuggestionLabel
           versionLabel={latestVersionSuggestion.label}
           to={latestVersionSuggestedDoc.path}

package/lib/theme/Navbar/Content/index.js

@@ -72,7 +72,7 @@ export default function NavbarContent() {
   const searchBarItem = items.find((item) => item.type === 'search');
   return (
     <div className="w-full flex flex-col">
-      <div className="pt-3 pb-1">
+      <div className="md:pt-3 md:pb-1">
         <NavbarContentLayout
           left={
             <>
@@ -84,7 +84,7 @@ export default function NavbarContent() {
               <NavbarItems items={rightItems} />
 
               <SearchBar />
-              <div className="mr-2">
+              <div className="ml-1.5 mr-2">
                 <NavbarColorModeToggle className={styles.colorModeToggle} />
               </div>
               <div className="hidden md:flex!">

package/lib/theme/Navbar/Content/styles.module.css

@@ -1,14 +1,4 @@
 
-
-/*
-Hide color mode toggle in small viewports
- */
-@media (max-width: 996px) {
-  .colorModeToggle {
-    display: none;
-  }
-}
-
 /*
 Restore some Infima style that broke with CSS Cascade Layers
 See https://github.com/facebook/docusaurus/pull/11142

package/lib/theme/Navbar/Logo/index.js

@@ -3,7 +3,7 @@ import Logo from '@theme/Logo';
 export default function NavbarLogo() {
   return (
     <Logo
-      className="navbar__brand"
+      className="navbar__brand pt-2 md:pt-0"
       imageClassName="navbar__logo"
       titleClassName="hidden"
     />

package/lib/theme/TOCCollapsible/styles.module.css

@@ -19,6 +19,7 @@
 
 .tocCollapsibleContent a {
   display: block;
+    text-decoration: none!important;
 }
 
 .tocCollapsibleExpanded {

package/lib/theme/TabItem/styles.module.css

@@ -3,3 +3,7 @@
 .tabItem > *:last-child {
   margin-bottom: 0;
 }
+
+.tabItem {
+  border-radius: 0;
+}

package/lib/theme/Tabs/index.js

@@ -48,7 +48,7 @@ function TabList({className, block, selectedValue, selectValue, tabValues}) {
       role="tablist"
       aria-orientation="horizontal"
       className={clsx(
-        'tabs',
+        'tabs m-0! p-0! ',
         {
           'tabs--block': block,
         },
@@ -67,9 +67,15 @@ function TabList({className, block, selectedValue, selectValue, tabValues}) {
           onKeyDown={handleKeydown}
           onClick={handleTabChange}
           {...attributes}
-          className={clsx('tabs__item', styles.tabItem, attributes?.className, {
-            'tabs__item--active': selectedValue === value,
-          })}>
+          className={clsx(
+            'tabs__item bg-gray-100 dark:bg-gray-900 dark:text-white hover:text-black dark:hover:border-white rounded-none border-b-4 border-gray-200',
+            styles.tabItem,
+            attributes?.className,
+            {
+              'tabs__item--active border-b-4 border-black! dark:border-white! bg-nextflow-100 dark:bg-nextflow-900 text-black':
+                selectedValue === value,
+            },
+          )}>
           {label ?? value}
         </li>
       ))}
@@ -89,7 +95,7 @@ function TabContent({lazy, children, selectedValue}) {
       return null;
     }
     return cloneElement(selectedTabItem, {
-      className: clsx('margin-top--md', selectedTabItem.props.className),
+      className: clsx('', selectedTabItem.props.className),
     });
   }
   return (

package/lib/theme/Tabs/styles.module.css

@@ -6,4 +6,6 @@
 
 .tabItem {
   margin-top: 0 !important;
+  padding: .8rem 1rem;
+  margin: 1rem .1rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seqera/docusaurus-theme-seqera",
-  "version": "1.0.4",
+  "version": "1.0.6-next.22",
   "description": "Seqera docs theme for Docusaurus",
   "author": "Seqera docs team <education@seqera.io>",
   "license": "Apache-2.0",

package/src/styles/admonition-alerts.css

@@ -1,10 +1,16 @@
 .alert {
   box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .theme-admonition {
+  margin: .75rem 0;
   p {
     line-height: 1.8;
+    margin-top: 0;
   }
 }
 .alert--warning {
@@ -65,9 +71,38 @@
   }
 }
 
+.theme-admonition-caution {
+  background-color: #FEF8E8;
+  border-color: #ECD79F;
+}
+
+[data-theme='dark'] {
+  .theme-admonition-caution {
+    background-color: #74570A;
+    border-color: #BEA04E;
+  }
+}
+
 .alert--secondary {
   --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
   --ifm-alert-background-color-highlight: #ffba0026;
   --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
   --ifm-alert-border-color: var(--ifm-color-warning-dark);
 }
+
+summary {
+  &:hover {
+    color: black !important;
+  }
+}
+
+[data-theme='dark'] {
+  summary {
+    &::before {
+      border-color: transparent transparent transparent white !important;
+    }
+    &:hover {
+      color: white;
+    }
+  }
+}

package/src/styles/other-overrides.css

@@ -3,4 +3,9 @@ svg.excalidraw {
     max-width: 100%;
     height: 100%;
     margin-bottom: 2rem;
+}
+
+/* force height on searchbar to match button heights */
+.DocSearch-Button {
+    height: 33px!important;
 }

package/src/styles/search.css

@@ -11,12 +11,12 @@
   }
 
   mark {
-    background: var(--color-nextflow-200)!important;
+    background: var(--color-nextflow-200) !important;
   }
 }
 
 .search-page-wrapper .theme-layout-main {
-   h2 {
+  h2 {
     font-size: 1.8rem;
     line-height: 1.5;
 
@@ -27,12 +27,23 @@
 }
 
 [data-theme='dark'] {
-    --docsearch-key-gradient: rgba(255,255,255,.3)!important;
-    --docsearch-key-shadow: none!important;
-    --docsearch-muted-color: var(--color-nextflow-100) !important;
-    --docsearch-highlight-color: var(--color-nextflow-800)!important;
-    --docsearch-searchbox-shadow: var(--color-nextflow-600)!important;
-    --docsearch-modal-background: var(--ifm-color-gray-900)!important;
-    --docsearch-modal-shadow: var(--ifm-color-gray-900)!important;
-    --docsearch-footer-background: var(--ifm-color-gray-900)!important;
+  --docsearch-key-gradient: rgba(255, 255, 255, 0.3) !important;
+  --docsearch-key-shadow: none !important;
+  --docsearch-muted-color: var(--color-nextflow-100) !important;
+  --docsearch-highlight-color: var(--color-nextflow-800) !important;
+  --docsearch-searchbox-shadow: var(--color-nextflow-600) !important;
+  --docsearch-modal-background: var(--ifm-color-gray-900) !important;
+  --docsearch-modal-shadow: var(--ifm-color-gray-900) !important;
+  --docsearch-footer-background: var(--ifm-color-gray-900) !important;
+}
+
+/* force height on searchbar to match button heights */
+.DocSearch-Button {
+  height: 33px !important;
+}
+
+@media (max-width: 996px) {
+  .DocSearch-Button {
+    background: none!important;
+  }
 }

package/src/styles/typography.css

@@ -370,4 +370,4 @@ main prose styles
       color: var(--color-primary)!important;
     }
   }
-}
+}

package/src/theme/Details/styles.module.css

@@ -4,6 +4,7 @@
   margin: 0 0 var(--ifm-spacing-vertical);
   border: 1px solid var(--ifm-alert-border-color);
   display: block;
+  overflow-x: scroll;
   summary {
     width: 100%;
     padding: 0 1rem;

package/src/theme/DocItem/Layout/index.tsx

@@ -45,8 +45,8 @@ export default function DocItemLayout({children}: Props): ReactNode {
   const docTOC = useDocTOC();
   const {metadata} = useDoc();
   return (
-    <div className="row">
-      <div className={clsx('prose__wrapper mx-auto', !docTOC.hidden && styles.docItemCol)}>
+    <div className="row flex-row flex justify-between">
+      <div className={clsx('prose__wrapper mx-auto lg:pr-8', !docTOC.hidden && styles.docItemCol)}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
@@ -60,7 +60,7 @@ export default function DocItemLayout({children}: Props): ReactNode {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+       <div className="col col--3">{docTOC.desktop && docTOC.desktop} </div>
     </div>
   );
 }

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

@@ -0,0 +1,114 @@
+import React, { useState, useRef, useEffect, Dispatch, SetStateAction } from "react";
+import {
+  useVersions,
+  useDocsVersion,
+  useDocsPreferredVersion,
+} from "@docusaurus/plugin-content-docs/client";
+import { useLocation } from "@docusaurus/router";
+import Link from "@docusaurus/Link";
+
+interface VersionSwitcherProps {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+const VersionSwitcher: React.FC<VersionSwitcherProps> = ({ isOpen, setIsOpen }) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
+  const { savePreferredVersionName } = useDocsPreferredVersion("platform-enterprise");
+  const versions = useVersions("platform-enterprise");
+  const currentVersion = useDocsVersion();
+  const [isEnterprisePage, setEnterprisePage] = useState(false);
+
+  useEffect(() => {
+    if (location.pathname.startsWith('/platform-enterprise')) {
+      setEnterprisePage(true);
+    } else {
+      setEnterprisePage(false);
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current?.contains(event.target as Node)) return;
+      setTimeout(() => setIsOpen(false), 100);
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setIsOpen]);
+
+  const toggleDropdown = () => setIsOpen((prev) => !prev);
+
+  function handleSelectVersion(version: string) {
+    savePreferredVersionName(version);
+  }
+
+  if (typeof window === "undefined") return null;
+  if (!versions || versions.length === 0) return null;
+  if (!isEnterprisePage) return null;
+
+  const items = versions.filter(
+    (version) => version.label !== currentVersion?.label,
+  );
+
+  let urlSuffix = "";
+
+  if (
+    currentVersion &&
+    location.pathname.startsWith(`/platform-enterprise/${currentVersion.label}`)
+  ) {
+    const currentVersionPrefix = `/platform-enterprise/${currentVersion.label}`;
+    urlSuffix = location.pathname.replace(currentVersionPrefix, "");
+  }
+
+  return (
+    <div ref={dropdownRef} className="relative px-4">
+      <div className={`bg-white dark:bg-gray-900 rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden ${isOpen ? 'rounded-b-none' : ''}`}>
+        <button
+          onClick={toggleDropdown}
+          className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent border-none cursor-pointer relative z-10 text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+        >
+          <span>
+            {currentVersion ? `v${currentVersion.label}` : "Version"}{" "}
+            {currentVersion && currentVersion.label === versions[0]?.label
+              ? "(current)"
+              : ""}
+          </span>
+          <svg 
+            className={`w-5 h-5 transition-transform duration-200 ${isOpen ? 'rotate-0' : '-rotate-90'}`}
+            xmlns="http://www.w3.org/2000/svg" 
+            viewBox="4 4 16 16"
+            fill="currentColor"
+          >
+            <path d="M11.8152 13.1989L10.0167 11.1432C9.80447 10.9013 9.97697 10.5214 10.2991 10.5214H13.8961C13.9682 10.5214 14.0388 10.5421 14.0994 10.5811C14.16 10.6201 14.2081 10.6758 14.2379 10.7414C14.2677 10.8071 14.2779 10.8799 14.2674 10.9512C14.2569 11.0226 14.226 11.0893 14.1785 11.1435L12.38 13.1985C12.3448 13.2388 12.3014 13.2711 12.2527 13.2932C12.204 13.3153 12.1511 13.3268 12.0976 13.3268C12.0441 13.3268 11.9912 13.3153 11.9425 13.2932C11.8938 13.2711 11.8504 13.2388 11.8152 13.1985V13.1989Z" />
+          </svg>
+        </button>
+        
+        {isOpen && (
+          <div className="absolute left-4 right-4 top-full -mt-0.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 border-t-gray-200 dark:border-t-gray-600 rounded-b-lg overflow-hidden z-50 transition-all duration-100">
+            {items?.map((version) => (
+              <div
+                key={version.name}
+                className="w-full"
+                onClick={() => handleSelectVersion(version.name)}
+              >
+                <Link
+                  to={`${version.path}${urlSuffix}`}
+                  className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent cursor-pointer text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 no-underline border-t border-gray-200 dark:border-gray-700 first:border-t-0"
+                >
+                  v{version.label}{" "}
+                  {version.label === versions[0]?.label ? "(current)" : ""}
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VersionSwitcher;

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

@@ -1,13 +1,11 @@
-
-
-import React from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
 import type {Props} from '@theme/DocSidebar/Desktop';
-
+import VersionSwitcher from './Content/VersionSwitcher';
 import styles from './styles.module.css';
 
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
@@ -18,6 +16,8 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
     },
   } = useThemeConfig();
 
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
     <div
       className={clsx(
@@ -27,10 +27,11 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
         'h-full relative w-full'
       )}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <VersionSwitcher isOpen={isOpen} setIsOpen={setIsOpen} />
       <Content path={path} sidebar={sidebar} />
       {hideable && <div className="absolute right-0 top-[3.75rem]"><CollapseButton onClick={onCollapse} /></div>}
     </div>
   );
 }
 
-export default React.memo(DocSidebarDesktop);
+export default React.memo(DocSidebarDesktop);

package/src/theme/DocSidebarItem/Html/index.tsx

@@ -18,7 +18,7 @@ export default function DocSidebarItemHtml({
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
         level > 1 &&
           ThemeClassNames.docs.docSidebarItemLinkLevel(level) &&
-          'ml-2',
+          'ml-3 lg:ml-0',
         defaultStyle && [styles.menuHtmlItem, 'menu__list-item '],
         className,
       )}

package/src/theme/DocSidebarItem/Link/index.tsx

@@ -33,7 +33,7 @@ export default function DocSidebarItemLink({
       className={clsx(
         ThemeClassNames.docs.docSidebarItemLink,
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-         level > 1 && ThemeClassNames.docs.docSidebarItemLinkLevel(level) && 'ml-2',
+         level > 1 && ThemeClassNames.docs.docSidebarItemLinkLevel(level) && 'ml-3 lg:ml-0',
         'menu__list-item',
         className,
       )}

package/src/theme/DocVersionBanner/index.tsx

@@ -146,7 +146,7 @@ function DocVersionBannerEnabled({
       <div>
         <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
       </div>
-      <div className="margin-top--md">
+      <div className="">
         <LatestVersionSuggestionLabel
           versionLabel={latestVersionSuggestion.label}
           to={latestVersionSuggestedDoc.path}

package/src/theme/Navbar/Content/index.tsx

@@ -88,7 +88,7 @@ export default function NavbarContent(): ReactNode {
 
   return (
     <div className="w-full flex flex-col">
-      <div className="pt-3 pb-1">
+      <div className="md:pt-3 md:pb-1">
         <NavbarContentLayout
           left={
             <>
@@ -100,7 +100,7 @@ export default function NavbarContent(): ReactNode {
               <NavbarItems items={rightItems} />
 
               <SearchBar />
-              <div className="mr-2">
+              <div className="ml-1.5 mr-2">
                 <NavbarColorModeToggle className={styles.colorModeToggle} />
               </div>
               <div className="hidden md:flex!">

package/src/theme/Navbar/Content/styles.module.css

@@ -1,14 +1,4 @@
 
-
-/*
-Hide color mode toggle in small viewports
- */
-@media (max-width: 996px) {
-  .colorModeToggle {
-    display: none;
-  }
-}
-
 /*
 Restore some Infima style that broke with CSS Cascade Layers
 See https://github.com/facebook/docusaurus/pull/11142

package/src/theme/Navbar/Logo/index.tsx

@@ -6,7 +6,7 @@ import Logo from '@theme/Logo';
 export default function NavbarLogo(): ReactNode {
   return (
     <Logo
-      className="navbar__brand"
+      className="navbar__brand pt-2 md:pt-0"
       imageClassName="navbar__logo"
       titleClassName="hidden"
     />

package/src/theme/TOCCollapsible/styles.module.css

@@ -19,6 +19,7 @@
 
 .tocCollapsibleContent a {
   display: block;
+    text-decoration: none!important;
 }
 
 .tocCollapsibleExpanded {

package/src/theme/TabItem/styles.module.css

@@ -3,3 +3,7 @@
 .tabItem > *:last-child {
   margin-bottom: 0;
 }
+
+.tabItem {
+  border-radius: 0;
+}

package/src/theme/Tabs/index.tsx

@@ -70,7 +70,7 @@ function TabList({
       role="tablist"
       aria-orientation="horizontal"
       className={clsx(
-        'tabs',
+        'tabs m-0! p-0! ',
         {
           'tabs--block': block,
         },
@@ -90,11 +90,11 @@ function TabList({
           onClick={handleTabChange}
           {...attributes}
           className={clsx(
-            'tabs__item',
+            'tabs__item bg-gray-100 dark:bg-gray-900 dark:text-white hover:text-black dark:hover:border-white rounded-none border-b-4 border-gray-200',
             styles.tabItem,
             attributes?.className as string,
             {
-              'tabs__item--active': selectedValue === value,
+              'tabs__item--active border-b-4 border-black! dark:border-white! bg-nextflow-100 dark:bg-nextflow-900 text-black': selectedValue === value,
             },
           )}>
           {label ?? value}
@@ -121,7 +121,7 @@ function TabContent({
       return null;
     }
     return cloneElement(selectedTabItem, {
-      className: clsx('margin-top--md', selectedTabItem.props.className),
+      className: clsx('', selectedTabItem.props.className),
     });
   }
   return (

package/src/theme/Tabs/styles.module.css

@@ -6,4 +6,6 @@
 
 .tabItem {
   margin-top: 0 !important;
+  padding: .8rem 1rem;
+  margin: 1rem .1rem;
 }