feat: trial hamburger menu

This commit is contained in:
eggy 2022-08-07 11:37:29 -04:00
parent b608ece7ae
commit c9398ebfb0
10 changed files with 79 additions and 19 deletions

46
components/Hamburger.vue Normal file
View File

@ -0,0 +1,46 @@
<script setup lang="ts">
import IconHamburger from "@/assets/images/hamburger.svg?component";
import { navItems } from "@/data/navItems";
</script>
<template>
<div class="hamburger">
<label class="checkbox-label" for="checkbox"><IconHamburger /></label>
<input class="checkbox" type="checkbox" id="checkbox" />
<div class="drawer">
<li v-for="(item, index) in navItems" :key="index">
<a :href="item.href">{{ item.title }}</a>
</li>
</div>
</div>
</template>
<style scoped>
input.checkbox {
outline: none;
width: 0;
opacity: 0;
}
label.checkbox-label {
cursor: pointer;
}
input.checkbox ~ .drawer {
opacity: 0;
position: absolute;
transform: scale(0);
}
input.checkbox:checked ~ .drawer,
input.checkbox:hover ~ .drawer,
.drawer:hover {
opacity: 1;
transform: scale(1) translateY(1rem);
}
.drawer {
transition: transform var(--trans), opacity var(--trans);
padding: 1rem;
margin-right: 1rem;
}
</style>

View File

@ -1,19 +1,20 @@
<script setup lang="ts">
import ColourPicker from "./ColourPicker.vue";
import IconHamburger from "@/assets/images/hamburger.svg?component";
import { navItems } from "@/data/navItems";
</script>
<template>
<nav class="flex items-center justify-between">
<ul>
<li class="home-text"><a href="/">Eggworld</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/stories">Stories</a></li>
<li v-for="(item, index) in navItems" :key="index">
<a :href="item.href">{{ item.title }}</a>
</li>
</ul>
<div class="flex items-center">
<ColourPicker />
<div class="hamburger">
<IconHamburger />
<Hamburger />
</div>
</div>
</nav>
@ -42,29 +43,24 @@ li.home-text {
}
.hamburger {
height: 1px;
width: 1px;
transform: scale(0);
opacity: 0;
}
* {
--trans: 0.2s ease;
transition: opacity var(--trans), height var(--trans), width var(--trans),
padding-left var(--trans);
transition: opacity var(--trans), transform var(--trans);
}
@media screen and (max-width: 510px) {
.hamburger {
display: flex;
padding-left: 1rem;
height: unset;
width: unset;
transform: none;
opacity: 1;
}
li:not(.home-text) {
height: 1px;
width: 1px;
transform: scale(0);
opacity: 0;
/* accessibility? screw accessibility
* i want my pretty animations

7
composables/metadata.ts Normal file
View File

@ -0,0 +1,7 @@
/**
* Set the page title in the format [title] | Eggworld.
* @param title The title string.
*/
export function useTitle(title: string) {
useHead({ title: `${title} | Eggworld` });
}

7
data/navItems.ts Normal file
View File

@ -0,0 +1,7 @@
export const navItems = [
{ href: "/about", title: "About" },
{ href: "/blog", title: "Blog" },
{ href: "/stories", title: "Stories" },
];
export default navItems;

View File

@ -58,7 +58,7 @@ html.dark::before {
main {
width: 80%;
max-width: 60rem;
height: 100%;
min-height: 100%;
margin: auto;
padding-top: 2rem;
}

View File

@ -1,3 +1,5 @@
<script setup lang="ts"></script>
<template>
<ContentDoc tag="article" class="prose dark:prose-invert">
<template #not-found>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
useHead({ title: "About | Eggworld" });
useTitle("About");
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
useHead({ title: "Blog | Eggworld" });
useTitle("Blog");
</script>
<template></template>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
useHead({ title: "Home | Eggworld" });
useTitle("Home");
</script>
<template>
@ -11,6 +11,8 @@ useHead({ title: "Home | Eggworld" });
<HomeStatBox>Latest story</HomeStatBox>
<HomeStatBox>Latest commit w/details</HomeStatBox>
</div>
<p>SERVICES</p>
<p>ABOUT</p>
</main>
</template>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
useHead({ title: "Stories | Eggworld" });
useTitle("Stories");
</script>
<template></template>