Skip to content

Commit

Permalink
Add hamburger menu
Browse files Browse the repository at this point in the history
swantzter committed Oct 31, 2021
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.