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(); const location = useLocation();
return ( 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]) => { {Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
return ( return (
<section <section

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

@ -47,7 +47,7 @@ export default function DynamicLayout({
{children} {children}
</main> </main>
</div> </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> <span className="font-bold text-sm">On This Page</span>
<RecursivelyToc toc={toc} /> <RecursivelyToc toc={toc} />

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

@ -88,7 +88,7 @@ function TopNav() {
return ( 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 <div
data-role="wrapper" data-role="wrapper"
className="flex flex-row items-center justify-between w-full max-w-6xl text-lg" className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"