docs(layout): Added demo for non-fixed AppBar layouts

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

@@ -0,0 +1,12 @@
+Since you might not want to always have the `AppBar` fixed to the top of the
+page for your layout, you can remove the fixed behavior by setting
+`fixed: false` with the `appBarProps` prop:
+
+```tsx
+<Layout {...props} appBarProps={{ fixed: false }}>
+  {children}
+</Layout>
+```
+
+The example below will showcase this type of layout along with the
+`temporary-mini` layout.

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

@@ -0,0 +1,192 @@
+import React, { ReactElement, useState } from "react";
+import {
+  HomeSVGIcon,
+  ShareSVGIcon,
+  StarSVGIcon,
+} from "@react-md/material-icons";
+import {
+  Layout,
+  LayoutNavigationTree,
+  useLayoutNavigation,
+} from "@react-md/layout";
+import { CrossFade } from "@react-md/transition";
+import { Text, TextContainer } from "@react-md/typography";
+
+const navItems: LayoutNavigationTree = {
+  "/": {
+    itemId: "/",
+    parentId: null,
+    children: "Home",
+    leftAddon: <HomeSVGIcon />,
+  },
+  "/route-1": {
+    itemId: "/route-1",
+    parentId: null,
+    children: "Route 1",
+    leftAddon: <StarSVGIcon />,
+  },
+  "/divider-1": {
+    itemId: "/divider-1",
+    parentId: null,
+    divider: true,
+    isCustom: true,
+  },
+  "/route-2": {
+    itemId: "/route-2",
+    parentId: null,
+    children: "Route 2",
+    leftAddon: <ShareSVGIcon />,
+  },
+};
+
+export default function NonFixedAppBarLayouts(): ReactElement | null {
+  const [selectedId, setSelectedId] = useState("/");
+  return (
+    <Layout
+      id="non-fixed-app-bar-layout"
+      title="Non-fixed AppBar Layout Title"
+      navHeaderTitle="Another Title"
+      phoneLayout="temporary-mini"
+      // Note: the `toggleable-mini` has slight animation issues due to margin
+      // changes so it's recommended to not really use toggleable-mini for
+      // non-fixed appbar layouts
+      tabletLayout="temporary-mini"
+      landscapeTabletLayout="temporary-mini"
+      desktopLayout="temporary-mini"
+      appBarProps={{ fixed: false }}
+      treeProps={{
+        ...useLayoutNavigation(navItems, selectedId),
+        onItemSelect: setSelectedId,
+      }}
+      // this is only required since I already have a main element due to the
+      // documentation site's Layout component
+      mainProps={{ component: "div", style: { padding: "1rem" } }}
+    >
+      {/* just add an animation so it _looks_ like something happens */}
+      <CrossFade key={selectedId}>
+        <TextContainer>
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Text>
+          <Text>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae
+            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+            sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+            aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+            pariatur?
+          </Text>
+          <Text>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui
+            blanditiis praesentium voluptatum deleniti atque corrupti quos
+            dolores et quas molestias excepturi sint occaecati cupiditate non
+            provident, similique sunt in culpa qui officia deserunt mollitia
+            animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
+            est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+            eligendi optio cumque nihil impedit quo minus id quod maxime placeat
+            facere possimus, omnis voluptas assumenda est, omnis dolor
+            repellendus. Temporibus autem quibusdam et aut officiis debitis aut
+            rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
+            et molestiae non recusandae. Itaque earum rerum hic tenetur a
+            sapiente delectus, ut aut reiciendis voluptatibus maiores alias
+            consequatur aut perferendis doloribus asperiores repellat.
+          </Text>
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Text>
+          <Text>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae
+            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+            sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+            aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+            pariatur?
+          </Text>
+          <Text>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui
+            blanditiis praesentium voluptatum deleniti atque corrupti quos
+            dolores et quas molestias excepturi sint occaecati cupiditate non
+            provident, similique sunt in culpa qui officia deserunt mollitia
+            animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
+            est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+            eligendi optio cumque nihil impedit quo minus id quod maxime placeat
+            facere possimus, omnis voluptas assumenda est, omnis dolor
+            repellendus. Temporibus autem quibusdam et aut officiis debitis aut
+            rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
+            et molestiae non recusandae. Itaque earum rerum hic tenetur a
+            sapiente delectus, ut aut reiciendis voluptatibus maiores alias
+            consequatur aut perferendis doloribus asperiores repellat.
+          </Text>
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Text>
+          <Text>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae
+            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+            sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+            aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+            pariatur?
+          </Text>
+          <Text>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui
+            blanditiis praesentium voluptatum deleniti atque corrupti quos
+            dolores et quas molestias excepturi sint occaecati cupiditate non
+            provident, similique sunt in culpa qui officia deserunt mollitia
+            animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
+            est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+            eligendi optio cumque nihil impedit quo minus id quod maxime placeat
+            facere possimus, omnis voluptas assumenda est, omnis dolor
+            repellendus. Temporibus autem quibusdam et aut officiis debitis aut
+            rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
+            et molestiae non recusandae. Itaque earum rerum hic tenetur a
+            sapiente delectus, ut aut reiciendis voluptatibus maiores alias
+            consequatur aut perferendis doloribus asperiores repellat.
+          </Text>
+        </TextContainer>
+      </CrossFade>
+    </Layout>
+  );
+}

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

@@ -9,6 +9,9 @@ import configurableLayout from "./ConfigurableLayout.md";
 import ControllingTheLayout from "./ControllingTheLayout";
 import controllingTheLayout from "./ControllingTheLayout.md";
 
+import NonFixedAppBarLayouts from "./NonFixedAppBarLayouts";
+import nonFixedAppBarLayouts from "./NonFixedAppBarLayouts.md";
+
 const modalProps = {
   fullPage: true,
   fullPageFAB: true,
@@ -32,6 +35,12 @@ const demos = [
     description: controllingTheLayout,
     children: <ControllingTheLayout />,
   },
+  {
+    ...modalProps,
+    name: "Non-Fixed App Bar Layouts",
+    description: nonFixedAppBarLayouts,
+    children: <NonFixedAppBarLayouts />,
+  },
 ];
 
 export default function Layout(): ReactElement {