From ec6857da8cb44462c128a9da22366470c1114259 Mon Sep 17 00:00:00 2001
From: Zach Shilton <4624598+zchsh@users.noreply.github.com>
Date: Wed, 19 Jul 2023 11:46:13 -0400
Subject: [PATCH] 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 | 44 +++++++++++++++++++
.../sidebar-layout/sidebar-layout.module.css | 35 +++++++++++++++
src/views/open-api-docs-view/index.tsx | 26 ++++++++---
3 files changed, 99 insertions(+), 6 deletions(-)
create mode 100644 src/layouts/sidebar-layout/index.tsx
create mode 100644 src/layouts/sidebar-layout/sidebar-layout.module.css
diff --git a/src/layouts/sidebar-layout/index.tsx b/src/layouts/sidebar-layout/index.tsx
new file mode 100644
index 0000000000..9244573dbf
--- /dev/null
+++ b/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 (
+
- {JSON.stringify(props, null, 2)}
-
-
+ {JSON.stringify(props, null, 2)}
+
+