traxxx-web/components/header/header.vue

<template>
	<header class="header">
		<nav class="nav">
			<Link href="/">
				<h1 class="title">
					<div
						class="logo"
						v-html="logo"
					/>
				</h1>
			</Link>

			<ul class="nav-list nolist">
				<!--
				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'updates' }"
						href="/updates"
					>Updates</Link>
				</li>
				-->

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'actors' }"
						href="/actors"
					>Actors</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'channels' }"
						href="/channels"
					>Channels</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'tags' }"
						href="/tags"
					>Tags</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'movies' }"
						href="/movies"
					>Movies</Link>
				</li>
			</ul>
		</nav>

		<div class="header-section">
			<form
				class="search"
				:class="{ focused: searchFocused }"
				@submit.prevent="search"
			>
				<input
					v-model="query"
					type="search"
					placeholder="Search"
					class="input"
					@focus="searchFocused = true"
					@blur="blurSearch"
				>

				<button
					class="search-button"
					data-search
				>
					<Icon icon="search" />
				</button>
			</form>

			<div
				class="userpanel"
				:class="{ searching: searchFocused }"
			>
				<VDropdown
					v-if="user"
					:triggers="['click']"
					:prevent-overflow="true"
					class="notifs-trigger"
				>
					<button
						type="button"
						class="notifs-button"
						:class="{ unseen: unseen > 0 }"
					>
						<Icon
							icon="bell2"
							class="notifs-bell"
						/>

						<span
							v-if="unseen > 0"
							class="notifs-unseen"
						>{{ unseen }}</span>
					</button>

					<template #popper>
						<Notifications
							@unseen="(count) => unseen = count"
							@add-alert="showAlertDialog = true"
						/>
					</template>
				</VDropdown>

				<VDropdown
					:triggers="['click']"
					:prevent-overflow="true"
					class="menu-trigger"
				>
					<div class="avatar-container">
						<img
							v-if="user"
							:src="user.avatar"
							class="avatar"
						>

						<Icon
							v-else
							icon="user7"
							class="avatar-placeholder"
						/>
					</div>

					<template #popper>
						<div class="menu">
							<a
								v-if="user"
								:href="`/user/${user.username}`"
								class="menu-header ellipsis"
							>{{ user.username }}</a>

							<ul class="menu-list nolist">
								<li
									v-if="user"
									class="menu-item"
								>
									<a
										:href="`/user/${user.username}`"
										class="menu-button nolink"
									>
										<Icon icon="user7" />
										Profile
									</a>
								</li>

								<li
									v-else-if="allowLogin"
									v-close-popper
									class="menu-item"
								>
									<a
										:href="`/login?r=${encodeURIComponent(currentPath)}`"
										class="menu-button nolink"
									>
										<Icon icon="enter" />
										Log in
									</a>
								</li>

								<li
									v-if="user?.primaryStash"
									class="menu-item"
								>
									<a
										:href="`/stash/${user.username}/${user.primaryStash.slug}`"
										class="menu-button nolink favorites"
									>
										<Icon icon="heart7" />
										Favorites
									</a>
								</li>

								<li
									v-close-popper
									class="menu-item menu-button"
									@click="showSettings = true"
								>
									<Icon icon="equalizer" />
									Settings
								</li>

								<li
									v-if="theme === 'dark'"
									v-close-popper
									class="menu-item menu-button"
									@click="setTheme('light')"
								>
									<Icon icon="sun3" />
									Light theme
								</li>

								<li
									v-else
									v-close-popper
									class="menu-item menu-button"
									@click="setTheme('dark')"
								>
									<Icon icon="moon" />
									Dark theme
								</li>

								<li
									v-if="user"
									class="menu-button menu-item logout"
									@click="logout"
								><Icon icon="exit2" />Log out</li>
							</ul>
						</div>
					</template>
				</VDropdown>
			</div>
		</div>

		<Settings
			v-if="showSettings"
			@close="showSettings = false"
		/>

		<AlertDialog
			v-if="showAlertDialog"
			@close="showAlertDialog = false"
		/>
	</header>
</template>

<script setup>
import {
	ref,
	computed,
	inject,
} from 'vue';

import Cookies from 'js-cookie';

import navigate from '#/src/navigate.js';
import { del } from '#/src/api.js';
import events from '#/src/events.js';
// import getPath from '#/src/get-path.js';

import Notifications from '#/components/header/notifications.vue';
import Settings from '#/components/settings/settings.vue';
import AlertDialog from '#/components/alerts/create.vue';

import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved

const pageContext = inject('pageContext');
const theme = ref(pageContext.env.theme);

const user = pageContext.user;
const unseen = ref(pageContext.meta.unseenNotifications);
const query = ref(pageContext.urlParsed.search.q || '');
const allowLogin = pageContext.env.allowLogin;
const searchFocused = ref(false);
const showSettings = ref(false);
const showAlertDialog = ref(false);

const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;

