diff --git a/.changeset/witty-dryers-buy.md b/.changeset/witty-dryers-buy.md new file mode 100644 index 000000000..761787676 --- /dev/null +++ b/.changeset/witty-dryers-buy.md @@ -0,0 +1,6 @@ +--- +"@myst-theme/site": patch +"@myst-theme/book": patch +--- + +✨ Add navbar_end part in navbar UI diff --git a/docs/_site/navbar_end.md b/docs/_site/navbar_end.md new file mode 100644 index 000000000..01901751f --- /dev/null +++ b/docs/_site/navbar_end.md @@ -0,0 +1 @@ +{button}`MyST Docs ` {button}`GitHub ` diff --git a/docs/myst.yml b/docs/myst.yml index 0b387c052..226530486 100644 --- a/docs/myst.yml +++ b/docs/myst.yml @@ -18,6 +18,7 @@ project: 📢 **Announcement:** This is a test banner for the MyST Theme! [Learn more about MyST](/reference). footer: _site/footer.md primary_sidebar_footer: _site/primary_sidebar_footer.md + navbar_end: _site/navbar_end.md toc: - file: index.md - file: ui.md diff --git a/docs/ui.md b/docs/ui.md index edf8cf97c..169e05fc9 100644 --- a/docs/ui.md +++ b/docs/ui.md @@ -7,6 +7,10 @@ This page documents site-level UI components that appear on every page. use the Many of the UI areas below allow users to insert custom content or interface elements using **parts**. These are documented below, and in each case they use the same configuration pattern through `site.parts` or `project.parts` in `myst.yml`. +:::{note} +Parts are only supported in the **book** theme. The article theme does not yet support parts configuration. +::: + ## Navigation bar ### Site logo @@ -94,6 +98,28 @@ site: - If the `.md` file it points to is empty, the footer will not be visible - If not configured, falls back to the default "Made with MyST" footer +## Navbar End + +Display custom content at the end of the top navigation bar, after the theme toggle button. +This is useful for adding icon links, badges, or call-to-action buttons to your navbar. + +### Configuration + +Create a markdown file with your navbar content and add it to `myst.yml`: + +```yaml +site: + parts: + navbar_end: _site/navbar_end.md +``` + +### Behavior + +- Renders inline at the end of the navbar (after the theme toggle and action buttons) +- Supports any MyST markdown content (links, images, formatting, etc.) +- Content is rendered inline, so keep it short - a few links or icons work best +- On narrow screens, the content moves into the primary sidebar menu + ## Hiding Elements Control the visibility of various page elements. All options can be set site-wide or per-page. diff --git a/packages/site/src/components/Navigation/Navigation.tsx b/packages/site/src/components/Navigation/Navigation.tsx index 6fd8d5b56..21cd0e1b0 100644 --- a/packages/site/src/components/Navigation/Navigation.tsx +++ b/packages/site/src/components/Navigation/Navigation.tsx @@ -3,6 +3,7 @@ import { PrimarySidebar } from './PrimarySidebar.js'; import type { Heading } from '@myst-theme/common'; import { getProjectHeadings } from '@myst-theme/common'; import type { SiteManifest } from 'myst-config'; +import type { GenericParent } from 'myst-common'; /** * PrimaryNavigation will load nav links and headers from the site manifest and display @@ -15,6 +16,7 @@ export const PrimaryNavigation = ({ hide_toc, mobileOnly, footer, + navbarEnd, }: { children?: React.ReactNode; projectSlug?: string; @@ -22,6 +24,7 @@ export const PrimaryNavigation = ({ hide_toc?: boolean; mobileOnly?: boolean; footer?: React.ReactNode; + navbarEnd?: GenericParent; }) => { const config = useSiteManifest(); if (!config) return null; @@ -41,6 +44,7 @@ export const PrimaryNavigation = ({ nav={nav} headings={headings} footer={footer} + navbarEnd={navbarEnd} /> ); }; @@ -63,6 +67,7 @@ export const ConfigurablePrimaryNavigation = ({ nav, headings, footer, + navbarEnd, }: { children?: React.ReactNode; sidebarRef?: React.RefObject; @@ -71,6 +76,7 @@ export const ConfigurablePrimaryNavigation = ({ nav?: SiteManifest['nav']; headings?: Heading[]; footer?: React.ReactNode; + navbarEnd?: GenericParent; }) => { const [open, setOpen] = useNavOpen(); const top = useThemeTop(); @@ -107,6 +113,7 @@ export const ConfigurablePrimaryNavigation = ({ nav={nav} headings={headings} footer={footer} + navbarEnd={navbarEnd} hide_toc={hide_toc} mobileOnly={mobileOnly} /> diff --git a/packages/site/src/components/Navigation/PrimarySidebar.tsx b/packages/site/src/components/Navigation/PrimarySidebar.tsx index 3b35899d5..9969b5eda 100644 --- a/packages/site/src/components/Navigation/PrimarySidebar.tsx +++ b/packages/site/src/components/Navigation/PrimarySidebar.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useRef } from 'react'; import classNames from 'classnames'; import { useNavigation } from '@remix-run/react'; +import type { GenericParent } from 'myst-common'; +import { MyST } from 'myst-to-react'; import { useNavOpen, useSiteManifest, @@ -149,6 +151,7 @@ export const PrimarySidebar = ({ sidebarRef, nav, footer, + navbarEnd, headings, hide_toc, mobileOnly, @@ -157,6 +160,7 @@ export const PrimarySidebar = ({ nav?: SiteManifest['nav']; headings?: Heading[]; footer?: React.ReactNode; + navbarEnd?: GenericParent; hide_toc?: boolean; mobileOnly?: boolean; }) => { @@ -222,6 +226,16 @@ export const PrimarySidebar = ({ )} + {navbarEnd && ( +
+ +
+ )} {nav && headings &&
} {headings && (