From e2d89490b818f10866c7201e8d12e1dbfeb0cde2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 27 Apr 2022 08:06:09 +0100
Subject: [PATCH] Slightly increase width of side panels and add expandable
 toggle for component tab

---
 .../design/navigation/NavigationPanel.svelte     | 16 +++++++++++++---
 .../design/settings/SettingsPanel.svelte         |  2 +-
 .../navigation/ComponentNavigationPanel.svelte   |  1 +
 .../new/_components/NewComponentPanel.svelte     |  3 +--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/navigation/NavigationPanel.svelte b/packages/builder/src/components/design/navigation/NavigationPanel.svelte
index b295182562..ebcf0c534d 100644
--- a/packages/builder/src/components/design/navigation/NavigationPanel.svelte
+++ b/packages/builder/src/components/design/navigation/NavigationPanel.svelte
@@ -4,9 +4,11 @@
   export let title
   export let showAddButton = false
   export let showBackButton = false
+  export let showExpandIcon = false
   export let onClickAddButton
   export let onClickBackButton
-  export let wide = false
+
+  let wide = false
 </script>
 
 <div class="navigation-panel" class:wide>
@@ -17,6 +19,13 @@
     <div class="title">
       <Heading size="XS">{title || ""}</Heading>
     </div>
+    {#if showExpandIcon}
+      <Icon
+        name={wide ? "Minimize" : "Maximize"}
+        hoverable
+        on:click={() => (wide = !wide)}
+      />
+    {/if}
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
         <Icon name="Add" />
@@ -30,16 +39,17 @@
 
 <style>
   .navigation-panel {
-    width: 260px;
+    width: 280px;
     background: var(--background);
     border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    transition: width 130ms ease-out;
   }
   .navigation-panel.wide {
-    width: 360px;
+    width: 420px;
   }
   .header {
     flex: 0 0 48px;
diff --git a/packages/builder/src/components/design/settings/SettingsPanel.svelte b/packages/builder/src/components/design/settings/SettingsPanel.svelte
index cce3d256d2..968cb4e957 100644
--- a/packages/builder/src/components/design/settings/SettingsPanel.svelte
+++ b/packages/builder/src/components/design/settings/SettingsPanel.svelte
@@ -23,7 +23,7 @@
 
 <style>
   .settings-panel {
-    width: 260px;
+    width: 280px;
     background: var(--background);
     border-left: var(--border-light);
     display: flex;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/navigation/ComponentNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/navigation/ComponentNavigationPanel.svelte
index fa16a74f0b..bc3c2f7f99 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/navigation/ComponentNavigationPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/navigation/ComponentNavigationPanel.svelte
@@ -64,6 +64,7 @@
   title="Components"
   showAddButton
   onClickAddButton={() => $goto("../new")}
+  showExpandIcon
 >
   <div class="nav-items-container" bind:this={scrollRef}>
     <NavItem
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte
index 0fe0ca1780..ebb4f856b6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte
@@ -97,7 +97,6 @@
   title="Add component"
   showBackButton
   onClickBackButton={() => $goto("../slot")}
-  wide
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
     <ActionGroup compact justified>
@@ -156,7 +155,7 @@
 <style>
   .component-grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--spacing-s);
   }
   .component {