shark/src/routes/+layout.svelte

<script lang="ts">
  import TitleBar from "$lib/TitleBar.svelte";
  import MenuBar from "$lib/MenuBar.svelte";
  import ToolBar from "$lib/ToolBar.svelte";
</script>

<div class="app-container">
  <TitleBar />
  <MenuBar />
  <ToolBar />

  <div class="main-layout">
  <aside class="sidebar sunken-panel">
    <nav class="sidebar-nav">
      <a href="/" class="nav-item">
        <img src="/icons/home-car.png" alt="" class="nav-icon" />
        Home
      </a>
      <a href="/library" class="nav-item">
        <img src="/icons/laptop.png" alt="" class="nav-icon" />
        Library
      </a>
      <details class="nav-collapsible">
         <summary class="nav-item">
         <img src="/icons/world-star.png" alt="" class="nav-icon" />
       Services
          </summary>
        <div class="nav-submenu">
          <a href="/services/spotify" class="nav-item nav-subitem">
            <img src="/icons/spotify.png" alt="" class="nav-icon" />
            Spotify
          </a>
          <a href="/services/deezer" class="nav-item nav-subitem">
            <img src="/icons/deezer.png" alt="" class="nav-icon" />
            Deezer
          </a>
          <a href="/services/soulseek" class="nav-item nav-subitem">
            <img src="/icons/soulseek.png" alt="" class="nav-icon" />
            Soulseek
          </a>
          <a href="/services/musicbrainz" class="nav-item nav-subitem">
            <img src="/icons/musicbrainz.svg" alt="" class="nav-icon" />
            MusicBrainz
          </a>
        </div>
      </details>
      <details class="nav-collapsible">
        <summary class="nav-item">
          <img src="/icons/cassette-tape.png" alt="" class="nav-icon" />
          Playlists
        </summary>
        <div class="nav-submenu">
          <a href="/playlists/favorites" class="nav-item nav-subitem">
            <img src="/icons/eighthnote-white.svg" alt="" class="nav-icon" />
            Favorites
          </a>
          <a href="/playlists/recently-played" class="nav-item nav-subitem">
            <img src="/icons/eighthnote-white.svg" alt="" class="nav-icon" />
            Recently Played
          </a>
          <a href="/playlists/workout" class="nav-item nav-subitem">
            <img src="/icons/eighthnote-white.svg" alt="" class="nav-icon" />
            Workout Mix
          </a>
        </div>
      </details>
    </nav>
  </aside>

    <main class="content-area sunken-panel">
      <slot />
    </main>
  </div>

  <div class="status-text">Ready</div>
</div>

<style>
  .app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 8px 8px 0 8px;
    gap: 8px;
  }

  .sidebar {
    width: 200px;
    flex-shrink: 0;
    padding: 0;
    overflow-y: auto;
    background: #121212;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 4px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    text-decoration: none;
    color: light-dark(#222, #ddd);
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .nav-item:hover {
    background: light-dark(silver, #2b2b2b);
  }

  .nav-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
  }

  .nav-collapsible {
    margin: 0;
  }

  .nav-collapsible summary {
    list-style: none;
  }

  .nav-collapsible summary::-webkit-details-marker {
    display: none;
  }

  .nav-submenu {
    margin-left: 12px;
  }

  .nav-subitem {
    padding-left: 8px;
  }

  .content-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 8px;
    font-family: "Pixelated MS Sans Serif", Arial;
    background: #121212;
  }

  .status-text {
    padding: 6px 8px 10px 10px;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px;
    color: light-dark(#222, #ddd);
    margin: 0;
  }
</style>