[core][xs]: fix Navbar title not showing
This commit is contained in:
Ola Rubaj
parent
c5e17810af
commit
c63551a54e
5
.changeset/cuddly-pears-burn.md
Normal file
5
.changeset/cuddly-pears-burn.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
'@portaljs/core': patch
|
||||
---
|
||||
|
||||
Fix Navbar version not showing.
|
||||
@ -16,131 +16,132 @@ import { NavConfig, ThemeConfig } from "../Nav";
|
||||
import { AuthorConfig } from "../types";
|
||||
|
||||
interface Props extends React.PropsWithChildren {
|
||||
showComments: boolean;
|
||||
showEditLink: boolean;
|
||||
showSidebar: boolean;
|
||||
showToc: boolean;
|
||||
nav: NavConfig;
|
||||
author: AuthorConfig;
|
||||
theme: ThemeConfig;
|
||||
urlPath: string;
|
||||
commentsConfig: CommentsConfig;
|
||||
siteMap: Array<NavItem | NavGroup>;
|
||||
editUrl?: string;
|
||||
showComments: boolean;
|
||||
showEditLink: boolean;
|
||||
showSidebar: boolean;
|
||||
showToc: boolean;
|
||||
nav: NavConfig;
|
||||
author: AuthorConfig;
|
||||
theme: ThemeConfig;
|
||||
urlPath: string;
|
||||
commentsConfig: CommentsConfig;
|
||||
siteMap: Array<NavItem | NavGroup>;
|
||||
editUrl?: string;
|
||||
}
|
||||
|
||||
export const Layout: React.FC<Props> = ({
|
||||
children,
|
||||
nav,
|
||||
author,
|
||||
theme,
|
||||
showEditLink,
|
||||
showToc,
|
||||
showSidebar,
|
||||
urlPath,
|
||||
showComments,
|
||||
commentsConfig,
|
||||
editUrl,
|
||||
siteMap,
|
||||
children,
|
||||
nav,
|
||||
author,
|
||||
theme,
|
||||
showEditLink,
|
||||
showToc,
|
||||
showSidebar,
|
||||
urlPath,
|
||||
showComments,
|
||||
commentsConfig,
|
||||
editUrl,
|
||||
siteMap,
|
||||
}) => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [tableOfContents, setTableOfContents] = useState<TocSection[]>([]);
|
||||
const currentSection = useTableOfContents(tableOfContents);
|
||||
const router: NextRouter = useRouter();
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [tableOfContents, setTableOfContents] = useState<TocSection[]>([]);
|
||||
const currentSection = useTableOfContents(tableOfContents);
|
||||
const router: NextRouter = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!showToc) return;
|
||||
const headingNodes: NodeListOf<HTMLHeadingElement> =
|
||||
document.querySelectorAll("h1,h2,h3");
|
||||
const toc = collectHeadings(headingNodes);
|
||||
setTableOfContents(toc ?? []);
|
||||
}, [router.asPath, showToc]); // update table of contents on route change with next/link
|
||||
useEffect(() => {
|
||||
if (!showToc) return;
|
||||
const headingNodes: NodeListOf<HTMLHeadingElement> =
|
||||
document.querySelectorAll("h1,h2,h3");
|
||||
const toc = collectHeadings(headingNodes);
|
||||
setTableOfContents(toc ?? []);
|
||||
}, [router.asPath, showToc]); // update table of contents on route change with next/link
|
||||
|
||||
useEffect(() => {
|
||||
function onScroll() {
|
||||
setIsScrolled(window.scrollY > 0);
|
||||
}
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => {
|
||||
window.removeEventListener("scroll", onScroll);
|
||||
};
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
function onScroll() {
|
||||
setIsScrolled(window.scrollY > 0);
|
||||
}
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => {
|
||||
window.removeEventListener("scroll", onScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💐</text></svg>"
|
||||
/>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
<div className="min-h-screen bg-background dark:bg-background-dark">
|
||||
{/* NAVBAR */}
|
||||
<div
|
||||
className={clsx(
|
||||
"sticky top-0 z-50 w-full",
|
||||
isScrolled
|
||||
? "dark:bg-background-dark/95 bg-background/95 backdrop-blur [@supports(backdrop-filter:blur(0))]:dark:bg-background-dark/75"
|
||||
: "dark:bg-background-dark bg-background"
|
||||
)}
|
||||
>
|
||||
<div className="max-w-8xl mx-auto p-4 md:px-8">
|
||||
<Nav
|
||||
title={nav.title}
|
||||
logo={nav.logo}
|
||||
links={nav.links}
|
||||
search={nav.search}
|
||||
social={nav.social}
|
||||
defaultTheme={theme.defaultTheme}
|
||||
themeToggleIcon={theme.themeToggleIcon}
|
||||
>
|
||||
{showSidebar && <SiteToc currentPath={urlPath} nav={siteMap} />}
|
||||
</Nav>
|
||||
</div>
|
||||
</div>
|
||||
{/* wrapper for sidebar, main content and ToC */}
|
||||
<div
|
||||
className={clsx(
|
||||
"max-w-8xl mx-auto px-4 md:px-8",
|
||||
showSidebar && "lg:ml-[18rem]"
|
||||
)}
|
||||
>
|
||||
{/* SIDEBAR */}
|
||||
{showSidebar && (
|
||||
<div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
|
||||
<SiteToc currentPath={urlPath} nav={siteMap} />
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💐</text></svg>"
|
||||
/>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
<div className="min-h-screen bg-background dark:bg-background-dark">
|
||||
{/* NAVBAR */}
|
||||
<div
|
||||
className={clsx(
|
||||
"sticky top-0 z-50 w-full",
|
||||
isScrolled
|
||||
? "dark:bg-background-dark/95 bg-background/95 backdrop-blur [@supports(backdrop-filter:blur(0))]:dark:bg-background-dark/75"
|
||||
: "dark:bg-background-dark bg-background"
|
||||
)}
|
||||
>
|
||||
<div className="max-w-8xl mx-auto p-4 md:px-8">
|
||||
<Nav
|
||||
title={nav.title}
|
||||
logo={nav.logo}
|
||||
links={nav.links}
|
||||
search={nav.search}
|
||||
social={nav.social}
|
||||
defaultTheme={theme.defaultTheme}
|
||||
themeToggleIcon={theme.themeToggleIcon}
|
||||
version={nav.version}
|
||||
>
|
||||
{showSidebar && <SiteToc currentPath={urlPath} nav={siteMap} />}
|
||||
</Nav>
|
||||
</div>
|
||||
</div>
|
||||
{/* wrapper for sidebar, main content and ToC */}
|
||||
<div
|
||||
className={clsx(
|
||||
"max-w-8xl mx-auto px-4 md:px-8",
|
||||
showSidebar && "lg:ml-[18rem]"
|
||||
)}
|
||||
>
|
||||
{/* SIDEBAR */}
|
||||
{showSidebar && (
|
||||
<div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
|
||||
<SiteToc currentPath={urlPath} nav={siteMap} />
|
||||
</div>
|
||||
)}
|
||||
{/* MAIN CONTENT & FOOTER */}
|
||||
<main className="mx-auto pt-8">
|
||||
{children}
|
||||
{/* EDIT THIS PAGE LINK */}
|
||||
{showEditLink && editUrl && <EditThisPage url={editUrl} />}
|
||||
{/* PAGE COMMENTS */}
|
||||
{showComments && (
|
||||
<div
|
||||
className="prose mx-auto pt-6 pb-6 text-center text-gray-700 dark:text-gray-300"
|
||||
id="comment"
|
||||
>
|
||||
{<Comments commentsConfig={commentsConfig} slug={urlPath} />}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
<Footer links={nav.links} author={author} />
|
||||
{/** TABLE OF CONTENTS */}
|
||||
{showToc && tableOfContents.length > 0 && (
|
||||
<div className="hidden xl:block fixed z-20 w-[18rem] top-[4.6rem] bottom-0 right-[max(0px,calc(50%-44rem))] left-auto pt-8 pr-8 overflow-y-auto">
|
||||
<TableOfContents
|
||||
tableOfContents={tableOfContents}
|
||||
currentSection={currentSection}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* MAIN CONTENT & FOOTER */}
|
||||
<main className="mx-auto pt-8">
|
||||
{children}
|
||||
{/* EDIT THIS PAGE LINK */}
|
||||
{showEditLink && editUrl && <EditThisPage url={editUrl} />}
|
||||
{/* PAGE COMMENTS */}
|
||||
{showComments && (
|
||||
<div
|
||||
className="prose mx-auto pt-6 pb-6 text-center text-gray-700 dark:text-gray-300"
|
||||
id="comment"
|
||||
>
|
||||
{<Comments commentsConfig={commentsConfig} slug={urlPath} />}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
<Footer links={nav.links} author={author} />
|
||||
{/** TABLE OF CONTENTS */}
|
||||
{showToc && tableOfContents.length > 0 && (
|
||||
<div className="hidden xl:block fixed z-20 w-[18rem] top-[4.6rem] bottom-0 right-[max(0px,calc(50%-44rem))] left-auto pt-8 pr-8 overflow-y-auto">
|
||||
<TableOfContents
|
||||
tableOfContents={tableOfContents}
|
||||
currentSection={currentSection}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
27
packages/core/src/ui/Nav/Nav.stories.tsx
Normal file
27
packages/core/src/ui/Nav/Nav.stories.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { NavTitle } from './NavTitle';
|
||||
|
||||
const meta: Meta<typeof NavTitle> = {
|
||||
component: NavTitle,
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof NavTitle>;
|
||||
|
||||
export const Basic: Story = {
|
||||
args: {
|
||||
title: 'Title',
|
||||
logo: 'https://via.placeholder.com/50',
|
||||
},
|
||||
};
|
||||
|
||||
export const WithVersion: Story = {
|
||||
args: {
|
||||
title: 'Title',
|
||||
logo: 'https://via.placeholder.com/50',
|
||||
version: 'Alpha',
|
||||
},
|
||||
};
|
||||
@ -1,27 +1,27 @@
|
||||
import Link from "next/link.js";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
logo?: string;
|
||||
version?: string;
|
||||
title: string;
|
||||
logo?: string;
|
||||
version?: string;
|
||||
}
|
||||
|
||||
export const NavTitle: React.FC<Props> = ({ title, logo, version }) => {
|
||||
return (
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Home page"
|
||||
className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white"
|
||||
>
|
||||
{logo && (
|
||||
<img src={logo} alt={title} className="nav-logo mr-1 fill-white" />
|
||||
)}
|
||||
{title && <span>{title}</span>}
|
||||
{version && (
|
||||
<div className="mx-2 rounded-full border border-slate-500 py-1 px-3 text-xs text-slate-500">
|
||||
{version}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Home page"
|
||||
className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white"
|
||||
>
|
||||
{logo && (
|
||||
<img src={logo} alt={title} className="nav-logo mr-1 fill-white" />
|
||||
)}
|
||||
{title && <span>{title}</span>}
|
||||
{version && (
|
||||
<span className="inline-flex items-center rounded-full bg-gray-50 ml-2 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
|
||||
{version}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user