var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},i=(n,e,a,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of y(e))!F.call(n,r)&&r!==a&&s(n,r,{get:()=>e[r],enumerable:!(c=E(e,r))||c.enumerable});return n};var g=(n,e,a)=>(a=n!=null?p(x(n)):{},i(e||!n||!n.__esModule?s(a,"default",{value:n,enumerable:!0}):a,n)),u=n=>i(s({},"__esModule",{value:!0}),n);var d=f((v,o)=>{o.exports=_jsx_runtime});var B={};m(B,{default:()=>h,frontmatter:()=>b});var l=g(d()),b={title:"Dashboard Layout Options",description:"Choose between two different layout options for your dashboard."};function t(n){let e={a:"a",code:"code",figure:"figure",h2:"h2",p:"p",pre:"pre",span:"span",strong:"strong",...n.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:"Explore the different layout options available for customizing your dashboard. You have the choice between two layouts for the dashboard."}), ,(0,l.jsxs)(e.h2,{id:"centered-sidebar-and-main-content",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#centered-sidebar-and-main-content",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Centered Sidebar and Main Content"]}), ,(0,l.jsxs)(e.p,{children:["In this layout, both the sidebar and the main content are centered in the middle of the page, like ",(0,l.jsx)(e.strong,{children:"Stripe dashboard"}),"."]}), ,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",rawString:`<MaxWidthWrapper className="max-w-[1650px] px-0">
<div className="relative flex min-h-screen w-full">
<DashboardSidebar links={filteredLinks} />
<div className="flex flex-1 flex-col">
<header className="bg-background sticky top-0 z-50 flex h-14 items-center gap-3 px-4 lg:h-[60px] xl:px-10">
<MobileSheetSidebar links={filteredLinks} />
<div className="w-full flex-1">
<SearchCommand links={filteredLinks} />
</div>
<ModeToggle />
<UserAccountNav />
</header>
<main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 xl:px-10">
{children}
</main>
</div>
</div>
</MaxWidthWrapper>
`,children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MaxWidthWrapper"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"max-w-[1650px] px-0"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative flex min-h-screen w-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"DashboardSidebar"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" links"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{filteredLinks} />"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-1 flex-col"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"header"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"bg-background sticky top-0 z-50 flex h-14 items-center gap-3 px-4 lg:h-[60px] xl:px-10"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MobileSheetSidebar"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" links"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{filteredLinks} />"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-full flex-1"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SearchCommand"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" links"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{filteredLinks} />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ModeToggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"UserAccountNav"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"header"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"main"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-1 flex-col gap-4 p-4 lg:gap-6 xl:px-10"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"main"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MaxWidthWrapper"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]})]})})}),`
`,(0,l.jsxs)(e.h2,{id:"fixed-sidebar-with-centered-main-content",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#fixed-sidebar-with-centered-main-content",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Fixed Sidebar with Centered Main Content"]}),`
`,(0,l.jsxs)(e.p,{children:["In this layout, the sidebar is fixed to the left side of the window, while only the main content is centered on the page. This gives for a more ",(0,l.jsx)(e.strong,{children:"traditional look"}),". This is the default layout."]}),`
`,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`<div className="relative flex min-h-screen w-full">
<DashboardSidebar links={filteredLinks} />
<div className="flex flex-1 flex-col">
<header className="bg-background sticky top-0 z-50 flex h-14 px-4 lg:h-[60px] xl:px-8">
<MaxWidthWrapper className="flex max-w-7xl items-center gap-x-3 px-0">
<MobileSheetSidebar links={filteredLinks} />
<div className="w-full flex-1">
<SearchCommand links={filteredLinks} />
</div>
<ModeToggle />
<UserAccountNav />
</MaxWidthWrapper>
</header>
<main className="flex-1 p-4 xl:px-8">
<MaxWidthWrapper className="flex h-full max-w-7xl flex-col gap-4 px-0 lg:gap-6">
{children}
</MaxWidthWrapper>
</main>
</div>
</div>
`,children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative flex min-h-screen w-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"DashboardSidebar"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" links"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{filteredLinks} />"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-1 flex-col"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"header"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"bg-background sticky top-0 z-50 flex h-14 px-4 lg:h-[60px] xl:px-8"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MaxWidthWrapper"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex max-w-7xl items-center gap-x-3 px-0"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MobileSheetSidebar"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" links"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{filteredLinks} />"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-full flex-1"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SearchCommand"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" links"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{filteredLinks} />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ModeToggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"UserAccountNav"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MaxWidthWrapper"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"header"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"main"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex-1 p-4 xl:px-8"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MaxWidthWrapper"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex h-full max-w-7xl flex-col gap-4 px-0 lg:gap-6"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"MaxWidthWrapper"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"main"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"</"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]})]})})}),`
`,(0,l.jsx)(e.p,{children:"Feel free to choose the layout that best fits your design preferences and user experience goals."})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(t,{...n})}):t(n)}return u(B);})();
;return Component;