AppBar.vue

<script setup>
import { ref } from 'vue'

import { ROLE_OPTIONS } from '@/data/options'
import { useBuildingStore } from '@/stores/buildings'
import { useSessionStore } from '@/stores/session'

const openMenu = ref(false)

const buildings = useBuildingStore()
const session = useSessionStore()

function toggleMenu() {
  openMenu.value = !openMenu.value
}

function convertRole(value) {
  const role = ROLE_OPTIONS.find(element => element.value === value)

  return role ? role.name : null
}
</script>

<template>
  <div class="app-bar">
    <div class="app-bar__left">
      <slot />
    </div>
    <div class="app-bar__right">
      <div class="app-bar__role bar">Sie sind angemeldet als {{ convertRole(session.currentUser?.role) }}.</div>
      <router-link class="button secondary" to="/">
        <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" />
      </router-link>
    </div>
    <div class="app-bar__mobile">
      <button class="button secondary" type="button" @click="toggleMenu">
        <font-awesome-icon v-if="!openMenu" icon="fa-solid fa-bars" />
        <font-awesome-icon v-else icon="fa-solid fa-xmark" />
      </button>
      <div class="app-bar__dropdown shadow" v-if="openMenu">
        <div v-if="session.currentUser?.role === 'user'">
          <span class="static-text">{{ buildings.single.name }}</span>
        </div>
        <div class="app-bar__role">Sie sind angemeldet als {{ convertRole(session.currentUser?.role) }}.</div>
        <router-link class="button primary" to="/">
          <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app-bar {
  position: relative;
  background-color: hsl(var(--clr-primary));
  padding: var(--spacing);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

@media (min-width: 48em) {
  .app-bar {
    flex-direction: row;
  }
}

.app-bar__role {
  display: flex;
}

.app-bar__role.bar {
  color: var(--clr-white);
}

.app-bar__left,
.app-bar__right {
  height: var(--element-size);
  display: flex;
  gap: var(--spacing);
  align-items: center;
}

.app-bar__right {
  display: none;
}

.app-bar__mobile {
  position: relative;
  display: flex;
}

@media (min-width: 48em) {
  .app-bar__mobile {
    display: none;
  }

  .app-bar__right {
    display: flex;
  }
}

.app-bar__dropdown {
  background-color: hsl(var(--clr-content));
  z-index: 1;
  position: fixed;
  top: calc(var(--element-size) + var(--spacing) * 2);
  left: 0;
  right: 0;
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  border-bottom: var(--border) solid hsl(var(--clr-primary));
}
</style>