From a826fbf60e87311bd1c5df9685b9959eddc0de3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 5 May 2021 09:12:16 +0200
Subject: [PATCH] more structure to layout

---
 .../builder/src/pages/portal/_layout.svelte   | 90 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/portal/_layout.svelte b/packages/builder/src/pages/portal/_layout.svelte
index bf7e89904e..4de7a6e9a1 100644
--- a/packages/builder/src/pages/portal/_layout.svelte
+++ b/packages/builder/src/pages/portal/_layout.svelte
@@ -1 +1,89 @@
-asdasd
+<script>
+  import { onMount } from "svelte"
+  import {
+    Avatar,
+    Search,
+    Layout,
+    ProgressCircle,
+    SideNavigation as Navigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
+
+  let orgName, orgLogo
+
+  async function getOrgInfo() {
+    // fetch orgInfo
+    orgName = "ACME Inc."
+    orgLogo = "https://via.placeholder.com/32"
+  }
+
+  onMount(getOrgInfo)
+</script>
+
+<div class="container">
+  <Layout>
+    <div class="nav">
+      <div class="branding">
+        <div class="name">
+          <img src={orgLogo} alt="Logotype" />
+          <span>{orgName}</span>
+        </div>
+        <div class="onboarding">
+          <ProgressCircle />
+        </div>
+      </div>
+      <div class="menu">
+        <Navigation>
+          <Item>Apps</Item>
+          <Item>Drafts</Item>
+          <Item heading="Manage">Users</Item>
+          <Item>Groups</Item>
+          <Item>Auth</Item>
+          <Item>Email</Item>
+          <Item heading="Settings">General</Item>
+          <Item>Theming</Item>
+          <Item>Account</Item>
+        </Navigation>
+      </div>
+    </div>
+  </Layout>
+  <div class="main">
+    <div class="toolbar">
+      <Search />
+      <div class="avatar">
+        <Avatar />
+      </div>
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: 250px 1fr;
+  }
+  .main {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    border-left: 2px solid var(--spectrum-alias-background-color-primary);
+  }
+  .branding {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+  }
+  .content {
+    padding: var(--spacing-m);
+  }
+  .toolbar {
+    border-bottom: 2px solid var(--spectrum-alias-background-color-primary);
+    display: grid;
+    grid-template-columns: 250px auto;
+    justify-content: space-between;
+    padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
+  }
+</style>