budibase/packages/builder/src/BackendRoot.svelte

<script>

import BackendNav from "./nav/BackendNav.svelte";
import Database from "./database/DatabaseRoot.svelte" ;
import UserInterface from "./userInterface/UserInterfaceRoot.svelte" ;
import ActionsAndTriggers from "./actionsAndTriggers/ActionsAndTriggersRoot.svelte" ;
import AccessLevels from "./accessLevels/AccessLevelsRoot.svelte" ;
import ComingSoon from "./common/ComingSoon.svelte";

import {store} from "./builderStore";

export let navWidth = "50px";


</script>

<div class="root">
  <div class="nav">
    <BackendNav />
  </div>
  <div class="content" 
       style="width: calc(100% - {navWidth}); left: {navWidth}"> 
    {#if $store.activeNav === "database"}
    <Database />
    {:else if $store.activeNav === "actions"}
    <ActionsAndTriggers />
    {:else if $store.activeNav === "access levels"}
    <AccessLevels />
    {/if}
  </div>
</div>



<style>

.root {
  height: 100%;
  display: flex;
}


.content {
  flex: 1 1 auto;
  height: 100%;
  background-color: var(--white);
  margin:0;
}

.nav {
  flex: 0 1 auto;
  width: 300px;
  height: 100%;
}

</style>