noctbot/web/src/components/Nav.svelte

<script>
  import { stores } from "@sapper/app";
  let { session } = stores();
  export let segment;
</script>

<style lang="css">
  nav {
    @apply .w-2/12 .bg-gray-800 .rounded-l-sm .overflow-y-auto .flex .flex-col;
  }

  .user-box {
    @apply .flex .items-center p-2 bg-gray-dark;

    & > img {
      @apply .w-1/5 .rounded-full;
    }

    & > div {
      @apply .m-2 .font-bold .text-gray-100;
    }
  }

  .button-list {
    @apply .flex .flex-col .m-2 p-2;

    & > h2 {
      @apply .text-lg .my-1 .text-white .font-bold .uppercase .mt-2;
    }

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

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

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

<nav role="navigation">
  <div class="user-box">
    <img alt="User Avatar" src={$session.user.avatarURL} />
    <div>{$session.user.username}</div>
  </div>
  <div class="button-list">
    <h2>Features</h2>
    <a data-active={segment === 'contest'} href="dashboard/contest">Contest</a>
  </div>
</nav>