From c0340ff9cd5847f9492b754da0ce630a38e2fb6f Mon Sep 17 00:00:00 2001
From: Marin Minnerly <me@vocksel.com>
Date: Wed, 8 May 2024 19:13:15 -0700
Subject: [PATCH] Add back missing content

---
 src/Plugin/PluginApp.luau | 48 +++++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/Plugin/PluginApp.luau b/src/Plugin/PluginApp.luau
index 9363644d..6b44224c 100644
--- a/src/Plugin/PluginApp.luau
+++ b/src/Plugin/PluginApp.luau
@@ -3,7 +3,9 @@ local ModalPortal = require("@root/Modal/ModalPortal")
 local ModalRoot = require("@root/Modal/ModalRoot")
 local NavigationContext = require("@root/Navigation/NavigationContext")
 local React = require("@pkg/React")
+local ResizablePanel = require("@root/Panels/ResizablePanel")
 local Screen = require("@root/Navigation/Screen")
+local Sidebar = require("@root/Panels/Sidebar")
 local Topbar = require("@root/Panels/Topbar")
 local constants = require("@root/constants")
 local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
@@ -61,23 +63,49 @@ local function App(props: Props)
 			Size = UDim2.fromScale(1, 1),
 		}, {
 			Layout = React.createElement("UIListLayout", {
+				FillDirection = Enum.FillDirection.Horizontal,
 				SortOrder = Enum.SortOrder.LayoutOrder,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
 			}),
 
-			Topbar = React.createElement(Topbar, {
-				Size = UDim2.new(1, 0, 0, TOPBAR_HEIGHT_PX),
-				LayoutOrder = nextLayoutOrder(),
+			SidebarWrapper = React.createElement(ResizablePanel, {
+				layoutOrder = nextLayoutOrder(),
+				initialSize = UDim2.new(0, constants.SIDEBAR_INITIAL_WIDTH, 1, 0),
+				dragHandles = { "Right" },
+				minSize = Vector2.new(constants.SIDEBAR_MIN_WIDTH, 0),
+				maxSize = Vector2.new(constants.SIDEBAR_MAX_WIDTH, math.huge),
+				onResize = onSidebarResized,
+			}, {
+				Sidebar = React.createElement(Sidebar, {
+					selectStory = selectStory,
+					selectStorybook = selectStorybook,
+					storybooks = storybooks,
+				}),
 			}),
 
-			ScreenWrapper = React.createElement("Frame", {
+			MainWrapper = React.createElement("Frame", {
 				LayoutOrder = nextLayoutOrder(),
-				Size = UDim2.fromScale(1, 1) - UDim2.fromOffset(0, TOPBAR_HEIGHT_PX),
-				BackgroundTransparency = 1,
+				Size = UDim2.fromScale(1, 1) - UDim2.fromOffset(sidebarWidth, 0),
 			}, {
-				Screen = React.createElement(Screen, {
-					loader = props.loader,
-					story = story,
-					storybook = storybook,
+				Layout = React.createElement("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+				}),
+
+				Topbar = React.createElement(Topbar, {
+					Size = UDim2.new(1, 0, 0, TOPBAR_HEIGHT_PX),
+					LayoutOrder = nextLayoutOrder(),
+				}),
+
+				ScreenWrapper = React.createElement("Frame", {
+					LayoutOrder = nextLayoutOrder(),
+					Size = UDim2.fromScale(1, 1) - UDim2.fromOffset(0, TOPBAR_HEIGHT_PX),
+					BackgroundTransparency = 1,
+				}, {
+					Screen = React.createElement(Screen, {
+						loader = props.loader,
+						story = story,
+						storybook = storybook,
+					}),
 				}),
 			}),
 		}),