feat: trial hamburger menu
This commit is contained in:
parent
b608ece7ae
commit
c9398ebfb0
46
components/Hamburger.vue
Normal file
46
components/Hamburger.vue
Normal 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>
|
@ -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
7
composables/metadata.ts
Normal 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
7
data/navItems.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export const navItems = [
|
||||
{ href: "/about", title: "About" },
|
||||
{ href: "/blog", title: "Blog" },
|
||||
{ href: "/stories", title: "Stories" },
|
||||
];
|
||||
|
||||
export default navItems;
|
@ -58,7 +58,7 @@ html.dark::before {
|
||||
main {
|
||||
width: 80%;
|
||||
max-width: 60rem;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
margin: auto;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
@ -1,3 +1,5 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<ContentDoc tag="article" class="prose dark:prose-invert">
|
||||
<template #not-found>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
useHead({ title: "About | Eggworld" });
|
||||
useTitle("About");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
useHead({ title: "Blog | Eggworld" });
|
||||
useTitle("Blog");
|
||||
</script>
|
||||
|
||||
<template></template>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
useHead({ title: "Stories | Eggworld" });
|
||||
useTitle("Stories");
|
||||
</script>
|
||||
|
||||
<template></template>
|
||||
|
Loading…
Reference in New Issue
Block a user