mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 11:55:38 +00:00
Kevin
8e586811ec
* On every route change, update local variables from query params * ResultSection is keyed to query to force re-render * Resolved lint warnings * replace webpack w/ vite * update all imports with alias @ and scss * vite environment variables, also typed * upgraded eslint, defined new rules & added ignore comments * resolved linting issues * moved index.html to project root * updated dockerfile w/ build stage before runtime image definition * sign drone config
126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<template>
|
|
<nav>
|
|
<!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
|
|
<a v-if="isHome" class="nav__logo" href="/">
|
|
<TmdbLogo class="logo" />
|
|
</a>
|
|
|
|
<router-link v-else class="nav__logo" to="/" exact>
|
|
<TmdbLogo class="logo" />
|
|
</router-link>
|
|
|
|
<SearchInput />
|
|
|
|
<Hamburger class="mobile-only" />
|
|
<NavigationIcon class="desktop-only" :route="profileRoute" />
|
|
|
|
<!-- <div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }"> -->
|
|
<div v-if="isOpen" class="navigation-icons-grid mobile-only">
|
|
<NavigationIcons>
|
|
<NavigationIcon :route="profileRoute" />
|
|
</NavigationIcons>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useStore } from "vuex";
|
|
import { useRoute } from "vue-router";
|
|
import SearchInput from "@/components/header/SearchInput.vue";
|
|
import Hamburger from "@/components/ui/Hamburger.vue";
|
|
import NavigationIcons from "@/components/header/NavigationIcons.vue";
|
|
import NavigationIcon from "@/components/header/NavigationIcon.vue";
|
|
import TmdbLogo from "@/icons/tmdb-logo.vue";
|
|
import IconProfile from "@/icons/IconProfile.vue";
|
|
import IconProfileLock from "@/icons/IconProfileLock.vue";
|
|
import type INavigationIcon from "../../interfaces/INavigationIcon";
|
|
|
|
const route = useRoute();
|
|
const store = useStore();
|
|
|
|
const signinNavigationIcon: INavigationIcon = {
|
|
title: "Signin",
|
|
route: "/signin",
|
|
icon: IconProfileLock
|
|
};
|
|
|
|
const profileNavigationIcon: INavigationIcon = {
|
|
title: "Profile",
|
|
route: "/profile",
|
|
icon: IconProfile
|
|
};
|
|
|
|
const isHome = computed(() => route.path === "/");
|
|
const isOpen = computed(() => store.getters["hamburger/isOpen"]);
|
|
const loggedIn = computed(() => store.getters["user/loggedIn"]);
|
|
|
|
const profileRoute = computed(() =>
|
|
!loggedIn.value ? signinNavigationIcon : profileNavigationIcon
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "scss/variables";
|
|
@import "scss/media-queries";
|
|
|
|
.spacer {
|
|
@include mobile-only {
|
|
width: 100%;
|
|
height: $header-size;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: grid;
|
|
grid-template-columns: var(--header-size) 1fr var(--header-size);
|
|
|
|
> * {
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.nav__logo {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo {
|
|
padding: 1rem;
|
|
fill: var(--color-green);
|
|
width: var(--header-size);
|
|
height: var(--header-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: $background-nav-logo;
|
|
transition: transform 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
@include mobile {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.navigation-icons-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: fixed;
|
|
top: var(--header-size);
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: $background-95;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
|
|
opacity: 1;
|
|
visibility: visible;
|
|
|
|
&.open {
|
|
}
|
|
}
|
|
</style>
|