Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
<section class="pb-20">
<nav class="fixed w-full p-7 bg-white shadow-xl z-10">
<div class="flex items-center justify-between">
<!-- Header logo -->
<div>
<Logo />
</div>
<!-- Mobile toggle -->
<div class="md:hidden">
<button @click="drawer">
<svg class="h-8 w-8 fill-current text-black" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Navbar -->
<div class="hidden md:block">
<ul class="flex space-x-8 text-sm font-sans">
<li><a href="/" class="active border-b-2 border-blue-500 pb-1">Home</a></li>
<li><a href="/about" class="">C'est quoi ?</a></li>
</ul>
</div>
<!-- Dark Background Transition -->
<transition enter-class="opacity-0" enter-active-class="ease-out transition-medium" enter-to-class="opacity-100" leave-class="opacity-100" leave-active-class="ease-out transition-medium" leave-to-class="opacity-0">
<div v-show="isOpen" class="z-10 fixed inset-0 transition-opacity" @keydown.esc="isOpen = false">
<div class="absolute inset-0 bg-black opacity-50" tabindex="0" @click="isOpen = false"></div>
</div>
</transition>
<!-- Drawer Menu -->
<aside class="p-5 transform top-0 left-0 w-64 bg-white fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30" :class="isOpen ? 'translate-x-0' : '-translate-x-full'">
<div class="close">
<button class="absolute top-0 right-0 mt-4 mr-4" @click=" isOpen = false">
<svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<span class="flex w-full items-center p-4 border-b" @click="isOpen = false">
<Logo />
</span>
<ul class="divide-y font-sans">
<li><a href="/" class="my-4 inline-block" @click="isOpen = false">Home</a></li>
<li><a href="/about" class="my-4 inline-block" @click="isOpen = false">C'est quoi ?</a></li>
</ul>
</aside>
</div>
</nav>
</section>
</template>
<script>
export default {
props: {},
data() {
return {
isOpen: false,
}
},
watch: {
isOpen: {
immediate: true,
handler(isOpen) {
if (process.client) {
if (isOpen) document.body.style.setProperty("overflow", "hidden");
else document.body.style.removeProperty("overflow");
}
}
}
},
mounted() {
document.addEventListener("keydown", e => {
if (e.keyCode === 27 && this.isOpen) this.isOpen = false;
});
},
methods: {
drawer() {
this.isOpen = !this.isOpen;
},
}
};
</script>