eggy/public
1
0
Fork 0
Code Issues 7 Pull Requests 1 Releases Wiki Activity

Nuxt Content 3 migration #12

Merged
eggy merged 81 commits from js into master 2022-08-10 18:38:39 -04:00
Conversation 0 Commits 81 Files Changed 169 +63 -9
2 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f9ea4b3dbc - Show all commits

61
components/HamburgerMenu.vue
View File

@ -19,9 +19,10 @@ import { navItems } from "@/data/navItems";
/> />
</svg> </svg>
</label> </label>
<div class="drawer"> <div class="drawer prose dark:prose-invert">
<li v-for="(item, index) in navItems" :key="index"> <li v-for="(item, index) in navItems" :key="index" class="m-0">
<a :href="item.href">{{ item.title }}</a> <a :href="item.href" class="p-2">{{ item.title }}</a>
<hr class="m-0 m-2" v-if="index !== navItems.length - 1" />
</li> </li>
</div> </div>
</div> </div>
@ -36,6 +37,8 @@ input.checkbox {
input.checkbox ~ .drawer { input.checkbox ~ .drawer {
opacity: 0; opacity: 0;
right: 0;
top: 0;
position: absolute; position: absolute;
transform: scale(0); transform: scale(0);
} }
@ -52,15 +55,59 @@ input.checkbox:checked ~ .drawer,
* surprisingly annoying * surprisingly annoying
*/ */
opacity: 1; opacity: 1;
transform: scale(1) translateY(3rem); transform: scale(1) translate(0.5rem, 3.25rem);
} }
.drawer { .drawer {
transition: transform var(--trans), opacity var(--trans); transition: transform var(--trans), opacity var(--trans);
padding: 1rem; padding: 1rem;
margin-right: 1rem; right: 0;
background: white; background: white;
border: 1px solid gray; border: 1px solid gray;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0.5rem;
width: 12rem;
}
.drawer::before {
content: "";
width: 0;
height: 0;
position: absolute;
--tri-size: 0.6rem;
border-left: var(--tri-size) solid transparent;
border-right: var(--tri-size) solid transparent;
border-bottom: var(--tri-size) solid black;
right: 0.75rem;
top: calc(-1 * var(--tri-size));
}
.drawer::after {
content: "";
width: 0;
height: 0;
position: absolute;
--tri-size: 0.57rem;
border-left: var(--tri-size) solid transparent;
border-right: var(--tri-size) solid transparent;
border-bottom: var(--tri-size) solid white;
right: 0.75rem;
top: calc(-1 * var(--tri-size));
}
.drawer li {
list-style: none;
width: 100%;
}
.drawer li > a {
/* overwrite tailwind */
text-decoration: none;
width: 100%;
} }
/* hamburger animation */ /* hamburger animation */
@ -79,6 +126,10 @@ input.checkbox:checked ~ .drawer,
stroke-width: 5.5; stroke-width: 5.5;
stroke-linecap: round; stroke-linecap: round;
} }
html.dark .line {
stroke: #fff;
}
.ham .top { .ham .top {
stroke-dasharray: 40 139; stroke-dasharray: 40 139;
} }

11
components/Navbar.vue
View File

@ -26,6 +26,8 @@ nav {
width: 100%; width: 100%;
border: 1px solid red; border: 1px solid red;
padding: 1rem; padding: 1rem;
/* main stuff is z-index 1 and the hamburger must be above everything else */
z-index: 2;
} }
ul { ul {
@ -43,24 +45,25 @@ li.home-text {
} }
.hamburger { .hamburger {
transform: scale(0); width: 0rem;
opacity: 0; opacity: 0;
} }
* { * {
--trans: 0.2s ease; --trans: 0.2s ease;
transition: opacity var(--trans), transform var(--trans), gap var(--trans); transition: opacity var(--trans), transform var(--trans), gap var(--trans),
width var(--trans);
} }
@media screen and (max-width: 510px) { @media screen and (max-width: 510px) {
.hamburger { .hamburger {
display: flex; display: flex;
transform: none; width: 3rem;
opacity: 1; opacity: 1;
} }
li:not(.home-text) { li:not(.home-text) {
transform: scale(0); width: 0;
opacity: 0; opacity: 0;
/* accessibility? screw accessibility /* accessibility? screw accessibility
* i want my pretty animations * i want my pretty animations