<template> <header class="header"> <div class="header-nav"> <router-link to="/" class="logo-link" ><h1 class="header-logo"> <div class="logo" v-html="logo" /> </h1></router-link> <nav class="nav"> <ul class="nav-list nolist"> <li class="nav-item"> <router-link v-slot="{ href, isActive, navigate }" to="/actors" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Actors</a> </router-link> </li> <li class="nav-item"> <router-link v-slot="{ href, isActive, navigate }" to="/channels" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Channels</a> </router-link> </li> <li class="nav-item"> <router-link v-slot="{ href, isActive, navigate }" to="/tags" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Tags</a> </router-link> </li> <li class="nav-item"> <router-link v-slot="{ href, isActive, navigate }" to="/movies" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Movies</a> </router-link> </li> </ul> </nav> </div> <div class="header-section"> <div class="sidebar-toggle noselect" @click.stop="$emit('toggleSidebar')" ><Icon icon="menu" /></div> <Tooltip> <div class="header-account"> <div class="account"> <Icon icon="user3-long" class="avatar" /> </div> </div> <template v-slot:tooltip> <div class="menu"> <ul class="menu-items noselect"> <li class="menu-item disabled" @click.stop > <Icon icon="enter2" />Sign in </li> <li v-show="!sfw" class="menu-item" @click.stop="setSfw(true)" > <Icon icon="flower" class="toggle noselect" />Safe mode </li> <li v-show="sfw" class="menu-item" @click.stop="setSfw(false)" > <Icon icon="fire" class="toggle noselect" />Filth mode </li> <li v-show="theme === 'light'" class="menu-item" @click.stop="setTheme('dark')" > <Icon icon="moon" class="toggle noselect" />Dark theme </li> <li v-show="theme === 'dark'" class="menu-item" @click.stop="setTheme('light')" > <Icon icon="sun" class="toggle noselect" />Light theme </li> <li class="menu-item" @click="$emit('showFilters', true)" > <Icon icon="filter" />Filters </li> </ul> </div> </template> </Tooltip> <Search class="search-full" /> <Tooltip class="search-compact" :open="searching" @open="searching = true" @close="searching = false" > <button type="button" class="search-button" ><Icon icon="search" /></button> <template v-slot:tooltip> <Search :searching="searching" class="compact" @search="searching = false" @click.stop /> </template> </Tooltip> </div> </header> </template> <script> import { mapState } from 'vuex'; import Search from './search.vue'; import logo from '../../img/logo.svg'; function sfw(state) { return state.ui.sfw; } function theme(state) { return state.ui.theme; } function setTheme(newTheme) { this.$store.dispatch('setTheme', newTheme); } function setSfw(enabled) { this.$store.dispatch('setSfw', enabled); } export default { components: { Search, }, emits: ['toggleSidebar', 'showFilters'], data() { return { logo, searching: false, showFilters: false, }; }, computed: { ...mapState({ sfw, theme, }), }, methods: { setSfw, setTheme, }, }; </script> <style lang="scss" scoped> @import 'breakpoints'; .header { height: 3rem; display: flex; align-items: center; z-index: 2; justify-content: space-between; background: var(--background); color: var(--primary); box-shadow: 0 0 3px var(--darken-weak); font-size: 0; } .header-nav { display: flex; align-items: center; height: 100%; overflow: hidden; } .header-section { height: 100%; align-items: center; display: flex; flex-direction: row; } .sidebar-toggle { display: none; align-items: center; height: 100%; .icon { display: inline-block; fill: var(--shadow-modest); padding: 0 1rem; width: 1.5rem; height: 100%; } &:hover { cursor: pointer; .icon { fill: var(--primary); } } } .logo-link { height: 100%; display: inline-block; text-decoration: none; margin: -.25rem 1rem 0 0; } .header-logo { height: 100%; display: flex; align-items: center; padding: 0 0 0 1rem; fill: var(--primary); } .logo { width: 6rem; display: flex; } .nav, .nav-list { display: inline-block; height: 100%; } .nav-item { height: 100%; } .nav-link { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 1rem; color: var(--shadow); text-decoration: none; font-size: .9rem; font-weight: bold; cursor: pointer; &.active { color: var(--primary); .icon { fill: var(--primary); } } &:hover:not(.active) { color: var(--primary); .icon { fill: var(--primary); } } } .header-toggles { margin: 0 .5rem 0 0; .icon { padding: 1rem .75rem; fill: var(--shadow); &:hover { fill: var(--shadow-strong); cursor: pointer; } &.active { fill: var(--primary); } } } .header-account { padding: 1rem; &:hover { cursor: pointer; .account { border-color: var(--primary); } .avatar { fill: var(--primary); } } } .account { width: 1.25rem; height: 1.25rem; display: flex; justify-content: center; border: solid 2px var(--shadow); border-radius: 1.5rem; overflow: hidden; .avatar { width: 1rem; height: 1rem; margin: .3rem 0 0 0; fill: var(--shadow); } } .menu-items { list-style: none; padding: 0; margin: 0; } .menu-item { display: flex; padding: .75rem 1rem .75rem .75rem; .icon { fill: var(--darken); margin: 0 1rem 0 0; } &.disabled { color: var(--darken-weak); cursor: default; .icon { fill: var(--darken-weak); } } &:hover:not(.disabled) { cursor: pointer; color: var(--primary); .icon { fill: var(--primary); } } } .search-compact { display: none; height: 100%; } .search-button { height: 100%; padding: .25rem 1rem 0 1rem; background: none; border: none; outline: none; .icon { fill: var(--shadow); } &:hover { cursor: pointer; .icon { fill: var(--shadow-strong); } } } @media(max-width: $breakpoint-kilo) { .search-full { display: none; } .search-compact { display: flex; } .header-account { padding: 1rem .5rem 1rem 1rem; } } @media(max-width: $breakpoint-small) { .sidebar-toggle { display: flex; } .logo-link { margin: -.25rem .75rem 0 0; } .nav-link { padding: 0 .75rem; } .search-compact { display: none; } .header-account { display: none; } } </style>