Skip to content

Commit d217ac1

Browse files
mlaursenmlaursen
committed
docs(layout): Added demo for non-fixed AppBar layouts
1 parent abbe9a9 commit d217ac1

File tree

3 files changed

+210
-0
lines changed

3 files changed

+210
-0
lines changed

‎packages/documentation/src/components/Demos/Layout/NonFixedAppBarLayouts.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Since you might not want to always have the `AppBar` fixed to the top of the
2+
page for your layout, you can remove the fixed behavior by setting
3+
`fixed: false` with the `appBarProps` prop:
4+
5+
```tsx
6+
<Layout {...props} appBarProps={{ fixed: false }}>
7+
{children}
8+
</Layout>
9+
```
10+
11+
The example below will showcase this type of layout along with the
12+
`temporary-mini` layout.

‎packages/documentation/src/components/Demos/Layout/NonFixedAppBarLayouts.tsx‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
import React, { ReactElement, useState } from "react";
2+
import {
3+
HomeSVGIcon,
4+
ShareSVGIcon,
5+
StarSVGIcon,
6+
} from "@react-md/material-icons";
7+
import {
8+
Layout,
9+
LayoutNavigationTree,
10+
useLayoutNavigation,
11+
} from "@react-md/layout";
12+
import { CrossFade } from "@react-md/transition";
13+
import { Text, TextContainer } from "@react-md/typography";
14+
15+
const navItems: LayoutNavigationTree = {
16+
"/": {
17+
itemId: "/",
18+
parentId: null,
19+
children: "Home",
20+
leftAddon: <HomeSVGIcon />,
21+
},
22+
"/route-1": {
23+
itemId: "/route-1",
24+
parentId: null,
25+
children: "Route 1",
26+
leftAddon: <StarSVGIcon />,
27+
},
28+
"/divider-1": {
29+
itemId: "/divider-1",
30+
parentId: null,
31+
divider: true,
32+
isCustom: true,
33+
},
34+
"/route-2": {
35+
itemId: "/route-2",
36+
parentId: null,
37+
children: "Route 2",
38+
leftAddon: <ShareSVGIcon />,
39+
},
40+
};
41+
42+
export default function NonFixedAppBarLayouts(): ReactElement | null {
43+
const [selectedId, setSelectedId] = useState("/");
44+
return (
45+
<Layout
46+
id="non-fixed-app-bar-layout"
47+
title="Non-fixed AppBar Layout Title"
48+
navHeaderTitle="Another Title"
49+
phoneLayout="temporary-mini"
50+
tabletLayout="temporary-mini"
51+
landscapeTabletLayout="temporary-mini"
52+
desktopLayout="temporary-mini"
53+
appBarProps={{ fixed: false }}
54+
treeProps={{
55+
...useLayoutNavigation(navItems, selectedId),
56+
onItemSelect: setSelectedId,
57+
}}
58+
// setting `component: "div"` is only required since I already have a main
59+
// element due to the documentation site's Layout component
60+
mainProps={{ component: "div", style: { padding: "1rem" } }}
61+
>
62+
{/* just add an animation so it _looks_ like something happens */}
63+
<CrossFade key={selectedId}>
64+
<TextContainer>
65+
<Text>
66+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
67+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
68+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
69+
aliquip ex ea commodo consequat. Duis aute irure dolor in
70+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
71+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
72+
culpa qui officia deserunt mollit anim id est laborum.
73+
</Text>
74+
<Text>
75+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
76+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
77+
quae ab illo inventore veritatis et quasi architecto beatae vitae
78+
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
79+
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
80+
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
81+
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
82+
sed quia non numquam eius modi tempora incidunt ut labore et dolore
83+
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
84+
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
85+
aliquid ex ea commodi consequatur? Quis autem vel eum iure
86+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae
87+
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
88+
pariatur?
89+
</Text>
90+
<Text>
91+
At vero eos et accusamus et iusto odio dignissimos ducimus qui
92+
blanditiis praesentium voluptatum deleniti atque corrupti quos
93+
dolores et quas molestias excepturi sint occaecati cupiditate non
94+
provident, similique sunt in culpa qui officia deserunt mollitia
95+
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
96+
est et expedita distinctio. Nam libero tempore, cum soluta nobis est
97+
eligendi optio cumque nihil impedit quo minus id quod maxime placeat
98+
facere possimus, omnis voluptas assumenda est, omnis dolor
99+
repellendus. Temporibus autem quibusdam et aut officiis debitis aut
100+
rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
101+
et molestiae non recusandae. Itaque earum rerum hic tenetur a
102+
sapiente delectus, ut aut reiciendis voluptatibus maiores alias
103+
consequatur aut perferendis doloribus asperiores repellat.
104+
</Text>
105+
<Text>
106+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
107+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
108+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
109+
aliquip ex ea commodo consequat. Duis aute irure dolor in
110+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
111+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
112+
culpa qui officia deserunt mollit anim id est laborum.
113+
</Text>
114+
<Text>
115+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
116+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
117+
quae ab illo inventore veritatis et quasi architecto beatae vitae
118+
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
119+
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
120+
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
121+
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
122+
sed quia non numquam eius modi tempora incidunt ut labore et dolore
123+
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
124+
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
125+
aliquid ex ea commodi consequatur? Quis autem vel eum iure
126+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae
127+
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
128+
pariatur?
129+
</Text>
130+
<Text>
131+
At vero eos et accusamus et iusto odio dignissimos ducimus qui
132+
blanditiis praesentium voluptatum deleniti atque corrupti quos
133+
dolores et quas molestias excepturi sint occaecati cupiditate non
134+
provident, similique sunt in culpa qui officia deserunt mollitia
135+
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
136+
est et expedita distinctio. Nam libero tempore, cum soluta nobis est
137+
eligendi optio cumque nihil impedit quo minus id quod maxime placeat
138+
facere possimus, omnis voluptas assumenda est, omnis dolor
139+
repellendus. Temporibus autem quibusdam et aut officiis debitis aut
140+
rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
141+
et molestiae non recusandae. Itaque earum rerum hic tenetur a
142+
sapiente delectus, ut aut reiciendis voluptatibus maiores alias
143+
consequatur aut perferendis doloribus asperiores repellat.
144+
</Text>
145+
<Text>
146+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
147+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
148+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
149+
aliquip ex ea commodo consequat. Duis aute irure dolor in
150+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
151+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
152+
culpa qui officia deserunt mollit anim id est laborum.
153+
</Text>
154+
<Text>
155+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
156+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
157+
quae ab illo inventore veritatis et quasi architecto beatae vitae
158+
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
159+
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
160+
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
161+
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
162+
sed quia non numquam eius modi tempora incidunt ut labore et dolore
163+
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
164+
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
165+
aliquid ex ea commodi consequatur? Quis autem vel eum iure
166+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae
167+
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
168+
pariatur?
169+
</Text>
170+
<Text>
171+
At vero eos et accusamus et iusto odio dignissimos ducimus qui
172+
blanditiis praesentium voluptatum deleniti atque corrupti quos
173+
dolores et quas molestias excepturi sint occaecati cupiditate non
174+
provident, similique sunt in culpa qui officia deserunt mollitia
175+
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
176+
est et expedita distinctio. Nam libero tempore, cum soluta nobis est
177+
eligendi optio cumque nihil impedit quo minus id quod maxime placeat
178+
facere possimus, omnis voluptas assumenda est, omnis dolor
179+
repellendus. Temporibus autem quibusdam et aut officiis debitis aut
180+
rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
181+
et molestiae non recusandae. Itaque earum rerum hic tenetur a
182+
sapiente delectus, ut aut reiciendis voluptatibus maiores alias
183+
consequatur aut perferendis doloribus asperiores repellat.
184+
</Text>
185+
</TextContainer>
186+
</CrossFade>
187+
</Layout>
188+
);
189+
}

‎packages/documentation/src/components/Demos/Layout/index.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import configurableLayout from "./ConfigurableLayout.md";
99
import ControllingTheLayout from "./ControllingTheLayout";
1010
import controllingTheLayout from "./ControllingTheLayout.md";
1111

12+
import NonFixedAppBarLayouts from "./NonFixedAppBarLayouts";
13+
import nonFixedAppBarLayouts from "./NonFixedAppBarLayouts.md";
14+
1215
const modalProps = {
1316
fullPage: true,
1417
fullPageFAB: true,
@@ -32,6 +35,12 @@ const demos = [
3235
description: controllingTheLayout,
3336
children: <ControllingTheLayout />,
3437
},
38+
{
39+
...modalProps,
40+
name: "Non-Fixed App Bar Layouts",
41+
description: nonFixedAppBarLayouts,
42+
children: <NonFixedAppBarLayouts />,
43+
},
3544
];
3645

3746
export default function Layout(): ReactElement {

0 commit comments

Comments
 (0)