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

269 lines
5.8 KiB
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>