feat: build sidebar layout for OpenApiDocsView (#2089)

* chore: enable flags for review purposes

* feat: add SidebarLayout

* fix: sidebar area height for short contents

* feat: use SidebarLayout in OpenApiDocsView

* docs: add note on SidebarSidecarLayout

* chore: turn off flags

src/layouts/sidebar-layout/index.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren, ReactNode } from 'react'
+// Layout
+import BaseLayout from 'layouts/base-layout'
+// Styles
+import s from './sidebar-layout.module.css'
+
+/**
+ * Renders a sidebar area alongside a main content area.
+ *
+ * The sidebar area is layed out as a sticky column on large viewports.
+ * When very tall content is provided, the sidebar area will scroll vertically.
+ *
+ * The sidebar area is completely hidden on mobile viewports.
+ * Consumers should ensure that equivalent navigational elements
+ * are provided through the `mobileMenuSlot` prop.
+ *
+ * Note: this layout could _potentially_ be of use in `SidebarSidecarLayout`.
+ * For context, this layout was created after `SidebarSidecarLayout`, with the
+ * initial intent of making it easier to build a new OpenAPI docs view.
+ * It will likely make sense to consolidate somewhat duplicate layout logic between
+ * this component and `SidebarSidecarLayout`, but this did not feel like it
+ * was within the scope of the OpenAPI docs view work.
+ * Task:
+ * https://app.asana.com/0/1202097197789424/1205088749290838/f
+ */
+function SidebarLayout({
+	children,
+	sidebarSlot,
+	mobileMenuSlot,
+}: PropsWithChildren<{
+	mobileMenuSlot: ReactNode
+	sidebarSlot: ReactNode
+}>) {
+	return (
+		<BaseLayout mobileMenuSlot={mobileMenuSlot} showFooterTopBorder>
+			<div className={s.root}>
+				<div className={s.sidebarArea}>{sidebarSlot}</div>
+				<div className={s.mainArea}>{children}</div>
+			</div>
+		</BaseLayout>
+	)
+}
+
+export default SidebarLayout

src/layouts/sidebar-layout/sidebar-layout.module.css

@@ -0,0 +1,35 @@
+.root {
+	display: flex;
+
+	/* Grow to fill the vertical space that BaseLayout creates */
+	flex-grow: 1;
+	gap: 48px;
+
+	@media (min-width: 1440px) {
+		gap: 64px;
+	}
+}
+
+.sidebarArea {
+	/* Note that --navigation-header-height is set by BaseLayout styles */
+	background-color: var(--token-color-surface-primary);
+	box-shadow: var(--token-surface-base-box-shadow);
+	display: none;
+
+	/* Even if content is long, area shoul dbe fully within the viewport.
+	   For shorter content, we don't need the height to be tall. */
+	max-height: calc(100vh - var(--navigation-header-height));
+	overflow: auto;
+	padding: 24px 24px 100px 24px;
+	position: sticky;
+	top: var(--navigation-header-height);
+	width: 312px;
+
+	@media (--dev-dot-hide-mobile-menu) {
+		display: block;
+	}
+}
+
+.mainArea {
+	flex: 1 1 0;
+}

src/views/open-api-docs-view/index.tsx

@@ -1,16 +1,30 @@
+// Layout
+import SidebarLayout from 'layouts/sidebar-layout'
+// Local
+import MobileMenuLevelsGeneric from 'components/mobile-menu-levels-generic'
+// Types
 import type { OpenApiDocsViewProps } from './types'
 
 /**
  * Placeholder for a revised OpenAPI docs view.
  */
 function OpenApiDocsView(props: OpenApiDocsViewProps) {
 	return (
-		<div style={{ border: '1px solid magenta' }}>
-			<h1>OpenApiDocsView Placeholder</h1>
-			<pre>
-				<code>{JSON.stringify(props, null, 2)}</code>
-			</pre>
-		</div>
+		<SidebarLayout
+			sidebarSlot={
+				<div style={{ border: '1px solid magenta' }}>
+					PLACEHOLDER for sidebar contents
+				</div>
+			}
+			mobileMenuSlot={<MobileMenuLevelsGeneric />}
+		>
+			<div style={{ border: '1px solid magenta' }}>
+				<h1>OpenApiDocsView Placeholder</h1>
+				<pre style={{ whiteSpace: 'pre-wrap' }}>
+					<code>{JSON.stringify(props, null, 2)}</code>
+				</pre>
+			</div>
+		</SidebarLayout>
 	)
 }