Skip to main contentSkip to sidebarSkip to headerSkip to footer

Page Layout

A comprehensive layout structure for a standard page. When using sidebars, you must wrap your app with SidebarProvider.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
import { PageLayout } from "passport-ui";
import { 
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarInput,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger
} from "passport-ui";
import { ContentContainer } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// Place SidebarProvider at app root level
<SidebarProvider defaultOpen={true}>
  <PageLayout
  sidebar={
    <Sidebar
      variant="sidebar"
      side="left"
      collapsible={true}
      blurred={false}
      mobileOnly={false}
    >
      <SidebarHeader className="group-data-[state=collapsed]:hidden">
        <div className="meta-container">
          <h3>My App</h3>
          <p>Version 1.0.0</p>
        </div>
      </SidebarHeader>
 
      <SidebarContent>
        {/* Sidebar content */}
      </SidebarContent>
 
      <SidebarFooter>
        <div className="flex items-center justify-between group-data-[state=collapsed]:justify-center">
          <div className="flex-1 group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:invisible group-data-[state=collapsed]:w-0 transition-all duration-200">
            {/* Footer content */}
          </div>
          <SidebarTrigger />
        </div>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  }
  header={
    <div className="flex justify-between items-center">
      <h2>Dashboard</h2>
      <nav>Navigation items</nav>
    </div>
  }
  footer={
    <div className="flex justify-between items-center">
      <p>&copy; 2024 My App</p>
      <div>Footer links</div>
    </div>
  }
  headerOptions={{
    sticky: true,
    blurred: true,
    variant: "full"
  }}
  footerOptions={{
    sticky: false,
    blurred: false,
    variant: "full"
  }}
>
    <ContentContainer variant="broad">
      <div className="section-container">
        <h1>Welcome to the Dashboard</h1>
        <p>Your main content goes here.</p>
      </div>
    </ContentContainer>
  </PageLayout>
</SidebarProvider>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