@seqera/docusaurus-theme-seqera 1.0.0

package/src/theme/DocRoot/Layout/Main/styles.module.css

@@ -0,0 +1,23 @@
+
+
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}

package/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx

@@ -0,0 +1,36 @@
+
+
+import React, {type ReactNode} from 'react';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import IconSidebar from '@theme/Icon/Sidebar';
+import type {Props} from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
+
+import styles from './styles.module.css';
+
+export default function DocRootLayoutSidebarExpandButton({
+  toggleSidebar,
+}: Props): ReactNode {
+  return (
+    <div
+      className={styles.expandButton}
+      title={translate({
+        id: 'theme.docs.sidebar.expandButtonTitle',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.expandButtonAriaLabel',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      tabIndex={0}
+      role="button"
+      onKeyDown={toggleSidebar}
+      onClick={toggleSidebar}>
+      <IconSidebar className={styles.expandButtonIcon} />
+    </div>
+  );
+}

package/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css

@@ -0,0 +1,29 @@
+
+
+@media (min-width: 997px) {
+  .expandButton {
+    position: absolute;
+    top: 4rem;
+    right: -3px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    /* align-items: center;
+    justify-content: center; */
+    transition: background-color var(--ifm-transition-fast) ease;
+    background-color: var(--docusaurus-collapse-button-bg);
+  }
+
+  /* .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  } */
+
+  .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+
+  [dir='rtl'] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+}

package/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -0,0 +1,79 @@
+
+
+import React, {type ReactNode, useState, useCallback} from 'react';
+import clsx from 'clsx';
+import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import {useLocation} from '@docusaurus/router';
+import DocSidebar from '@theme/DocSidebar';
+import ExpandButton from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
+import type {Props} from '@theme/DocRoot/Layout/Sidebar';
+
+import styles from './styles.module.css';
+
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({children}: {children: ReactNode}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
+      {children}
+    </React.Fragment>
+  );
+}
+
+export default function DocRootLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}: Props): ReactNode {
+  const {pathname} = useLocation();
+
+  const [hiddenSidebar, setHiddenSidebar] = useState(false);
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false);
+    }
+    // onTransitionEnd won't fire when sidebar animation is disabled
+    // fixes https://github.com/facebook/docusaurus/issues/8918
+    if (!hiddenSidebar && prefersReducedMotion()) {
+      setHiddenSidebar(true);
+    }
+    setHiddenSidebarContainer((value) => !value);
+  }, [setHiddenSidebarContainer, hiddenSidebar]);
+
+  return (
+    <aside
+      className={clsx(
+        ThemeClassNames.docs.docSidebarContainer,
+        styles.docSidebarContainer,
+        hiddenSidebarContainer && styles.docSidebarContainerHidden,
+      )}
+      onTransitionEnd={(e) => {
+        if (!e.currentTarget.classList.contains(styles.docSidebarContainer!)) {
+          return;
+        }
+
+        if (hiddenSidebarContainer) {
+          setHiddenSidebar(true);
+        }
+      }}>
+      <ResetOnSidebarChange>
+        <div
+          className={clsx(
+            styles.sidebarViewport,
+            hiddenSidebar && styles.sidebarViewportHidden,
+          )}>
+          <DocSidebar
+            sidebar={sidebar}
+            path={pathname}
+            onCollapse={toggleSidebar}
+            isHidden={hiddenSidebar}
+          />
+          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        </div>
+      </ResetOnSidebarChange>
+    </aside>
+  );
+}

package/src/theme/DocRoot/Layout/Sidebar/styles.module.css

