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

fix: make DocsLayout responsive to client width

Browse Source
This commit is contained in:
p-sw 2024-06-01 19:22:12 +09:00
parent 7a92a63a0e
commit 45be6f0413
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ function SideNav() {
const location = useLocation(); const location = useLocation();
return ( return (
<nav className="flex flex-col justify-start items-start gap-8 p-8"> <nav className="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
@ -33,12 +33,14 @@ function SideNav() {
function DocsLayout() { function DocsLayout() {
return ( return (
<div className="flex-grow grid grid-cols-[16rem_1fr] w-full max-w-5xl mx-auto"> <div className="flex-grow grid grid-cols-1 md:grid-cols-[12rem_1fr] w-full max-w-5xl mx-auto">
<SideNav /> <SideNav />
<main className="prose prose-lg p-8 dark:prose-invert"> <div className="w-full flex flex-col items-center">
<main className="w-full prose-sm prose p-8 dark:prose-invert">
<Outlet /> <Outlet />
</main> </main>
</div> </div>
</div>
); );
} }