688 lines
21 KiB
Vue
688 lines
21 KiB
Vue
<template>
|
||
<div class="nav">
|
||
<ul class="nav__list">
|
||
<li id="step-1" class="nav__item">
|
||
<a
|
||
v-if="!isPlaying()"
|
||
id="foucused-icon"
|
||
:class="{'is-active': true}"
|
||
class="nav__item-link"
|
||
@click.prevent="playSound"
|
||
>
|
||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="m6.192 3.67 13.568 7.633a.8.8 0 0 1 0 1.394L6.192 20.33A.8.8 0 0 1 5 19.632V4.368a.8.8 0 0 1 1.192-.698Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<a v-else id="foucused-icon" :class="{'is-active': false}" class="nav__item-link" @click.prevent="playSound">
|
||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#a)">
|
||
<path
|
||
d="M17.083 19.917a2.326 2.326 0 0 1-1.706-.71 2.332 2.332 0 0 1-.71-1.707V5.417c0-.665.236-1.234.71-1.706A2.333 2.333 0 0 1 17.083 3c.664 0 1.233.236 1.708.71.474.475.71 1.044.709 1.707V17.5a2.33 2.33 0 0 1-.71 1.707 2.322 2.322 0 0 1-1.707.71Zm-9.666 0a2.326 2.326 0 0 1-1.707-.71A2.332 2.332 0 0 1 5 17.5V5.417c0-.665.237-1.234.71-1.706A2.333 2.333 0 0 1 7.417 3c.663 0 1.233.236 1.707.71.475.475.71 1.044.71 1.707V17.5a2.33 2.33 0 0 1-.71 1.707 2.322 2.322 0 0 1-1.707.71Z"
|
||
fill="#e9c046"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="a">
|
||
<path fill="#e9c046" d="M0 0h24v24H0z" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li
|
||
id="step-2"
|
||
ref="soundscape"
|
||
class="nav__item nav__item--toggle"
|
||
:class="{ 'nav__item--active': userStore.soundMode === 'soundscape' }"
|
||
@click="setSoundMode('soundscape')"
|
||
>
|
||
<a class="nav__item-link" aria-current="page" href="#" @click.prevent="toggleDropdown('soundscape')">
|
||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8.286 18.875c0 .564-.226 1.104-.628 1.503a2.152 2.152 0 0 1-3.03 0 2.116 2.116 0 0 1 0-3.006 2.152 2.152 0 0 1 3.03 0c.402.399.628.94.628 1.503Zm0 0V6.479L19 4v12.396M8.286 10.73 19 8.25m0 8.5c0 .564-.226 1.104-.628 1.503a2.152 2.152 0 0 1-3.03 0 2.116 2.116 0 0 1 0-3.006 2.152 2.152 0 0 1 3.03 0c.402.399.628.94.628 1.503Z"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<ul
|
||
class="nav__dropdown nav__dropdown--no-padding"
|
||
:class="{ open: activeDropdown === 'soundscape' }"
|
||
@click.stop
|
||
>
|
||
<li>
|
||
<nuxt-link
|
||
id="lagoonLinkHomebar"
|
||
:class="{'is-select':form.soundscape=='Lagoon'}"
|
||
class="nav__dropdown-listItem py-2 fw-bold fs-6 "
|
||
@click="saveSetting('Lagoon', 'soundscape')"
|
||
>
|
||
{{ t('Lagoon') }}
|
||
<span class="float-end">
|
||
<WaveSVG />
|
||
</span>
|
||
</nuxt-link>
|
||
</li>
|
||
<li>
|
||
<nuxt-link
|
||
id="tropicsLinkHomebar"
|
||
:class="{'is-select':form.soundscape=='Tropics'}"
|
||
class="nav__dropdown-listItem fw-bold fs-6 py-2"
|
||
@click="saveSetting('Tropics', 'soundscape')"
|
||
>
|
||
{{ t('Tropics') }}
|
||
<span class="float-end">
|
||
<TropicsSVG />
|
||
</span>
|
||
</nuxt-link>
|
||
</li>
|
||
<li>
|
||
<nuxt-link
|
||
id="forestLinkHomebar"
|
||
:class="{'is-select':form.soundscape=='Forest'}"
|
||
class="nav__dropdown-listItem fw-bold fs-6 py-2"
|
||
@click="saveSetting('Forest', 'soundscape')"
|
||
>
|
||
{{ t('Forest') }}
|
||
<span class="float-end">
|
||
<ForestSVG />
|
||
</span>
|
||
</nuxt-link>
|
||
</li>
|
||
<li>
|
||
<nuxt-link
|
||
id="meadowLinkHomebar"
|
||
:class="{'is-select':form.soundscape=='Meadow'}"
|
||
class="nav__dropdown-listItem fw-bold fs-6 py-2"
|
||
@click="saveSetting('Meadow', 'soundscape')"
|
||
>
|
||
{{ t('Meadow') }}
|
||
<span class="float-end">
|
||
<MeadowSVG />
|
||
</span>
|
||
</nuxt-link>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
id="step-3"
|
||
ref="music"
|
||
class="nav__item nav__item--toggle"
|
||
:class="{ 'nav__item--active': userStore.soundMode === 'music' }"
|
||
@click="setSoundMode('music')"
|
||
>
|
||
<a class="nav__item-link" aria-current="page" href="#" @click.prevent="toggleDropdown('music')">
|
||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M20.293 2 3 21.707" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||
<path
|
||
d="M8.286 18.875c0 .564-.226 1.104-.628 1.503a2.152 2.152 0 0 1-3.03 0 2.116 2.116 0 0 1 0-3.006 2.152 2.152 0 0 1 3.03 0c.402.399.628.94.628 1.503Zm0 0V6.479L19 4v12.396M8.286 10.73 19 8.25m0 8.5c0 .564-.226 1.104-.628 1.503a2.152 2.152 0 0 1-3.03 0 2.116 2.116 0 0 1 0-3.006 2.152 2.152 0 0 1 3.03 0c.402.399.628.94.628 1.503Z"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<ul class="nav__dropdown text-muted-dark" :class="{ open: activeDropdown === 'music' }" @click.stop>
|
||
<p class="fw-bold pt-1">{{ t('musicmode_activated') }}</p>
|
||
<p>{{ t('musicmode_text') }}</p>
|
||
</ul>
|
||
</li>
|
||
|
||
<li id="step-4" ref="settings" class="nav__item" @click.stop="handleClickOutside">
|
||
<a class="nav__item-link" aria-current="page" href="#" @click.stop="toggleDropdown('settings')">
|
||
<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M2.3 8.177V.05h2.15V8.205l.025.015a2.2 2.2 0 1 1-2.2 0l.025-.015v-.028Zm7.775-5.625v.028l.025.015a2.2 2.2 0 1 1-2.2 0l.025-.015V.05h2.15v2.502ZM15.7 8.177v.028l.025.015a2.2 2.2 0 1 1-2.2 0l.025-.015V.05h2.15v8.127ZM4.45 13.55v4.4H2.3v-4.4h2.15Zm5.625-5.625V17.95h-2.15V7.925h2.15Zm3.475 5.625h2.15v4.4h-2.15v-4.4Z"
|
||
fill="currentColor"
|
||
stroke="currentColor"
|
||
stroke-width=".1"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<ul class="nav__dropdown pt-4" :class="{ open: activeDropdown === 'settings' }" @click.stop>
|
||
<li v-for="soundscape in soundscapes" :key="soundscape.id">
|
||
<MusicGainSlider v-if="currentIndex === soundscape.id && userStore.soundMode !== 'music'" />
|
||
</li>
|
||
<li>
|
||
<NoiseGainSlider />
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
v-if="userStore.isTimerActivated"
|
||
id="step-5"
|
||
ref="pomodoro"
|
||
class="nav__item nav__item--timer-bg"
|
||
:style="`--progress-width: ${progressBarWidth}`"
|
||
:data-phase="timer.getCurrentSession"
|
||
:data-color="progressColor"
|
||
@click.stop="handleClickOutside"
|
||
>
|
||
<a
|
||
class="nav__item-link nav__item-link--timer"
|
||
aria-current="page"
|
||
:style="`--progress-color: ${progressColor}`"
|
||
href="#"
|
||
@click.stop="toggleDropdown('pomodoro')"
|
||
>
|
||
<svg width="27" height="27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M15.11 6.301a7.78 7.78 0 0 1-1.111 15.478A7.777 7.777 0 0 1 8.734 8.275L7.162 6.703a10 10 0 1 0 5.726-2.64v6.7h2.222V6.3Z"
|
||
fill="currentColor"
|
||
/>
|
||
<path
|
||
d="M9.229 10.342a1.11 1.11 0 0 0 0 1.571l3.143 3.144a1.111 1.111 0 0 0 1.571-1.572L10.8 10.343a1.111 1.111 0 0 0-1.57 0Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<ul class="nav__dropdown" :class="{ open: activeDropdown === 'pomodoro' }" @click.stop>
|
||
<PomodoroTimer />
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { ref, onMounted } from 'vue'
|
||
import { mapActions } from 'pinia'
|
||
|
||
import { driver } from 'driver.js'
|
||
import MusicGainSlider from '../components/sliders/MusicGainSlider'
|
||
import NoiseGainSlider from '../components/sliders/NoiseGainSlider'
|
||
import AdaptiveNoiseGain from '../components/experiments/homepages/AdaptiveNoiseGain'
|
||
import 'driver.js/dist/driver.css'
|
||
|
||
import WaveSVG from './svg/homebar/WaveSVG.vue'
|
||
import TropicsSVG from './svg/homebar/TropicsSVG.vue'
|
||
import ForestSVG from './svg/homebar/ForestSVG.vue'
|
||
import MeadowSVG from './svg/homebar/MeadowSVG.vue'
|
||
|
||
import PomodoroTimer from '~/components/timer/PomodoroTimer.vue'
|
||
|
||
import { useTimerStore } from '~/stores/timer'
|
||
import { useAudioStore } from '~/stores/audio'
|
||
|
||
import { calculateNormalizedVolume } from '~/lib/AudioFunctions'
|
||
import { useUserStore } from '~/stores/user'
|
||
|
||
export default {
|
||
name: 'NavigationBar',
|
||
components: {
|
||
WaveSVG,
|
||
TropicsSVG,
|
||
ForestSVG,
|
||
MeadowSVG,
|
||
NoiseGainSlider,
|
||
MusicGainSlider,
|
||
PomodoroTimer
|
||
},
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: 'NavigationBar'
|
||
},
|
||
currentIndex: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
currentSoundscape: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
adaptive: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
emits: ['update:soundscape', 'update:currentIndex'],
|
||
setup () {
|
||
const { t } = useI18n()
|
||
const logger = useNuxtApp.$logger
|
||
const localePath = useLocalePath()
|
||
const timer = useTimerStore()
|
||
const audioStore = useAudioStore()
|
||
const userStore = useUserStore()
|
||
const { $axios } = useNuxtApp()
|
||
|
||
const activeDropdown = ref(null)
|
||
|
||
const progressBarWidth = computed(() => {
|
||
const totalTime = timer.getSessionTime * 60
|
||
return totalTime > 0 ? `${(timer.getTimeRemaining * 100) / totalTime}%` : '0%'
|
||
})
|
||
|
||
const progressColor = computed(() => {
|
||
return timer.getCurrentColor
|
||
})
|
||
|
||
const handleValueChange = (value) => {
|
||
// useNuxtApp().$logger.log('handle new control value: ' + value)
|
||
if (!isNaN(value)) {
|
||
const normaizedVolume = calculateNormalizedVolume(value)
|
||
// useNuxtApp().$logger.log('normalized volume: ' + normaizedVolume)
|
||
} else {
|
||
logger.log('value is not NaN', { value })
|
||
}
|
||
}
|
||
|
||
const onboarding = localStorage.getItem('onboarding')
|
||
|
||
const steps = [
|
||
{
|
||
element: '#step-1',
|
||
popover: {
|
||
title: t('Tooltip-start-title'),
|
||
description: t('Tooltip-start-content'),
|
||
side: 'top',
|
||
align: 'start'
|
||
}
|
||
},
|
||
{
|
||
element: '#step-2',
|
||
popover: {
|
||
title: t('Tooltip-sound-title'),
|
||
description: t('Tooltip-sound-content'),
|
||
side: 'top',
|
||
align: 'start'
|
||
}
|
||
},
|
||
{
|
||
element: '#step-3',
|
||
popover: {
|
||
title: t('Tooltip-music-title'),
|
||
description: t('Tooltip-music-content'),
|
||
side: 'top',
|
||
align: 'start'
|
||
}
|
||
},
|
||
{
|
||
element: '#step-4',
|
||
popover: {
|
||
title: t('Tooltip-settings-title'),
|
||
description: t('Tooltip-settings-content'),
|
||
side: 'top',
|
||
align: 'start'
|
||
}
|
||
},
|
||
{
|
||
element: '#step-5',
|
||
popover: {
|
||
title: t('Tooltip-timer-title'),
|
||
description: t('Tooltip-timer-content'),
|
||
side: 'top',
|
||
align: 'start'
|
||
}
|
||
},
|
||
{
|
||
element: '#step-6',
|
||
popover: {
|
||
title: t('Let’s Go!'),
|
||
description: t('We have saved your selection.') + '</br>' + t('You can change your settings at any time.') + '</br>' + '<img src="/images/rocketman.svg" height="35" class="img " alt="image">',
|
||
align: 'center',
|
||
popoverClass: 'onboarding-popover--last'
|
||
}
|
||
}
|
||
]
|
||
// localstorage abgreifen und wenn onboarding null, dann starten
|
||
if (!userStore.isOnboardingCompleted) {
|
||
onMounted(() => {
|
||
const driverObj = driver({
|
||
popoverClass: 'onboarding-popover',
|
||
prevBtnText: '<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 1.636a1 1 0 0 1 0 1.414L5.757 8l4.95 4.95a1 1 0 0 1-1.414 1.414L3.636 8.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 0 1 1.414 0Z" fill="#585C5E"/></svg>',
|
||
nextBtnText: '<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.293 1.636a1 1 0 0 0 0 1.414L10.243 8l-4.95 4.95a1 1 0 0 0 1.414 1.414l5.657-5.657a1 1 0 0 0 0-1.414L6.707 1.636a1 1 0 0 0-1.414 0Z" fill="#585C5E"/></svg>',
|
||
doneBtnText: t('Let’s Go!'),
|
||
steps,
|
||
onDestroyed: async () => {
|
||
audioStore.setPlaying(true)
|
||
|
||
// Backend updaten
|
||
try {
|
||
await $axios.post('/api/account/onboarding-completed')
|
||
userStore.markOnboardingCompleted() // Store aktualisieren
|
||
} catch (error) {
|
||
logger.error('Error updating onboarding status:', error)
|
||
}
|
||
|
||
driverObj.destroy()
|
||
}
|
||
})
|
||
|
||
driverObj.drive()
|
||
})
|
||
}
|
||
|
||
return {
|
||
t,
|
||
localePath,
|
||
timer,
|
||
progressBarWidth,
|
||
progressColor,
|
||
handleValueChange
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
activeNav: 'soundscape',
|
||
activeDropdown: null,
|
||
userStore: useUserStore(),
|
||
form: {
|
||
soundscape: '',
|
||
headphone_type: '',
|
||
anc_type: '',
|
||
adaptive_sound_scape: ''
|
||
},
|
||
bar_width: 230,
|
||
analyser: null,
|
||
dataArray: null,
|
||
bar_val: 25,
|
||
soundscapes: [
|
||
{ id: 0, title: 'Lagoon', src: window.location.origin + useRuntimeConfig().public.tracks.lagoon_src },
|
||
{ id: 1, title: 'Tropics', src: window.location.origin + useRuntimeConfig().public.tracks.tropics_src },
|
||
{ id: 2, title: 'Forest', src: window.location.origin + useRuntimeConfig().public.tracks.forest_src },
|
||
{ id: 3, title: 'Meadow', src: window.location.origin + useRuntimeConfig().public.tracks.meadow_src }
|
||
]
|
||
}
|
||
},
|
||
mounted () {
|
||
this.updateActiveSoundscape()
|
||
getSettings()
|
||
|
||
const timerActivated = localStorage.getItem('timerActivated')
|
||
if (timerActivated !== null) {
|
||
const timer = useTimerStore()
|
||
timer.activated = JSON.parse(timerActivated)
|
||
}
|
||
|
||
document.addEventListener('click', this.handleClickOutside)
|
||
},
|
||
beforeUnmount () {
|
||
document.removeEventListener('click', this.handleClickOutside)
|
||
},
|
||
methods: {
|
||
...mapActions(useUserStore, ['updateHeadsetType', 'updateANC', 'logout', 'soundscape']),
|
||
...mapActions(useAudioStore, ['isPlaying', 'setPlaying']),
|
||
updateMusicVolume (volume) {
|
||
const musicGain = this.$refs[this.currentSoundscape]
|
||
musicGain.updateMusicGain(volume)
|
||
},
|
||
handleAdaptiveSoundscapeChange (newValue) {
|
||
this.adaptiveSoundscape = newValue
|
||
this.saveSetting(newValue, 'adaptivesoundscape')
|
||
useNuxtApp().$logger.log('Adaptive soundscape setting saved lets change the index page')
|
||
},
|
||
saveSettings (value, key) {
|
||
useNuxtApp().$logger.log(`Saving ${key}: ${value}`)
|
||
},
|
||
updateActiveSoundscape () {
|
||
switch (this.currentSoundscape) {
|
||
case 'Lagoon':
|
||
document.getElementById('lagoonLinkHomebar').classList.add('active')
|
||
break
|
||
case 'Tropics':
|
||
document.getElementById('tropicsLinkHomebar').classList.add('active')
|
||
break
|
||
case 'Forest':
|
||
document.getElementById('forestLinkHomebar').classList.add('active')
|
||
break
|
||
case 'Meadow':
|
||
document.getElementById('meadowLinkHomebar').classList.add('active')
|
||
break
|
||
}
|
||
},
|
||
removeActiveSoundscape () {
|
||
// foreach nav__dropdown-listItem remove active class
|
||
const soundscapeLinks = document.querySelectorAll('.nav__dropdown-listItem')
|
||
soundscapeLinks.forEach((link) => {
|
||
link.classList.remove('active')
|
||
})
|
||
},
|
||
playSound () {
|
||
this.setPlaying(!this.isPlaying())
|
||
},
|
||
toggleDropdown (navItem) {
|
||
this.activeDropdown = this.activeDropdown === navItem ? null : navItem
|
||
},
|
||
handleClickOutside (event) {
|
||
if (
|
||
this.$refs.soundscape &&
|
||
!this.$refs.soundscape.contains(event.target) &&
|
||
this.$refs.music &&
|
||
!this.$refs.music.contains(event.target)
|
||
) {
|
||
this.activeDropdown = null
|
||
}
|
||
},
|
||
setSoundMode (mode) {
|
||
if (this.userStore.soundMode !== mode) {
|
||
this.userStore.soundMode = mode
|
||
|
||
if (mode === 'soundscape') {
|
||
this.$emit('update:soundscape', this.form)
|
||
}
|
||
}
|
||
},
|
||
saveSetting (value, type) {
|
||
if (type === 'soundscape') {
|
||
this.form.soundscape = value
|
||
this.$emit('update:soundscape', this.form)
|
||
|
||
// Finde die passende Soundscape id
|
||
const soundscape = this.soundscapes.find(s => s.title === value)
|
||
|
||
// remove active state from all soundscapes before nuxt link does its automatic magic
|
||
this.removeActiveSoundscape()
|
||
|
||
if (soundscape) {
|
||
this.$emit('update:currentIndex', soundscape.id)
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style style="scss" scoped>
|
||
|
||
.nav {
|
||
position: fixed;
|
||
bottom: 3em;
|
||
text-align: center;
|
||
width: 100%;
|
||
padding-right: 0;
|
||
z-index: -1;
|
||
|
||
@media only screen and (max-width: 576px) {
|
||
bottom: 1.5em;
|
||
}
|
||
|
||
.nav__list {
|
||
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||
-webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||
-moz-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
align-items: center;
|
||
position: relative;
|
||
border-radius: 6px;
|
||
background-color: white;
|
||
flex-basis: 100%;
|
||
max-width: 350px;
|
||
|
||
@media only screen and (max-width: 576px) {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.nav__item {
|
||
height: 50px;
|
||
padding: 0.25em;
|
||
flex: 1;
|
||
|
||
&:hover:not(.nav__item--active) {
|
||
color: #e9c046;
|
||
|
||
/* .nav__dropdown {
|
||
display: block;
|
||
} */
|
||
}
|
||
|
||
&:first-of-type {
|
||
border-top-left-radius: 6px;
|
||
border-bottom-left-radius: 6px;
|
||
}
|
||
|
||
&:last-of-type {
|
||
border-top-right-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
}
|
||
|
||
&.nav__item--toggle {
|
||
cursor: pointer;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
|
||
&:first-of-type {
|
||
margin-left: 0.25em;
|
||
}
|
||
|
||
&:last-of-type {
|
||
margin-right: 0.25em;
|
||
}
|
||
|
||
&.nav__item--active {
|
||
|
||
.nav__item-link {
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.nav__item-link {
|
||
transition: background-color 0.25s, box-shadow 0.25s, color 0.25s;
|
||
background-color: #F4F5F8;
|
||
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
&.nav__item--timer-bg {
|
||
padding: 0;
|
||
border-left: 2px solid #F4F5F8;
|
||
overflow: hidden;
|
||
|
||
.nav__item-link {
|
||
position: relative;
|
||
|
||
svg {
|
||
z-index: 2;
|
||
}
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: calc(100% - var(--progress-width));
|
||
transition: right 0.25s ease-in-out;
|
||
bottom: 0;
|
||
background-color: var(--progress-color);
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav__item-link {
|
||
color: #585C5E;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: 250ms ease-in-out;
|
||
height: 100%;
|
||
justify-content: center;
|
||
|
||
&:hover {
|
||
color: #e9c046;
|
||
}
|
||
}
|
||
|
||
.nav__item-link--timer {
|
||
&:hover {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav__dropdown{
|
||
background-color: #F4F5F8;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 0.75em 1em 4em 1em;
|
||
left: 0;
|
||
right: 0;
|
||
display: none;
|
||
list-style: none;
|
||
border-radius: 6px;
|
||
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||
-webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||
-moz-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||
z-index: -1;
|
||
|
||
&.nav__dropdown--no-padding {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
&.open {
|
||
display: block;
|
||
}
|
||
|
||
.nav__dropdown-listItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 0.5em 1em;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
color: #585C5E;
|
||
transition: 250ms ease-in-out;
|
||
|
||
&.active, &.is-select {
|
||
background-color: #e9c046;
|
||
color: white;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: #e9c046;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
p{
|
||
text-align: left;
|
||
}
|
||
|
||
.form-switch {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1em;
|
||
padding-left: 0;
|
||
|
||
.form-switch__label {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|