Skip to content

RDoc-3692 Fix mobile sidebar, add pathUtils #2278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ppekrol merged 2 commits into from
Feb 16, 2026
Merged

RDoc-3692 Fix mobile sidebar, add pathUtils #2278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3cda50
RDoc-3692 Fix mobile sidebar, add pathUtils
mateuszbartosik Feb 10, 2026
ba3e29f
RDoc-3692 Review fixes
mateuszbartosik Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 16 additions & 42 deletions src/theme/DocSidebar/Desktop/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import clsx from "clsx";
import {useThemeConfig} from "@docusaurus/theme-common";
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 type { Props } from "@theme/DocSidebar/Desktop";

import styles from "./styles.module.css";
import Link from "@docusaurus/Link";
Expand All @@ -14,60 +14,35 @@ import {
useActiveDocContext,
useLatestVersion,
} from "@docusaurus/plugin-content-docs/client";
import {Icon} from "@site/src/components/Common/Icon";
import { Icon } from "@site/src/components/Common/Icon";
import {
getPathType,
getLandingPagePath,
PathType,
} from "../../../typescript/pathUtils";

function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) {
const {
navbar: {hideOnScroll},
navbar: { hideOnScroll },
docs: {
sidebar: {hideable},
sidebar: { hideable },
},
} = useThemeConfig();

enum PathType {
Cloud = "CLOUD",
Guides = "GUIDES",
Documentation = "DOCUMENTATION",
Templates = "TEMPLATES"
}

const pluginId = "default";
const {activeVersion} = useActiveDocContext(pluginId);
const { activeVersion } = useActiveDocContext(pluginId);
const latestVersion = useLatestVersion(pluginId);
const versionLabel = activeVersion?.label ?? latestVersion.label;

const pathType: PathType = (() => {
if (path.includes("/cloud")) {
return PathType.Cloud;
}
if (path.includes("/guides")) {
return PathType.Guides;
}
if (path.includes("/templates")) {
return PathType.Templates;
}
return PathType.Documentation;
})();

const landingPagePath: string = (() => {
if (pathType === PathType.Cloud) {
return "/cloud";
}
if (pathType === PathType.Guides) {
return "/guides";
}
if (pathType === PathType.Templates) {
return "/templates";
}
return `/${versionLabel}`;
})();
const pathType = getPathType(path);
const landingPagePath = getLandingPagePath(pathType, versionLabel);

return (
<div
className={clsx(
styles.sidebar,
hideOnScroll && styles.sidebarWithHideableNavbar,
isHidden && styles.sidebarHidden
isHidden && styles.sidebarHidden,
)}
>
{hideOnScroll && (
Expand All @@ -81,8 +56,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
</div>
{pathType !== PathType.Guides && (
<Link to="/guides" className="menu__link group">
<Icon icon="guides" size="xs" className="me-2" />{" "}
Guides
<Icon icon="guides" size="xs" className="me-2" /> Guides
<small className="flex items-center ms-auto gap-1 text-[0.675rem] opacity-0 group-hover:opacity-100 !transition-all">
Switch <Icon icon="arrow-thin-right" size="xs" />
</small>
Expand Down
193 changes: 106 additions & 87 deletions src/theme/DocSidebar/Mobile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,130 @@
import React from "react";
import clsx from "clsx";
import {
NavbarSecondaryMenuFiller,
ThemeClassNames,
NavbarSecondaryMenuFiller,
ThemeClassNames,
} from "@docusaurus/theme-common";
import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
import DocSidebarItems from "@theme/DocSidebarItems";
import type { Props } from "@theme/DocSidebar/Mobile";
import Link from "@docusaurus/Link";
import {
useActiveDocContext,
useLatestVersion,
useActiveDocContext,
useLatestVersion,
} from "@docusaurus/plugin-content-docs/client";
import { Icon } from "@site/src/components/Common/Icon";
import type { Props as DocSidebarProps } from "@theme/DocSidebar";
import SidebarVersionDropdown from "@site/src/components/SidebarVersionDropdown";
import {
getPathType,
getLandingPagePath,
PathType,
} from "../../../typescript/pathUtils";

function DocSidebarMobileSecondaryMenu({ sidebar, path }: DocSidebarProps) {
const mobileSidebar = useNavbarMobileSidebar();
const mobileSidebar = useNavbarMobileSidebar();

const pluginId = "default";
const { activeVersion } = useActiveDocContext(pluginId);
const latestVersion = useLatestVersion(pluginId);
const versionLabel = activeVersion?.label ?? latestVersion.label;
const pluginId = "default";
const { activeVersion } = useActiveDocContext(pluginId);
const latestVersion = useLatestVersion(pluginId);
const versionLabel = activeVersion?.label ?? latestVersion.label;

const isCloudPath = path.includes("/cloud");
const pathType = getPathType(path);
const landingPagePath = getLandingPagePath(pathType, versionLabel);

return (
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
<li className="menu__list-item">
<div className="menu__list-item-collapsible">
<Link
to={isCloudPath ? "/cloud" : `/${versionLabel}`}
className="menu__link"
onClick={() => mobileSidebar.toggle()}
>
<Icon icon="home" size="xs" className="me-2" /> Start
</Link>
</div>
</li>
<li className="menu__list-item">
<Link
to={isCloudPath ? `/${versionLabel}` : "/cloud"}
className="menu__link group"
onClick={() => mobileSidebar.toggle()}
>
<Icon
icon={isCloudPath ? "database" : "cloud"}
size="xs"
className="me-2"
/>{" "}
RavenDB {!isCloudPath && "Cloud"} Docs
<small className="flex items-center ms-auto gap-1 text-[0.675rem]">
Switch <Icon icon="arrow-thin-right" size="xs" />
</small>
</Link>
</li>
<li className="menu__list-item">
<Link
to="https://ravendb.net/community"
className="menu__link group"
onClick={() => mobileSidebar.toggle()}
>
<Icon icon="community" size="xs" className="me-2" /> Community
<Icon icon="newtab" size="xs" className="ms-auto" />
</Link>
</li>
{!isCloudPath && (
<li className="menu__list-item">
<Link
to={`/${versionLabel}/whats-new`}
className="menu__link"
onClick={() => mobileSidebar.toggle()}
>
<Icon icon="star-filled" size="xs" className="me-2" /> What's new
</Link>
</li>
)}
<li className="menu__list-item !my-3">
<hr className="!my-0 !mx-3 !bg-black/10 dark:!bg-white/10" />
</li>
{!isCloudPath && <SidebarVersionDropdown />}
<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>
);
return (
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
<li className="menu__list-item">
<div className="menu__list-item-collapsible">
<Link
to={landingPagePath}
className="menu__link"
onClick={() => mobileSidebar.toggle()}
>
<Icon icon="home" size="xs" className="me-2" /> Start
</Link>
</div>
</li>
{pathType !== PathType.Guides && (
<Link to="/guides" className="menu__link group">
<Icon icon="guides" size="xs" className="me-2" /> Guides
<small className="flex items-center ms-auto gap-1 text-[0.675rem]">
Switch <Icon icon="arrow-thin-right" size="xs" />
</small>
</Link>
)}
{pathType !== PathType.Documentation && (
<Link to={`/${versionLabel}`} className="menu__link group">
<Icon icon="database" size="xs" className="me-2" /> RavenDB
Docs
<small className="flex items-center ms-auto gap-1 text-[0.675rem]">
Switch <Icon icon="arrow-thin-right" size="xs" />
</small>
</Link>
)}
{pathType !== PathType.Cloud && (
<Link to="/cloud" className="menu__link group">
<Icon icon="cloud" size="xs" className="me-2" /> RavenDB
Cloud Docs
<small className="flex items-center ms-auto gap-1 text-[0.675rem]">
Switch <Icon icon="arrow-thin-right" size="xs" />
</small>
</Link>
)}
<Link
to="https://ravendb.net/community"
className="menu__link group"
>
<Icon icon="community" size="xs" className="me-2" /> Community
<Icon icon="newtab" size="xs" className="ms-auto" />
</Link>
{pathType !== PathType.Cloud && pathType !== PathType.Guides && (
<li className="menu__list-item">
<Link
to={`/${versionLabel}/whats-new`}
className="menu__link"
onClick={() => mobileSidebar.toggle()}
>
<Icon icon="star-filled" size="xs" className="me-2" />{" "}
What's new
</Link>
</li>
)}
{pathType !== PathType.Guides && (
<li className="menu__list-item !my-3">
<hr className="!my-0 !mx-3 !bg-black/10 dark:!bg-white/10" />
</li>
)}
{pathType !== PathType.Cloud && pathType !== PathType.Guides && (
<SidebarVersionDropdown />
)}
{pathType !== PathType.Guides && (
<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}
/>
);
return (
<NavbarSecondaryMenuFiller
component={DocSidebarMobileSecondaryMenu}
props={props}
/>
);
}

export default React.memo(DocSidebarMobile);
34 changes: 34 additions & 0 deletions src/typescript/pathUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
export const PathType = {
Cloud: "CLOUD",
Guides: "GUIDES",
Documentation: "DOCUMENTATION",
Templates: "TEMPLATES"
} as const;

export type PathType = typeof PathType[keyof typeof PathType];

export function getPathType(path: string): PathType {
if (path.includes("/cloud")) {
return PathType.Cloud;
}
if (path.includes("/guides")) {
return PathType.Guides;
}
if (path.includes("/templates")) {
return PathType.Templates;
}
return PathType.Documentation;
}

export function getLandingPagePath(pathType: PathType, versionLabel: string): string {
if (pathType === PathType.Cloud) {
return "/cloud";
}
if (pathType === PathType.Guides) {
return "/guides";
}
if (pathType === PathType.Templates) {
return "/templates";
}
return `/${versionLabel}`;
}