budibase/packages/standard-components/src/Navigation.svelte

<script>
  import { getContext } from "svelte"

  const { authStore, linkable, styleable, builderStore } = getContext("sdk")
  const component = getContext("component")

  // BB emblem: https://i.imgur.com/Xhdt1YP.png
  // Space logo: https://i.imgur.com/Dn7Xt1G.png

  export let logoUrl
  export let hideLogo
</script>

<div class="nav" use:styleable={$component.styles}>
  {#if !hideLogo}
    <div class="nav__top">
      <a href="/" use:linkable>
        <img
          class="logo"
          alt="logo"
          src={logoUrl || "https://i.imgur.com/Xhdt1YP.png"}
          height="48"
        />
      </a>
    </div>
  {/if}
  <div class="nav__menu">
    <slot />
  </div>
</div>

<style>
  .nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .nav__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }
  .nav__top img {
    margin-right: 16px;
  }

  .nav__controls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
  }
  .nav__controls > div:hover {
    cursor: pointer;
    color: #4285f4;
  }

  .nav__menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .nav__menu > * {
    margin-right: 16px;
  }

  :global(.nav__menu > a) {
    font-size: 1.5em;
    text-decoration: none;
    margin-right: 16px;
  }
</style>