databases list

packages/builder/src/nav/BackendNav.svelte

@@ -1,44 +1,41 @@
 <script>
-  import { setContext } from "svelte";
+  import { setContext } from "svelte"
   import { store } from "../builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
+  import DatabasesList from "./DatabasesList.svelte"
   import DropdownButton from "../common/DropdownButton.svelte"
   import { hierarchy as hierarchyFunctions } from "../../../core/src"
   import NavItem from "./NavItem.svelte"
   import getIcon from "../common/icon"
 
-  // top level store modifiers 
-  const newRootRecord = () => store.newRootRecord();
-  const newChildIndex = () => store.newChildIndex();
-  const newRootIndex = () => store.newRootIndex();
+  // top level store modifiers
+  const newRootRecord = () => store.newRootRecord()
+  const newChildIndex = () => store.newChildIndex()
+  const newRootIndex = () => store.newRootIndex()
   const newUser = () => {
-    store.update(state => { 
-
-    });
+    store.update(state => {})
   }
   const newDatabase = () => {
-    store.update(state => { 
-
-    });
+    store.update(state => {})
   }
 
   const userManagementActions = [
     {
       label: "New User",
-      onclick: newUser
-    }
-  ];
+      onclick: newUser,
+    },
+  ]
 
-  const databaseManagementActions  = [
+  const databaseManagementActions = [
     {
       label: "New Database",
-      onclick: newDatabase
-    }
-  ];
+      onclick: newDatabase,
+    },
+  ]
 
   // let newChildActions = defaultNewChildActions
 
-  const setActiveNav = name => () => setContext("activeNav", name);
+  const setActiveNav = name => () => setContext("activeNav", name)
 
   // store.subscribe(db => {
   //   if (!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {

packages/builder/src/nav/DatabasesList.svelte

@@ -0,0 +1,86 @@
+<script>
+  import { store } from "../builderStore"
+  import getIcon from "../common/icon"
+  import { CheckIcon } from "../common/Icons"
+
+  const getPage = (s, name) => {
+    const props = s.pages[name]
+    return { name, props }
+  }
+
+  $: databases = $store.app
+
+  const pages = [
+    {
+      title: "Main",
+      id: "main",
+    },
+    {
+      title: "Login",
+      id: "unauthenticated",
+    },
+  ]
+
+  store.setCurrentPage("main")
+</script>
+
+<div class="root">
+  <ul>
+    {#each pages as { title, id }}
+      <li>
+        <span class="icon">
+          {#if id === $store.currentPageName}
+            <CheckIcon />
+          {/if}
+        </span>
+
+        <button
+          class:active={id === $store.currentPageName}
+          on:click={() => store.setCurrentPage(id)}>
+          {title}
+        </button>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .root {
+    padding-bottom: 10px;
+    font-size: 0.9rem;
+    color: var(--secondary50);
+    font-weight: bold;
+    position: relative;
+    padding-left: 1.8rem;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    margin: 0.5rem 0;
+  }
+
+  button {
+    margin: 0 0 0 6px;
+    padding: 0;
+    border: none;
+    font-family: Roboto;
+    font-size: 0.8rem;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .active {
+    font-weight: 500;
+  }
+
+  .icon {
+    display: inline-block;
+    width: 14px;
+    color: #333;
+  }
+</style>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -126,7 +126,6 @@
     flex-direction: column;
   }
 
-<<<<<<< HEAD
   .preview-pane {
     grid-column: 2;
     margin: 40px;
@@ -135,8 +134,6 @@
     box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
   }
 
-=======
->>>>>>> new backend beginnings
   .components-pane {
     grid-column: 3;
     background-color: var(--secondary5);