Make a more fully fleshed out PageLayout

Author: grahamc

src/PageLayout/PageLayout.stories.tsx

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import PageLayout from ".";
 import { Placeholder } from "../Placeholder";
+import Header from "../Header";
+import DetSysIcon from "../DetSysIcon";
+import ColorSchemeToggle from "../ColorSchemeToggle";
+import Navigation from "../Navigation";
 
 const meta = {
   title: "Template/PageLayout",
@@ -32,3 +36,37 @@ export const Default = () => (
     </PageLayout>
   </>
 );
+
+export const FleshedOut = () => (
+  <>
+    <PageLayout width="full">
+      <PageLayout.Header>
+        <Header>
+          <Header.Logo>
+            <DetSysIcon size="base" />
+            <h1 style={{ margin: 0 }}>DetSys</h1>
+          </Header.Logo>
+          <Header.Element>
+            <ColorSchemeToggle />
+            <Navigation>
+              <Navigation.Element>
+                <Placeholder height="100%" label="Lorem" />
+              </Navigation.Element>
+
+              <Navigation.Element>
+                <Placeholder height="100%" label="Ipsum" />
+              </Navigation.Element>
+            </Navigation>
+          </Header.Element>
+        </Header>
+      </PageLayout.Header>
+
+      <PageLayout.Content>
+        <Placeholder label="hi" height="10em" />
+      </PageLayout.Content>
+      <PageLayout.Pane>
+        <Placeholder height="3em" label="Pane 2" />
+      </PageLayout.Pane>
+    </PageLayout>
+  </>
+);