<template> <header class="header"> <div class="header-nav"> <RouterLink to="/" class="logo-link" ><h1 class="header-logo"> <div class="logo" v-html="logo" /> </h1></RouterLink> <nav class="nav"> <ul class="nav-list nolist"> <li class="nav-item"> <RouterLink v-slot="{ href, isActive, navigate }" :to="{ name: 'actors', params: { pageNumber: 1 } }" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Actors</a> </RouterLink> </li> <li class="nav-item"> <RouterLink v-slot="{ href, isActive, navigate }" :to="{ name: 'channels' }" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Channels</a> </RouterLink> </li> <li class="nav-item"> <RouterLink v-slot="{ href, isActive, navigate }" :to="{ name: 'tags' }" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Tags</a> </RouterLink> </li> <li class="nav-item"> <RouterLink v-slot="{ href, isActive, navigate }" :to="{ name: 'movies', params: { range: 'latest', pageNumber: 1 } }" custom > <a class="nav-link" :href="href" :class="{ active: isActive }" @click="navigate" >Movies</a> </RouterLink> </li> </ul> </nav> </div> <div class="header-section"> <div class="sidebar-toggle noselect" @click.stop="events.emit('toggleSidebar')" ><Icon icon="menu" /></div> <Tooltip v-if="me"> <div class="header-button header-notifications" :class="{ unseen: unseenNotificationsCount > 0 }" > <Icon icon="bell2" /> <span v-if="unseenNotificationsCount > 0" class="notifications-count" >{{ unseenNotificationsCount }}</span> </div> <template #tooltip> <Notifications :notifications="notifications" :unseen-count="unseenNotificationsCount" @check="fetchNotifications" @add-alert="showAddAlert = true" /> </template> </Tooltip> <Tooltip> <div class="header-button header-account"> <div class="account"> <Icon icon="user3-long" class="avatar" /> </div> </div> <template #tooltip> <Menu /> </template> </Tooltip> <Tooltip class="search-compact" :open="searching" @open="searching = true" @close="searching = false" > <button type="button" class="search-button" ><Icon icon="search" /></button> <template #tooltip> <Search :searching="searching" class="compact" @search="searching = false" @click.stop /> </template> </Tooltip> <Search class="search-full" /> </div> <AddAlert v-if="showAddAlert" @close="showAddAlert = false" >Alert</AddAlert> </header> </template> <script> import Menu from './menu.vue'; import Notifications from './notifications.vue'; import AddAlert from '../alerts/add.vue'; import Search from './search.vue'; import logo from '../../img/logo.svg'; function me() { return this.$store.state.auth.user; } async function fetchNotifications() { const { notifications, unseenCount } = await this.$store.dispatch('fetchNotifications'); this.notifications = notifications; this.unseenNotificationsCount = unseenCount; } export default { components: { AddAlert, Menu, Notifications, Search, }, emits: ['toggleSidebar', 'showFilters'], data() { return { logo, searching: false, showFilters: false, showAddAlert: false, notifications: [], unseenNotificationsCount: 0, }; }, computed: { me, }, watch: { me: fetchNotifications, }, mounted: fetchNotifications, methods: { fetchNotifications, }, }; </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-button { padding: 1rem .75rem; .icon { fill: var(--shadow); } &:hover { cursor: pointer; .account { border-color: var(--primary); } .icon { fill: var(--primary); } } } .header-account { padding: 1rem 1.25rem 1rem .75rem; } .header-notifications { position: relative; padding: 1rem .75rem; &.unseen .icon { fill: var(--primary); } } .notifications-count { width: 100%; display: flex; align-items: center; justify-content: center; position: absolute; bottom: .3rem; left: 0; color: var(--primary); font-size: .6rem; font-weight: bold; } .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); } } .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 1.25rem 0 0; } .nav-link { padding: 0.05rem .75rem 0 .75rem; } .search-compact { display: none; } .header-account, .header-notifications { display: none; } } </style>