classroomio/src/routes/_layout.svelte

<script>
  import Tailwindcss from "../components/Tailwindcss.svelte";
  import Nav from "../components/Nav.svelte";
  import SideBar from "../components/SideBar.svelte";
  import Footer from "../components/Footer.svelte";

  export let segment;
</script>

<style>
  main {
    background-color: white;
    padding: 15px 2em;
    margin: 0 auto;
    box-sizing: border-box;
    /* max-width: 900px; */
  }

  :global(a:hover) {
    text-decoration: underline;
  }

  @media only screen and (max-width: 768px) {
    main {
      flex-direction: column;
      align-items: center;
      padding: 10px;
    }
  }
</style>

<Tailwindcss />

<Nav {segment} />

<main class="flex max-w-screen-xl">
  <slot />
  <SideBar />
</main>

<Footer />