generateur_v3/frontend/src/components/NavBar.svelte

<script lang="ts">
  import NavLink from "./NavLink.svelte";
  import { getContext } from "svelte";
  import type { Writable } from "svelte/store";
  import FaHome from "svelte-icons/fa/FaHome.svelte";
  import { afterNavigate } from "$app/navigation";
  import FaUser from "svelte-icons/fa/FaUser.svelte";
  import IoIosLogOut from 'svelte-icons/io/IoIosLogOut.svelte'

  const {
    isAuth,
    username,
    logout
  } = getContext<{ isAuth: Writable<boolean>, username: Writable<string | null> }>("auth");
  let open = false;
  afterNavigate(() => {
    open = false;
  });
  $: console.log("USERNAME", $username);
</script>

<nav data-sveltekit-preload-data="hover" class:open>
  <div class="navigate">
    <NavLink href="/" exact no_hover class="home">
      <div class="icon">
        <FaHome />
      </div>
    </NavLink>
    <NavLink href="/exercices">Exercices</NavLink>
    <NavLink href="/room">Salles</NavLink>

  </div>
  <div class="right">
    <div class="auth">
      {#if $isAuth && $username != null}

        <NavLink href="/dashboard">
          <div class="dashboard">
            <div class="icon">
              <FaUser />
            </div>
            {$username}
          </div>
        </NavLink>
        <div class="icon signout" title="Se déconnecter" on:click={()=>{
                logout()
            }}>
          <IoIosLogOut />
        </div>

      {:else}
        <NavLink href="/signup" exact>S'inscrire</NavLink>
        <NavLink href="/signin" exact>Se connecter</NavLink>
      {/if}

    </div>
    <div class="burger" on:click={()=>{open=!open}}><span>  </span></div>
  </div>
</nav>
<style lang="scss">
  @import "../mixins";

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 30px 15px;
    border-bottom: 1px solid $border;
    width: 100%;
    gap: 10px;
    height: 30px;
    //transition: .3s;
    > div {
      display: flex;
      gap: 20px;
      align-items: stretch;
      height: min-content;

      max-height: 30px;
    }

    .icon {
      width: 23px;
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .dashboard {
    display: flex;
    align-items: center;
    gap: 10px;

    .icon {
      width: 15px;
      height: 15px;
    }
  }

  .signout {
    cursor: pointer;
    transition: .3s;
    color: $primary-dark;

    &:hover {
      color: $primary;
    }
  }

  .auth {
    transition: .3s;
    display: flex;
    gap: 7px;
    @include down(666) {
      //display: none;
      opacity: 0;
    }
  }


  .burger {
    background: 0 0;
    @include up(666) {
      display: none;
    }
    border: none;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: $primary-dark;

    &:hover {
      color: $primary;
    }

    & span {
      font-size: 0;
      transition: 0.2s ease-in-out;
      width: 12px;
      height: 2px;
      background-color: currentColor;
      display: block;
      position: relative;
      transition: 0.2s ease-in-out;

      &::before,
      &::after {
        transition: 0.2s ease-in-out;

        content: "";
        display: block;
        width: 12px;
        height: 2px;
        background-color: currentColor;
        position: relative;
      }

      &::after {
        top: -6px;
      }

      &::before {
        bottom: -4px;
      }
    }
  }

  .navigate {
    overflow: hidden;
    flex-wrap: wrap;
  }

  .open {

    @include down(666px) {
      .navigate {

        max-height: 1000000px;

        background: rgba($background-dark, 0.8);
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //gap: 42px;
        z-index: 600;

        animation: open .1s ease-in-out forwards;

      }

      :global(.home){
        display: none;
      }

      .right {
        justify-content: end;
        width: 100%;
        z-index: 601;
        display: flex;
      }

      .auth {
        display: flex;
        opacity: 1;
      }

      & .burger {
        z-index: 1000;

        & span::before {
          bottom: 0;
          transform: rotate(-90deg);
        }

        & span::after {
          transform: rotate(0);
          top: -2px;
        }

        & span {
          transform: rotate(135deg);
        }
      }
    }
  }


  :global(.home) {
    border-right: 2px solid $border;
    padding-right: 20px;
  }

  @keyframes open {
    0% {
      gap: 10px;
      opacity: .3;
    }
    100% {
     gap: 42px;
      opacity: 1;
    }
  }
</style>