mindboost-rnbo-test-project/components/PageHeader.vue

<template>
  <header class="header d-flex flex-row flex-fill justify-content-between pt-3">
    <div class="header__logo">
      <nuxt-link class="navbar-brand" to="/">
        <div class="text-start">
          <img src="/mindboostlogo.svg" height="35" class="img " alt="imae">
        </div>
      </nuxt-link>
    </div>
    <div class="header__title d-none d-md-block">
      <transition name="fade-title" mode="out-in">
        <h1
          v-if="user.soundMode === 'music'"
          id="musicMode"
          :key="'music'"
          class="text-decoration-none fs-3 fw-bolder text-white"
          aria-current="page"
        >
          <span class="header__icon mx-1">
            <svg width="26" height="29" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M8.286 23.875c0 .829-.331 1.624-.92 2.21a3.152 3.152 0 0 1-4.445 0 3.116 3.116 0 0 1 0-4.42 3.152 3.152 0 0 1 4.444 0c.59.586.92 1.381.92 2.21Zm0 0V5.645L24 2v18.23M8.286 11.895 24 8.25m0 12.5c0 .829-.331 1.624-.92 2.21a3.152 3.152 0 0 1-4.445 0 3.116 3.116 0 0 1 0-4.42 3.152 3.152 0 0 1 4.444 0c.59.586.921 1.381.921 2.21Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h26v29H0z" /></clipPath></defs></svg>
          </span>
          {{ t('musicmode') }}
        </h1>

        <h1
          v-else
          id="soundscapeTitle"
          :key="title"
          class="text-decoration-none fs-3 fw-bolder text-white"
          aria-current="page"
        >
          {{ title ? t(title) : '' }}
          <span class="header__icon">
            <component :is="currentSoundscapeSVG" />
          </span>
        </h1>
      </transition>
    </div>
    <nav class="header__nav">
      <SideBar />
    </nav>
  </header>
</template>

<script>
import { markRaw } from 'vue'
import { mapActions } from 'pinia'
import WaveTitleSVG from './svg/sounds/WaveTitleSvg.vue'
import ForestTitleSVG from './svg/sounds/ForestTitleSvg.vue'
import TropicsTitleSVG from './svg/sounds/TropicsTitleSvg.vue'
import MeadowTitleSVG from './svg/sounds/MeadowTitleSvg.vue'
import SideBar from './SideBar.vue'
import { useUserStore } from '~/stores/user'

export default {
  name: 'PageHeader',
  components: {
    WaveTitleSVG,
    TropicsTitleSVG,
    ForestTitleSVG,
    MeadowTitleSVG,
    SideBar
  },
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup () {
    const { t } = useI18n()
    const user = useUserStore()
    return { t, user }
  },
  data () {
    return {
      currentSoundscapeSVG: markRaw(WaveTitleSVG)
    }
  },
  watch: {
    title (newTitle) {
      this.updateCurrentSoundscapeSVG(newTitle)
    }
  },
  mounted () {
    this.updateCurrentSoundscapeSVG(this.title)
  },
  methods: {
    updateCurrentSoundscapeSVG (title) {
      switch (title) {
        case 'Lagoon':
          this.currentSoundscapeSVG = markRaw(WaveTitleSVG)
          break
        case 'Tropics':
          this.currentSoundscapeSVG = markRaw(TropicsTitleSVG)
          break
        case 'Forest':
          this.currentSoundscapeSVG = markRaw(ForestTitleSVG)
          break
        case 'Meadow':
          this.currentSoundscapeSVG = markRaw(MeadowTitleSVG)
          break
        default:
          this.currentSoundscapeSVG = markRaw(WaveTitleSVG)
      }
    }
  }
}
</script>
<style>
.fade-title-enter-active,
.fade-title-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-title-enter-from,
.fade-title-leave-to {
  opacity: 0;
}
.header {
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.5em;
}
.header__logo{
  width: 30%;
}
.header__nav {
  width: 30%;
  max-width: unset;
  display: flex;
  justify-content: flex-end;
}
.header__title {
  position: relative;
  color: white;
}
.header__title h1 {
  margin-bottom: 0;
}
.header__icon {
  position: absolute;
  left: -1.75em;
  top: 40%;
  transform: translateY(-50%);
}
.nav-icons{
  border-radius: 10px;
  padding: 10px 10px;
}
.nav-icons:focus{
  background-color: #e9c046;
  color: white !important;
  width: 100% !important;
  border-radius: 10px;
  fill: white;
}
.nav-icons:focus svg path {
  fill: white;
}

.fivith-icon.router-link-exact-active{
  content: url('~/assets/image/Vector (4).png');
  background-color: #e9c046;
  border-radius: 5px;
  padding: 10px 10px;
  text-align: center;
}
.accordion-button-homebar::after {
  background-size: 16px;
  background-position-y: 4px;
}

.accordion-button {
  line-height: 24px;
}

.accordion-item .nav-link {
  border-radius: 0;
}

@media only screen and (max-width: 768px) {
  .navbar-logo{
    width: 160px !important;
    padding-bottom: 10px;
  }
}
.drop-active, .drop-select{
  color: white !important;
  background-color: #e9c046;
}

.home-dropdown li::after{
  /* content: ''; */
  border-bottom: 1px solid #f0f0f0;
  display: block;
  width: 87%;
  margin: auto;
}

.home-dropdown li:last-of-type::after{
  border-bottom: none;
}

.dropdown-item:hover {
  border-radius: 0;
  transition: 150ms ease-in-out;
}

.dropdown-active svg{
  filter: invert(1);
}

.navbar-controls {
  max-width: 250px;
  float: right;
}

.navbar-controls .nav {
  justify-content: space-between;
}

@media only screen and (max-width: 768px) {
  .navbar-controls {
    position: fixed;
    bottom: 1.5em;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }

  .navbar-controls .nav {
    float: unset;
    background-color: white !important;
  }

  .adaptive {
    padding-bottom: 5em !important;
  }

  .header__logo{
    width: auto;
  }
  .header__nav {
    width: 100%;
  }

}

@media only screen and (max-width: 576px) {
  .navbar-controls {
    width: 80%;
    max-width: unset;
  }

  .navbar-controls .nav {
    justify-content: space-between;
  }

  .header__logo img {
    width: 100%;
    text-align: left;
  }
}

</style>