Thomas Cole
37702831c2
All checks were successful
continuous-integration/drone/push Build is passing
90 lines
2.9 KiB
Plaintext
90 lines
2.9 KiB
Plaintext
---
|
|
import Divider from "../misc/Divider.astro";
|
|
import SocialLinks from "./SocialLinks.astro";
|
|
import ThemeToggle from "../misc/ThemeToggle.astro";
|
|
---
|
|
|
|
<style>
|
|
[data-shown="true"] {
|
|
transform: translateX(0);
|
|
}
|
|
</style>
|
|
|
|
<div id="menu" data-shown=""
|
|
class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: transition-all duration-100 z-50">
|
|
|
|
<button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
|
|
<span class="material-symbols-outlined">
|
|
close
|
|
</span>
|
|
</button>
|
|
|
|
<a href="/">
|
|
<div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
|
|
<img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt="">
|
|
</div>
|
|
</a>
|
|
|
|
<p class="text-2xl">Thomas Cole</p>
|
|
<p class="font-thin text-sm">Developer, Linux Enthusiast, System Administrator</p>
|
|
|
|
<SocialLinks />
|
|
<Divider />
|
|
|
|
<ul>
|
|
<li class="flex">
|
|
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
|
<button class="p-2">Home</button>
|
|
</a>
|
|
</li>
|
|
<li class="flex">
|
|
<a href="/projects/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
|
<button class="p-2">Projects</button>
|
|
</a>
|
|
</li>
|
|
<li class="flex">
|
|
<a href="/blog/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
|
<button class="p-2">Blog</button>
|
|
</a>
|
|
</li>
|
|
<li class="flex">
|
|
<a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
|
<button class="p-2">Resume/CV</button>
|
|
</a>
|
|
</li>
|
|
<li class="flex">
|
|
<a href="mailto:thomas.patrick.cole@gmail.com"
|
|
class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
|
<button class="p-2">Contact</button>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<Divider />
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
<div
|
|
class="h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden block bg-base-200 text-left transition-all duration-100">
|
|
|
|
<button id="menubtn" class="w-12 h-12 m-auto">
|
|
<span class="material-symbols-outlined mt-1">
|
|
menu
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<script is:inline>
|
|
const btn = document.getElementById("menubtn");
|
|
const menu = document.getElementById("menu");
|
|
const closebtn = document.getElementById("menu-close")
|
|
|
|
btn.addEventListener('click', () => {
|
|
menu.dataset.shown = "true";
|
|
});
|
|
|
|
closebtn.addEventListener('click', () => {
|
|
menu.dataset.shown = "false";
|
|
})
|
|
</script> |