noctbot/web/src/routes/dashboard/_layout.svelte

<script>
  import Nav from "../../components/Nav.svelte";
  export let segment;
</script>

<style lang="css">
  .frame {
    @apply w-screen h-screen m-auto .flex .items-center .justify-center;

    & > div {
      @apply w-full h-full;
    }
  }

  @screen xl {
    .frame {
      & > div {
        @apply .w-10/12;
        height: calc(10 / 12 * 100%);
      }
    }
  }

  .button {
    @apply .bg-gray-800 .px-2 .py-1 .rounded-sm .font-medium;

    &:hover {
      @apply .bg-gray-700;
    }

    &[data-active="true"] {
      @apply .bg-blue-800;
    }
  }

  .main-view {
    @apply .bg-gray-700 .w-10/12 .overflow-y-auto .rounded-r-sm .p-2;
  }
</style>

<div class="frame">
  <div class="flex shadow-big">
    <Nav {segment} />
    <section class="main-view ">
      <slot />
    </section>
  </div>
</div>