diff --git a/src/components/Common/SectionNavLink.tsx b/src/components/Common/SectionNavLink.tsx new file mode 100644 index 0000000000..90defce483 --- /dev/null +++ b/src/components/Common/SectionNavLink.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import { Icon } from "@site/src/components/Common/Icon"; +import type { SectionNavItem } from "@site/src/typescript/pathUtils"; + +interface SectionNavLinkProps { + item: SectionNavItem; + isActive: boolean; + onClick?: () => void; +} + +export function SectionNavLink({ item, isActive, onClick }: SectionNavLinkProps) { + return ( + + + {item.label} + {item.external && } + + ); +} diff --git a/src/theme/DocSidebar/Desktop/index.tsx b/src/theme/DocSidebar/Desktop/index.tsx index 426902f0b1..f809dc5d8a 100644 --- a/src/theme/DocSidebar/Desktop/index.tsx +++ b/src/theme/DocSidebar/Desktop/index.tsx @@ -12,7 +12,8 @@ import SidebarVersionDropdown from "@site/src/components/SidebarVersionDropdown" import { useActiveDocContext, useLatestVersion } from "@docusaurus/plugin-content-docs/client"; import { Icon } from "@site/src/components/Common/Icon"; -import { getPathType, getLandingPagePath, PathType } from "../../../typescript/pathUtils"; +import { SectionNavLink } from "@site/src/components/Common/SectionNavLink"; +import { getPathType, getSectionNavItems, PathType } from "../../../typescript/pathUtils"; function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) { const { @@ -28,7 +29,7 @@ function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) { const versionLabel = activeVersion?.label ?? latestVersion.label; const pathType = getPathType(path); - const landingPagePath = getLandingPagePath(pathType, versionLabel); + const sectionNavItems = getSectionNavItems(pathType, versionLabel); const shouldDisplayContent = pathType !== PathType.Guides && pathType !== PathType.Samples; @@ -41,66 +42,16 @@ function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) { )} > {hideOnScroll && } -
-
- - Start - -
- {pathType !== PathType.Guides && ( - - Guides - - Switch - - - )} - {pathType !== PathType.Samples && ( - - Samples - - Switch - - - )} - {pathType !== PathType.Documentation && ( - - RavenDB Docs - - Switch - - - )} - {pathType !== PathType.Cloud && ( - - RavenDB Cloud Docs - - Switch - - - )} - {pathType !== PathType.Quill && ( - - Quill Docs - - Switch - - - )} - - Community - - +
+ {shouldDisplayContent &&
} {pathType === PathType.Documentation && } {shouldDisplayContent && } diff --git a/src/theme/DocSidebar/Mobile/index.tsx b/src/theme/DocSidebar/Mobile/index.tsx index 960568b237..853075e5fa 100644 --- a/src/theme/DocSidebar/Mobile/index.tsx +++ b/src/theme/DocSidebar/Mobile/index.tsx @@ -7,9 +7,10 @@ import type { Props } from "@theme/DocSidebar/Mobile"; import Link from "@docusaurus/Link"; import { useActiveDocContext, useLatestVersion } from "@docusaurus/plugin-content-docs/client"; import { Icon } from "@site/src/components/Common/Icon"; +import { SectionNavLink } from "@site/src/components/Common/SectionNavLink"; import type { Props as DocSidebarProps } from "@theme/DocSidebar"; import SidebarVersionDropdown from "@site/src/components/SidebarVersionDropdown"; -import { getPathType, getLandingPagePath, PathType } from "../../../typescript/pathUtils"; +import { getPathType, getSectionNavItems, PathType } from "../../../typescript/pathUtils"; function DocSidebarMobileSecondaryMenu({ sidebar, path }: DocSidebarProps) { const mobileSidebar = useNavbarMobileSidebar(); @@ -20,63 +21,21 @@ function DocSidebarMobileSecondaryMenu({ sidebar, path }: DocSidebarProps) { const versionLabel = activeVersion?.label ?? latestVersion.label; const pathType = getPathType(path); - const landingPagePath = getLandingPagePath(pathType, versionLabel); + const sectionNavItems = getSectionNavItems(pathType, versionLabel); const shouldDisplayContent = pathType !== PathType.Guides && pathType !== PathType.Samples; return (
    -
  • -
    - mobileSidebar.toggle()}> - Start - -
    -
  • - {pathType !== PathType.Guides && ( - - Guides - - Switch - - - )} - {pathType !== PathType.Documentation && ( - - RavenDB Docs - - Switch - - - )} - {pathType !== PathType.Samples && ( - - Samples - - Switch - - - )} - {pathType !== PathType.Cloud && ( - - RavenDB Cloud Docs - - Switch - - - )} - {pathType !== PathType.Quill && ( - - Quill Docs - - Switch - - - )} - - Community - - + {sectionNavItems.map((item) => ( +
  • + mobileSidebar.toggle()} + /> +
  • + ))} {pathType === PathType.Documentation && (
  • candidate.type === pathType); return section ? `/${section.segment}` : `/${versionLabel}`; } + +export interface SectionNavItem { + label: string; + icon: IconName; + to: string; + pathType: PathTypeValue | null; + // Shown only while you are already inside it, for areas that are not public destinations. + currentOnly?: boolean; + external?: boolean; +} + +const NAV_SECTIONS: readonly { type: PathTypeValue; label: string; icon: IconName; currentOnly?: boolean }[] = [ + { type: PathType.Documentation, label: "RavenDB Docs", icon: "database" }, + { type: PathType.Cloud, label: "RavenDB Cloud Docs", icon: "cloud" }, + { type: PathType.Quill, label: "Quill Docs", icon: "quill" }, + { type: PathType.Guides, label: "Guides", icon: "guides" }, + { type: PathType.Samples, label: "Samples", icon: "create-sample-data" }, + { type: PathType.Templates, label: "Templates", icon: "documentation-guide", currentOnly: true }, +]; + +export function getSectionNavItems(pathType: PathTypeValue, versionLabel: string): SectionNavItem[] { + const sections = NAV_SECTIONS.filter((section) => !section.currentOnly || section.type === pathType).map( + (section) => ({ + label: section.label, + icon: section.icon, + to: getLandingPagePath(section.type, versionLabel), + pathType: section.type, + }) + ); + + return [ + ...sections, + { + label: "Community", + icon: "community", + to: "https://ravendb.net/community", + pathType: null, + external: true, + }, + ]; +}