<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" > <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="/networks" > <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" > <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" > <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="toggleSidebar" ><Icon icon="menu" /></div> <div class="header-toggles"> <Icon v-show="!sfw" v-tooltip="'Hit S to enable safe mode'" icon="flower" class="toggle noselect" @click.native="setSfw(true)" /> <Icon v-show="sfw" v-tooltip="'Hit N to disable safe mode'" icon="fire" class="toggle noselect" @click.native="setSfw(false)" /> <Icon v-show="theme === 'light'" v-tooltip="'Hit D to use dark theme'" icon="moon" class="toggle noselect" @click.native="setTheme('dark')" /> <Icon v-show="theme === 'dark'" v-tooltip="'Hit L to use light theme'" icon="sun" class="toggle noselect" @click.native="setTheme('light')" /> </div> <Search class="search-full" /> <v-popover class="search-compact" :open="searching" @show="searching = true" @hide="searching = false" > <button type="button" class="search-button" ><Icon icon="search" /></button> <Search slot="popover" :searching="searching" class="compact" @search="searching = false" /> </v-popover> </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, }, props: { toggleSidebar: { type: Function, default: null, }, }, data() { return { logo, searching: 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); } } } .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-toggles { margin: 0; } } @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-toggles { display: none; } } @media(max-width: $breakpoint-micro) { } @media(max-width: $breakpoint-nano) { .header-toggles { display: none; } } </style>