traxxx/assets/components/header/header.vue

<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>