@@ -0,0 +1,34 @@
+
+
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+  display: none;
+}
+
+@media (min-width: 997px) {
+  .docSidebarContainer {
+    display: block;
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+
+  .sidebarViewport {
+    top: calc(var(--ifm-navbar-height) - 2rem);
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  }
+}

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

@@ -0,0 +1,32 @@
+
+
+import React, {type ReactNode, useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import BackToTopButton from '@theme/BackToTopButton';
+import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
+import DocRootLayoutMain from '@theme/DocRoot/Layout/Main';
+import type {Props} from '@theme/DocRoot/Layout';
+
+import styles from './styles.module.css';
+
+export default function DocRootLayout({children}: Props): ReactNode {
+  const sidebar = useDocsSidebar();
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  return (
+    <div className={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docRoot}>
+        {sidebar && (
+          <DocRootLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocRootLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+          {children}
+        </DocRootLayoutMain>
+      </div>
+    </div>
+  );
+}

package/src/theme/DocRoot/Layout/styles.module.css

@@ -0,0 +1,11 @@
+
+
+.docRoot {
+  display: flex;
+  width: 100%;
+}
+
+.docsWrapper {
+  display: flex;
+  flex: 1 0 auto;
+}

package/src/theme/DocRoot/index.tsx

@@ -0,0 +1,29 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  DocsSidebarProvider,
+  useDocRootMetadata,
+} from '@docusaurus/plugin-content-docs/client';
+import DocRootLayout from '@theme/DocRoot/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+import type {Props} from '@theme/DocRoot';
+
+export default function DocRoot(props: Props): ReactNode {
+  const currentDocRouteMetadata = useDocRootMetadata(props);
+  if (!currentDocRouteMetadata) {
+    // We only render the not found content to avoid a double layout
+    // see https://github.com/facebook/docusaurus/pull/7966#pullrequestreview-1077276692
+    return <NotFoundContent />;
+  }
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <HtmlClassNameProvider className={clsx(ThemeClassNames.page.docsDocPage)}>
+      <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+        <DocRootLayout>{docElement}</DocRootLayout>
+      </DocsSidebarProvider>
+    </HtmlClassNameProvider>
+  );
+}

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

@@ -0,0 +1,34 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import IconSidebar from '@theme/Icon/Sidebar';
+import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton';
+
+import styles from './styles.module.css';
+
+export default function CollapseButton({onClick}: Props): ReactNode {
+  return (
+    <div
+      // type="button"
+      title={translate({
+        id: 'theme.docs.sidebar.collapseButtonTitle',
+        message: 'Collapse sidebar',
+        description: 'The title attribute for collapse button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.collapseButtonAriaLabel',
+        message: 'Collapse sidebar',
+        description: 'The title attribute for collapse button of doc sidebar',
+      })}
+      className={clsx(
+        'w-full h-full pr-2 cursor-pointer',
+        // styles.collapseSidebarButton,
+      )}
+      onClick={onClick}>
+      <IconSidebar className={styles.collapseSidebarButtonIcon} />
+    </div>
+  );
+}

package/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css

@@ -0,0 +1,42 @@
+:root {
+  --docusaurus-collapse-button-bg: transparent;
+  --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
+}
+
+[data-theme='dark']:root {
+  --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
+  --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
+}
+
+@media (min-width: 997px) {
+  .collapseSidebarButton {
+    display: block !important;
+    background-color: var(--docusaurus-collapse-button-bg);
+    height: 40px;
+    position: sticky;
+    bottom: 0;
+    border-radius: 0;
+    border-top: 1px solid var(--ifm-toc-border-color);
+  }
+
+  .collapseSidebarButtonIcon {
+    /* transform: rotate(180deg); */
+    transform: rotate(0deg);
+    margin-top: 4px;
+  }
+
+  [dir='rtl'] .collapseSidebarButtonIcon {
+    /* transform: rotate(0); */
+    transform: rotate(180deg);
+  }
+
+  .collapseSidebarButton:hover,
+  .collapseSidebarButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+}
+
+.collapseSidebarButton {
+  display: none;
+  margin: 0;
+}

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

@@ -0,0 +1,56 @@
+
+
+import React, {type ReactNode, useState} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  useAnnouncementBar,
+  useScrollPosition,
+} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import type {Props} from '@theme/DocSidebar/Desktop/Content';
+
+import styles from './styles.module.css';
+
+function useShowAnnouncementBar() {
+  const {isActive} = useAnnouncementBar();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
+
+  useScrollPosition(
+    ({scrollY}) => {
+      if (isActive) {
+        setShowAnnouncementBar(scrollY === 0);
+      }
+    },
+    [isActive],
+  );
+  return isActive && showAnnouncementBar;
+}
+
+export default function DocSidebarDesktopContent({
+  path,
+  sidebar,
+  className,
+}: Props): ReactNode {
+  const showAnnouncementBar = useShowAnnouncementBar();
+
+  return (
+    <nav
+      aria-label={translate({
+        id: 'theme.docs.sidebar.navAriaLabel',
+        message: 'Docs sidebar',
+        description: 'The ARIA label for the sidebar navigation',
+      })}
+      className={clsx(
+        'menu thin-scrollbar w-full block font-normal mt-2',
+        styles.menu,
+        showAnnouncementBar && styles.menuWithAnnouncementBar,
+        className,
+      )}>
+      <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+        <DocSidebarItems items={sidebar} activePath={path} level={1} />
+      </ul>
+    </nav>
+  );
+}

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

@@ -0,0 +1,18 @@
+
+
+@media (min-width: 997px) {
+  .menu {
+    flex-grow: 1;
+    padding: 0.5rem;
+  }
+  @supports (scrollbar-gutter: stable) {
+    .menu {
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      scrollbar-gutter: stable;
+    }
+  }
+
+  .menuWithAnnouncementBar {
+    margin-bottom: var(--docusaurus-announcement-bar-height);
+  }
+}

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

@@ -0,0 +1,36 @@
+
+
+import React 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 styles from './styles.module.css';
+
+function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
+  const {
+    navbar: {hideOnScroll},
+    docs: {
+      sidebar: {hideable},
+    },
+  } = useThemeConfig();
+
+  return (
+    <div
+      className={clsx(
+        styles.sidebar,
+        hideOnScroll && styles.sidebarWithHideableNavbar,
+        isHidden && styles.sidebarHidden,
+        'h-full relative w-full'
+      )}>
+      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <Content path={path} sidebar={sidebar} />
+      {hideable && <div className="absolute right-0 top-[3.75rem]"><CollapseButton onClick={onCollapse} /></div>}
+    </div>
+  );
+}
+
+export default React.memo(DocSidebarDesktop);

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

