Skip to content

Commit

Permalink
Add hamburger menu
Browse files Browse the repository at this point in the history
swantzter committed Oct 31, 2021

Verified

This commit was signed with the committer’s verified signature.
martin-sucha Martin Sucha
1 parent bc9042e commit c44be29
Showing 1 changed file with 40 additions and 7 deletions.
47 changes: 40 additions & 7 deletions src/components/NavHeader.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,46 @@
<template>
<header class="border-b-ttred-900 bg-ttred-500 border-b sticky top-0 left-0 right-0 flex justify-between items-center py-1 px-2 whitespace-nowrap z-1000">
<header ref="headerRef" class="border-b-ttred-900 bg-ttred-500 border-b sticky top-0 left-0 right-0 flex justify-between items-center py-1 px-2 whitespace-nowrap z-1000">
<router-link to="/" class="inline-flex justify-start items-center text-white text-size-xl">
<img src="/tricktionary2.svg" height="30" with="30" class="h-30px mr-1 align-bottom">
the Tricktionary
</router-link>

<nav class="flex">
<router-link exact-active-class="active" class="nav-link" to="/">Tricks</router-link>
<router-link active-class="active" class="nav-link" to="/speed">Speed</router-link>
<router-link active-class="active" class="nav-link" to="/shop">Shop</router-link>
<router-link active-class="active" class="nav-link" to="/profile" v-if="user">Profile</router-link>
<router-link active-class="active" class="nav-link" to="/auth" v-else>Sign in</router-link>
<div class="flex sm:hidden">
<a
class="nav-link inline-flex items-center justify-center min-h-8 pointer-hand"
@click="showNav = !showNav"
><icon-menu title="Toggle Menu" /></a>
</div>
<nav
class="flex <sm:absolute <sm:top-12 <sm:right-0 <sm:left-0 <sm:flex-col"
:class="{
'<sm:hidden': !showNav,
}"
@click="showNav = false"
>
<router-link exact-active-class="active" class="nav-block nav-link" to="/">Tricks</router-link>
<router-link active-class="active" class="nav-block nav-link" to="/speed">Speed</router-link>
<router-link active-class="active" class="nav-block nav-link" to="/shop">Shop</router-link>
<router-link active-class="active" class="nav-block nav-link" to="/profile" v-if="user">Profile</router-link>
<router-link active-class="active" class="nav-block nav-link" to="/auth" v-else>Sign in</router-link>
</nav>
</header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import useAuth from '../hooks/useAuth'
import IconMenu from 'virtual:vite-icons/mdi/menu'
const { firebaseUser: user } = useAuth()
const showNav = ref(false)
const headerRef = ref()
onClickOutside(headerRef, () => {
showNav.value = false
})
</script>

<style scoped>
@@ -31,6 +53,17 @@ const { firebaseUser: user } = useAuth()
color: white;
}
@media (max-width: 639.9px) {
.nav-block {
@apply bg-ttred-500;
@apply rounded-none;
@apply m-0;
@apply py-4;
@apply border-t;
@apply border-ttred-900;
}
}
.nav-link:hover,
.nav-link.active {
@apply bg-ttyellow-500;

0 comments on commit c44be29

Please sign in to comment.