function search() {
	navigate('/search', { q: query.value }, { redirect: true });
}

function setTheme(newTheme) {
	theme.value = newTheme;

	Cookies.set('theme', newTheme);
	events.emit('theme', newTheme);
}

async function logout() {
	await del('/session');
	navigate('/login?consent', null, { redirect: true }); // pass consent variable to reinstate in new session
}

function blurSearch(event) {
	if (!event.relatedTarget || !Object.hasOwn(event.relatedTarget?.dataset, 'search')) {
		searchFocused.value = false;
	}
}
</script>

<style scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 100; /* make sure shadow shows up above content */
	box-shadow: 0 0 3px var(--shadow-weak-10);
}

.title {
	margin: 0;
	display: inline-block;
}

.logo {
	display: flex;
	width: 8rem;
	box-sizing: border-box;
	padding: .75rem;
	margin-right: 1rem;
	fill: var(--primary);
}

.nav {
	display: flex;
	align-items: center;
}

.nav-item .link {
	font-size: .9rem;
	color: var(--glass-strong-10);
	box-sizing: border-box;
	padding: 1rem;
	height: 100%;

	&:hover {
		text-decoration: none;
		color: var(--primary);
	}
}

.link {
	font-weight: bold;

	&.active {
		color: var(--primary);
	}
}

.header-section {
	height: 100%;
	display: flex;
	align-items: center;
	margin-left: .5rem;
}

.search {
	height: 2rem;
	display: flex;
	align-items: center;
	border-radius: 1rem;
	background: var(--background-dark-10);
	box-shadow: inset 0 0 3px var(--shadow-weak-40);

	.input {
		width: 14rem;
		padding: .5rem 0 .5rem 1rem;
		border: none;
		margin: 0;
		background: none;

		&:placeholder-shown {
			text-overflow: ellipsis;
		}
	}

	.search-button {
		padding: 0;
		border: none;
		background: none;
	}

	.icon {
		height: 100%;
		padding: 0 .75rem 0 .5rem;
		fill: var(--glass-weak-10);
	}

	&.focused {
		/*
		border: solid 1px var(--primary-light-10);
		*/
		box-shadow: inset 0 0 3px var(--shadow-weak-30);

		.icon {
			fill: var(--primary);
			cursor: pointer;
		}
	}

	&:last-child {
		/* login disabled */
		margin-right: 1rem;
	}
}

.userpanel {
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 0;
	cursor: pointer;

	.button-submit {
		margin-left: 1rem;
	}

	&:hover .avatar {
		box-shadow: 0 0 3px var(--shadow-weak-10);
	}
}

.menu-trigger {
	height: 100%;
}

.avatar-container {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1rem 0 0;

	&:hover .icon {
		fill: var(--primary);
	}
}

.avatar {
	width: 2rem;
	height: 2rem;
	border-radius: .25rem;
	object-fit: cover;
}

.avatar-placeholder {
	width: 1.25rem;
	padding-left: 1rem;
	height: 100%;
	fill: var(--glass);
}

.notifs-trigger {
	height: 100%;
}

.notifs-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 1.25rem;
	background: none;
	border: none;

	&:hover,
	&.unseen {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}

.notifs-bell {
	margin-bottom: .1rem;
}

.notifs-unseen {
	bottom: 0;
	font-size: .65rem;
	font-weight: bold;
	color: var(--primary);
}

.notifs-bell {
	fill: var(--glass);
}

.login {
	display: flex;
	align-items: center;

	.icon {
		display: none;
		height: 1rem;
		padding: 0;
		fill: var(--text-light);
	}
}

.menu {
	overflow: hidden;
}

.menu-header {
	display: flex;
	padding: .75rem 1rem;
	border-bottom: solid 1px var(--glass-weak-30);
	color: var(--glass-strong-30);
	text-decoration: none;
	font-weight: bold;
}

.menu-item {
	display: block;
}

.menu-button {
	display: flex;
	align-items: center;
	padding: .75rem .5rem .75rem .75rem;
	font-size: 1.1rem;

	.icon {
		fill: var(--glass);
		margin-right: .75rem;
		transform: translateY(-1px);
	}

	&:hover {
		color: var(--primary);
		cursor: pointer;

		&:not(.logout) .icon {
			fill: var(--primary);
		}

		&.logout {
			color: var(--error);
		}
	}
}

/*
.favorites .icon {
	fill: var(--primary);
}
*/

.logout .icon {
	fill: var(--error);
}

@media(--small) {
	.header-section {
		flex-grow: 1;
	}

	.search {
		flex-grow: 1;
	}

	.search .input {
		width: 0;
		flex-grow: 1;
	}

	.userpanel.searching {
		padding: 0 0 0 1rem;
		width: 0;
	}

	.login-text {
		display: none;
	}

	.login .icon {
		display: block;
	}
}

@media(--small-10) {
	.nav-list {
		display: none;
	}

	.logo {
		margin-right: .75rem;
	}
}
</style>