@@ -0,0 +1,39 @@
+
+
+@media (min-width: 997px) {
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-top: var(--ifm-navbar-height);
+    width: var(--doc-sidebar-width);
+  }
+
+  .sidebarWithHideableNavbar {
+    padding-top: 0;
+  }
+
+  .sidebarHidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .sidebarLogo {
+    display: flex !important;
+    align-items: center;
+    margin: 0 var(--ifm-navbar-padding-horizontal);
+    min-height: var(--ifm-navbar-height);
+    max-height: var(--ifm-navbar-height);
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  .sidebarLogo img {
+    margin-right: 0.5rem;
+    height: 2rem;
+  }
+}
+
+.sidebarLogo {
+  display: none;
+}

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

@@ -0,0 +1,49 @@
+
+
+import React from 'react';
+import clsx from 'clsx';
+import {
+  NavbarSecondaryMenuFiller,
+  type NavbarSecondaryMenuComponent,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import type {Props} from '@theme/DocSidebar/Mobile';
+
+// eslint-disable-next-line react/function-component-definition
+const DocSidebarMobileSecondaryMenu: NavbarSecondaryMenuComponent<Props> = ({
+  sidebar,
+  path,
+}) => {
+  const mobileSidebar = useNavbarMobileSidebar();
+  return (
+    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+      <DocSidebarItems
+        items={sidebar}
+        activePath={path}
+        onItemClick={(item) => {
+          // Mobile sidebar should only be closed if the category has a link
+          if (item.type === 'category' && item.href) {
+            mobileSidebar.toggle();
+          }
+          if (item.type === 'link') {
+            mobileSidebar.toggle();
+          }
+        }}
+        level={1}
+      />
+    </ul>
+  );
+};
+
+function DocSidebarMobile(props: Props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={DocSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+
+export default React.memo(DocSidebarMobile);

package/src/theme/DocSidebar/index.tsx

@@ -0,0 +1,25 @@
+
+
+import React, {type ReactNode} from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
+import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
+import DocSidebarMobile from '@theme/DocSidebar/Mobile';
+import type {Props} from '@theme/DocSidebar';
+
+export default function DocSidebar(props: Props): ReactNode {
+  const windowSize = useWindowSize();
+
+  // Desktop sidebar visible on hydration: need SSR rendering
+  const shouldRenderSidebarDesktop =
+    windowSize === 'desktop' || windowSize === 'ssr';
+
+  // Mobile sidebar not visible on hydration: can avoid SSR rendering
+  const shouldRenderSidebarMobile = windowSize === 'mobile';
+
+  return (
+    <>
+      {shouldRenderSidebarDesktop && <DocSidebarDesktop {...props} />}
+      {shouldRenderSidebarMobile && <DocSidebarMobile {...props} />}
+    </>
+  );
+}