wip layout compoent

packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import { Input, ModalContent } from "@budibase/bbui"

packages/server/src/constants/layouts.js

@@ -10,44 +10,25 @@ const EMPTY_LAYOUT = {
   stylesheets: [],
   props: {
     _id: "30b8822a-d07b-49f4-9531-551e37c6899b",
-    _component: "@budibase/standard-components/container",
+    _component: "@budibase/standard-components/layout",
     _children: [
       {
-        _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-        _component: "@budibase/standard-components/screenslot",
-        _styles: {
-          normal: {
-            flex: "1 1 auto",
-            display: "flex",
-            "flex-direction": "column",
-            "justify-content": "flex-start",
-            "align-items": "stretch",
-            "max-width": "100%",
-            "margin-left": "20px",
-            "margin-right": "20px",
-            width: "1400px",
-          },
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _children: [],
+      _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
+      _component: "@budibase/standard-components/screenslot",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
       },
+      _children: [],
+    }
     ],
-    type: "div",
+    navigation: "Top",
     _styles: {
       active: {},
       hover: {},
-      normal: {
-        display: "flex",
-        "flex-direction": "column",
-        "align-items": "center",
-        "justify-content": "flex-start",
-        "margin-right": "auto",
-        "margin-left": "auto",
-        "min-height": "100%",
-        "background-image": "#f5f5f5",
-      },
+      normal: {},
       selected: {},
     },
     className: "",

packages/standard-components/manifest.json

@@ -9,6 +9,51 @@
     "illegalChildren": ["Section"],
     "settings": []
   },
+  "layout": {
+    "name": "Layout",
+    "description": "This component is specific only to layouts",
+    "icon": "Sandbox",
+    "hasChildren": true,
+    "styleable": true,
+    "transitionable": true,
+    "illegalChildren": [],
+    "settings": [
+      {
+        "type": "text",
+        "label": "Logo URL",
+        "key": "logoUrl"
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "boolean",
+        "label": "Hide title",
+        "key": "hideTitle",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Hide logo",
+        "key": "hideLogo",
+        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Navigation",
+        "key": "navigation",
+        "options": ["Top", "Left", "None"],
+        "defaultValue": "Top"
+      },
+      {
+        "type": "select",
+        "label": "Links",
+        "key": "type"
+      }
+    ]
+  },
   "section": {
     "name": "Section",
     "description": "Add a section to your application",
@@ -345,13 +390,6 @@
         "label": "Logo URL",
         "key": "logoUrl"
       },
-      {
-        "type": "select",
-        "label": "Type",
-        "key": "type",
-        "options": ["Horizontal", "Vertical"],
-        "defaultValue": "Horizontal"
-      },
       {
         "type": "boolean",
         "label": "Hide logo",

packages/standard-components/src/Navigation.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { authStore, linkable, styleable, builderStore } = getContext("sdk")
+  const { linkable, styleable } = getContext("sdk")
   const component = getContext("component")
 
   // BB emblem: https://i.imgur.com/Xhdt1YP.png
@@ -9,7 +9,6 @@
 
   export let logoUrl
   export let hideLogo
-  export let type = "Horizontal"
 </script>
 
 <div class="nav" use:styleable={$component.styles}>
@@ -49,18 +48,6 @@
     margin-right: 16px;
   }
 
-  .nav__controls {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 16px;
-  }
-  .nav__controls > div:hover {
-    cursor: pointer;
-    color: #4285f4;
-  }
-
   .nav__menu {
     display: flex;
     flex-direction: row;

packages/standard-components/src/Section.svelte

@@ -5,6 +5,7 @@
   const component = getContext("component")
   export let type = "mainSidebar"
   export let gap = "16px"
+  export let minSize = 250
 
   let layoutMap = {
     mainSidebar: 2,
@@ -17,7 +18,7 @@
   $: columnsDependingOnSize = calculateColumns(containerWidth)
 
   function calculateColumns(parentWidth) {
-    const numberOfAllowedColumns = Math.floor(parentWidth / 250) || 100
+    const numberOfAllowedColumns = Math.floor(parentWidth / minSize) || 100
     if (layoutMap[type] <= numberOfAllowedColumns) {
       return false
     } else if (layoutMap[type] > numberOfAllowedColumns) {

packages/standard-components/src/index.js

@@ -20,6 +20,7 @@ export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
 export { default as text } from "./Text.svelte"
 export { default as navigation } from "./Navigation.svelte"
+export { default as layout } from "./layout/Layout.svelte"
 export { default as link } from "./Link.svelte"
 export { default as heading } from "./Heading.svelte"
 export { default as image } from "./Image.svelte"

packages/standard-components/src/layout/Layout.svelte

@@ -0,0 +1,95 @@
+<script>
+  import Navigation from "./Navigation.svelte"
+  import { ActionButton } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { styleable, transition } = getContext("sdk")
+  const component = getContext("component")
+  export let title = ""
+  export let hideTitle = false
+  export let logoUrl = "https://i.imgur.com/Xhdt1YP.png"
+  export let hideLogo = false
+  export let navigation = "Top"
+  export let links = [
+    { text: "Some Text", url: "/" },
+    { text: "Some Text", url: "/" },
+  ]
+  const navigationTypes = new Map([
+    ["Top", "top"],
+    ["Left", "left"],
+    ["None", ""],
+  ])
+</script>
+
+<div
+  class="container {navigationTypes.get(navigation)}"
+  in:transition={{ type: $component.transition }}
+  use:styleable={$component.styles}
+>
+  {#if navigationTypes.get(navigation)}
+    <div class="nav">
+      <div class="logo">
+        {#if !hideLogo}
+          <img src={logoUrl} alt={title} height="48" />
+        {/if}
+        {#if !hideTitle}
+          <span>{title}</span>
+        {/if}
+      </div>
+      <div class="links">
+        <Navigation {navigation} {links} />
+      </div>
+      <div class="portal">
+        <ActionButton quiet icon="Apps" on:click />
+      </div>
+    </div>
+  {/if}
+  <div class="main">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: 1fr;
+    position: relative;
+  }
+  .nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas: "burger logo portal";
+    justify-content: space-between;
+    padding: var(--spacing-m);
+  }
+  .top,
+  .left {
+    grid-template-columns: 1fr;
+  }
+  .links {
+    grid-area: burger;
+  }
+  .logo {
+    display: grid;
+    place-items: center;
+    grid-area: logo;
+  }
+  .portal {
+    grid-area: portal;
+    display: grid;
+    justify-content: end;
+  }
+
+  @media (min-width: 600px) {
+    .nav {
+      display: initial;
+    }
+    .top {
+      grid-template-columns: 1fr;
+    }
+    .left {
+      grid-template-columns: 200px 1fr;
+    }
+  }
+</style>

packages/standard-components/src/layout/Mobile.svelte

@@ -0,0 +1,33 @@
+<script>
+  import {
+    ActionButton,
+    SideNavigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
+  export let links
+</script>
+
+<div class="overlay">
+  <SideNavigation>
+    {#each links as { text, url }}
+      <!-- Needs logic to select current route -->
+      <Item selected={false} href={url} on:click>{text}</Item>
+    {/each}
+  </SideNavigation>
+  <div class="close">
+    <ActionButton quiet icon="Close" on:click />
+  </div>
+</div>
+
+<style>
+  .overlay {
+    background: white;
+    position: absolute;
+    inset: 0;
+  }
+  .close {
+    position: absolute;
+    top: var(--spacing-m);
+    right: var(--spacing-m);
+  }
+</style>

packages/standard-components/src/layout/Navigation.svelte

@@ -0,0 +1,72 @@
+<script>
+  import Mobile from "./Mobile.svelte"
+  import {
+    ActionButton,
+    SideNavigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
+
+  export let navigation
+  export let links
+
+  let mobileOpen = false
+</script>
+
+<div class="container">
+  {#if navigation === "Top"}
+    <ul>
+      {#each links as { text, url }}
+        <li><a href={url}>{text}</a></li>
+      {/each}
+    </ul>
+  {:else}
+    <SideNavigation>
+      {#each links as { text, url }}
+        <!-- Needs logic to select current route -->
+        <Item selected={false} href="/">{text}</Item>
+      {/each}
+    </SideNavigation>
+  {/if}
+</div>
+<div class="mobile">
+  <ActionButton
+    quiet
+    selected
+    icon="ShowMenu"
+    on:click={() => (mobileOpen = !mobileOpen)}
+  />
+  {#if mobileOpen}
+    <Mobile {links} on:click={() => (mobileOpen = !mobileOpen)} />
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: none;
+  }
+  ul {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  ul > * {
+    margin-right: 16px;
+  }
+
+  :global(ul > a) {
+    font-size: 1.5em;
+    text-decoration: none;
+    margin-right: 16px;
+  }
+  @media (min-width: 600px) {
+    .mobile {
+      display: none;
+    }
+    .container {
+      display: initial;
+    }
+  }
+</style>