p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make navigations sticky & scrollable

Browse Source
This commit is contained in:
p-sw 2024-06-02 09:31:36 +09:00
parent 99d4e02308
commit 0daee68832
3 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/DocsLayout.tsx
View File

@ -6,7 +6,7 @@ function SideNav() {
const location = useLocation();
return (
<nav className="md:flex flex-col justify-start items-start gap-8 p-8 hidden">
<nav className="sticky top-16 overflow-auto max-h-[calc(100vh-4rem)] md:flex flex-col justify-start items-start gap-8 p-8 hidden">
{Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
return (
<section

2
packages/react/src/DynamicLayout.tsx
View File

@ -47,7 +47,7 @@ export default function DynamicLayout({
{children}
</main>
</div>
<nav className="hidden lg:flex flex-col gap-2 py-8 px-4">
<nav className="hidden lg:flex flex-col gap-2 py-8 px-4 sticky top-16 overflow-auto max-h-[calc(100vh-4rem)]">
<span className="font-bold text-sm">On This Page</span>
<RecursivelyToc toc={toc} />

2
packages/react/src/MainLayout.tsx
View File

@ -88,7 +88,7 @@ function TopNav() {
return (
<>
<nav className="bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
<nav className="sticky top-0 z-50 bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
<div
data-role="wrapper"
className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"