Update side bar to use square styles in line with the builder

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -99,7 +99,7 @@
     justify-content: flex-start;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: 0 24px;
+    padding: 0 var(--spacing-l);
     gap: 24px;
     position: relative;
   }

packages/builder/src/pages/builder/portal/apps/[appId].svelte

@@ -1,11 +1,10 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { apps } from "stores/portal"
+  import { apps, sideBarCollapsed } from "stores/portal"
-  import { Icon } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
 
   $: app = $apps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
-  $: preview = app?.status !== "published"
 
   const getIframeURL = app => {
     if (app.status === "published") {
@@ -17,28 +16,37 @@
 
 <div class="container">
   <div class="header">
-    <div class="icons">
+    {#if $sideBarCollapsed}
-      <Icon name="RailRightOpen" size="S" />
+      <ActionButton
-    </div>
+        quiet
-    <div class="text">
+        icon="Rail"
-      {#if preview}
+        on:click={() => sideBarCollapsed.set(false)}
-        This is a preview of your unpublished app
+      >
+        Menu
+      </ActionButton>
+    {:else}
+      <ActionButton
+        quiet
+        icon="RailRightOpen"
+        on:click={() => sideBarCollapsed.set(true)}
+      >
+        Collapse
+      </ActionButton>
     {/if}
-    </div>
+    <ActionButton
-    <div class="icons">
+      quiet
-      <Icon
+      icon="Edit"
-        name="Edit"
-        hoverable
       on:click={() => $goto(`../../app/${app.devId}`)}
-        size="S"
+    >
-      />
+      Edit
-      <Icon
+    </ActionButton>
-        name="LinkOut"
+    <ActionButton
-        hoverable
+      quiet
+      icon="LinkOut"
       on:click={() => window.open(iframeUrl, "_blank")}
-        size="S"
+    >
-      />
+      Fullscreen
-    </div>
+    </ActionButton>
   </div>
   <iframe src={iframeUrl} />
 </div>
@@ -50,23 +58,18 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: 10px;
+    gap: var(--spacing-s);
-    padding: 10px 10px 10px 0;
+    padding: var(--spacing-s) var(--spacing-l) var(--spacing-l) var(--spacing-l);
   }
   .header {
-    flex: 0 0 32px;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
-    padding: 0 8px;
+    gap: var(--spacing-xs);
-  }
-  .icons {
-    display: flex;
-    gap: 24px;
   }
   iframe {
     flex: 1 1 auto;
-    border-radius: 8px;
+    border-radius: var(--spacing-s);
-    border: none;
+    border: 1px solid var(--spectrum-global-color-gray-300);
   }
 </style>

packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte

@@ -1,10 +1,13 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Body } from "@budibase/bbui"
   import PortalSideNavItem from "./PortalSideNavItem.svelte"
-  import { apps } from "stores/portal"
+  import { apps, sideBarCollapsed } from "stores/portal"
   import { params, goto } from "@roxi/routify"
+  import { tick } from "svelte"
 
+  let searchInput
   let searchString
+  let searching = false
 
   $: filteredApps = $apps.filter(app => {
     return (
@@ -12,17 +15,34 @@
       app.name.toLowerCase().includes(searchString.toLowerCase())
     )
   })
+
+  const startSearching = async () => {
+    searching = true
+    searchString = ""
+    await tick()
+    searchInput.focus()
+  }
+
+  const stopSearching = () => {
+    searching = false
+    searchString = ""
+  }
 </script>
 
-<div class="side-bar">
+<div class="side-bar" class:collapsed={$sideBarCollapsed}>
   <div class="side-bar-controls">
-    <div class="search">
+    {#if searching}
-      <input bind:value={searchString} placeholder="Search" />
+      <input
-      <Icon name="Search" size="S" />
+        bind:this={searchInput}
-    </div>
+        bind:value={searchString}
-    <div class="add-app" on:click={() => $goto("./create")}>
+        placeholder="Search"
-      <Icon name="Add" />
+      />
-    </div>
+      <Icon hoverable on:click={stopSearching} name="Close" size="S" />
+    {:else}
+      <Body size="S">Apps</Body>
+      <Icon name="Search" size="S" hoverable on:click={startSearching} />
+    {/if}
+    <Icon name="Add" hoverable on:click={() => $goto("./create")} />
   </div>
   <div class="side-bar-nav">
     <PortalSideNavItem
@@ -45,82 +65,60 @@
 
 <style>
   .side-bar {
-    --spacing: 10px;
-    --radius: 8px;
-
     flex: 0 0 300px;
-    padding: var(--spacing);
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--spacing);
+    border-right: var(--border-light);
+    background: var(--spectrum-global-color-gray-100);
+    overflow: hidden;
+    transition: margin-left 300ms ease-out;
   }
+  .side-bar.collapsed {
+    margin-left: -302px;
+  }
+
   .side-bar-controls {
+    flex: 0 0 32px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing);
-  }
-  .search {
-    flex: 1 1 auto;
-    display: flex;
     align-items: center;
-    justify-content: flex-start;
+    gap: var(--spacing-l);
-    position: relative;
+    padding: 0 var(--spacing-l);
+    margin: var(--spacing-s);
   }
+  .side-bar-controls :global(.spectrum-Body),
+  .side-bar-controls input {
+    flex: 1 1 auto;
+  }
+  .side-bar-controls :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   input {
     outline: none;
+    border: none;
     max-width: none;
     flex: 1 1 auto;
-    padding: 0 38px 0 var(--spacing);
+    padding: 0 38px 0 0;
     color: var(--spectrum-global-color-gray-800);
     font-size: 14px;
-    border: 1px solid transparent;
     transition: border 130ms ease-out;
     font-family: var(--font-sans);
+    background: inherit;
   }
   input::placeholder {
     color: var(--spectrum-global-color-gray-700);
     transition: color 130ms ease-out;
   }
-  input:hover {
-    border: 1px solid var(--spectrum-global-color-gray-300);
-  }
   input:hover::placeholder {
     color: var(--spectrum-global-color-gray-800);
   }
-  input:focus {
-    border: 1px solid var(--spectrum-global-color-blue-400);
-  }
 
-  .search :global(.spectrum-Icon) {
-    position: absolute;
-    right: 10px;
-  }
-  .add-app {
-    flex: 0 0 32px;
-    display: grid;
-    place-items: center;
-    transition: background 130ms ease-out;
-  }
-  .add-app:hover {
-    cursor: pointer;
-    background: var(--spectrum-global-color-gray-200);
-  }
-  .search input,
-  .add-app {
-    height: 32px;
-  }
-  .search input,
-  .add-app,
-  .side-bar-nav {
-    background: var(--spectrum-global-color-gray-100);
-    border-radius: var(--radius);
-  }
   .side-bar-nav {
     flex: 1 1 auto;
-    padding: var(--spacing);
+    padding: 0 16px;
     display: flex;
     flex-direction: column;
     justify-items: flex-start;

packages/builder/src/pages/builder/portal/apps/_components/PortalSideNavItem.svelte

@@ -17,11 +17,11 @@
 <style>
   .container {
     padding: 8px 12px;
-    border-radius: var(--radius);
+    border-radius: var(--spacing-s);
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: var(--spacing);
+    gap: var(--spacing-l);
     transition: background 130ms ease-out;
   }
   .container:hover {

packages/builder/src/stores/portal/index.js

@@ -1,3 +1,5 @@
+import { writable } from "svelte/store"
+
 export { organisation } from "./organisation"
 export { users } from "./users"
 export { admin } from "./admin"
@@ -14,3 +16,5 @@ export { environment } from "./environment"
 export { menu } from "./menu"
 export { auditLogs } from "./auditLogs"
 export { features } from "./features"
+
+export const sideBarCollapsed = writable(false)