Page Layout

1import { PageLayout } from "passport-ui";
2import { SidebarContainer } from "passport-ui";
3import { ContentContainer } from "passport-ui";

1<PageLayout
2  leftSidebar={
3    <SidebarContainer
4      sidebarHeader={
5        <div className="meta-container">
6          <h3>My App</h3>
7          <p>Version 1.0.0</p>
8        </div>
9      }
10    >
11      {/* Sidebar content */}
12    </SidebarContainer>
13  }
14  header={
15    <div className="flex justify-between items-center">
16      <h2>Dashboard</h2>
17      <nav>Navigation items</nav>
18    </div>
19  }
20  footer={
21    <div className="flex justify-between items-center">
22      <p>&copy; 2024 My App</p>
23      <div>Footer links</div>
24    </div>
25  }
26  headerOptions={{
27    sticky: true,
28    blurred: true,
29    variant: "full"
30  }}
31  footerOptions={{
32    sticky: false,
33    blurred: false,
34    variant: "full"
35  }}
36>
37  <ContentContainer variant="broad">
38    <div className="section-container">
39      <h1>Welcome to the Dashboard</h1>
40      <p>Your main content goes here.</p>
41    </div>
42  </ContentContainer>
43</PageLayout>