caperren/caperren-com
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Playing around with options for base structure and navigation

Browse Source
This commit is contained in:
Corwin Perren
2025-07-03 23:50:20 -07:00
parent 65e05066ea
commit d515e581b5
26 changed files with 1075 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/Navbar.astro Normal file
View File

@@ -0,0 +1,148 @@
---
import {Image} from 'astro:assets';
import {Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems} from "astro-navbar";
import logoTitle from "../assets/logo-title.svg";
const navItems = [
{name: 'Home', href: '/'},
{
name: 'Experience↓',
href: "#",
dropdown: [
{name: 'SpaceX - Hardware Test Engineer II', href: '/experience/spacex-hardware-test-engineer'},
{
name: 'SpaceX - Avionics Test Engineer (Intern)',
href: '/experience/spacex-avionics-test-engineer-intern'
},
{name: 'SARL - Automation Engineer (Student)', href: '/experience/sarl-automation-engineer-student'},
{
name: 'CEOAS OMG - Software/Electronics Engineer (Student)',
href: '/experience/ceoas-omg-software-electronics-engineer-student'
},
{
name: 'OSURC - Member/Officer/Sub-Team Lead (Student)',
href: '/experience/osurc-member-officer-sub-team-lead'
},
]
},
{name: 'Projects↓', href: '/project/project'},
{name: 'Hobbies↓', href: '/hobby/hobby'},
{name: 'Resume', href: '/resume'},
{name: 'Contact', href: '/contact'}
];
---
<header class="navbar lg:flex p-5 gap-5">
<Astronav>
<div class="flex w-full justify-between">
<Image src={logoTitle} alt="Logo Title" height="50" loading="eager"/>
<div class="block lg:hidden">
<MenuIcon class="w-4 h-4 text-gray-800"/>
</div>
</div>
<MenuItems class="hidden lg:flex">
<ul class="flex flex-col lg:flex-row lg:gap-5">
<li>
<a href="/">Home</a>
</li>
<li>
<Dropdown class="group">
<button class="flex items-center">
<span> Experience </span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
stroke="currentColor"
class="w-3 h-3 mt-0.5 group-open:rotate-180">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<DropdownItems class="relative">
<div class="bg-black px-1 py-2 absolute top-0">
<ul>
<li>
<a class="whitespace-nowrap" href="#">SpaceX</a>
</li>
<li>
<a class="whitespace-nowrap" href="#">Sinnhuber Aquatic Research Laboratory</a>
</li>
<li>
<a class="whitespace-nowrap" href="#">CEOAS Ocean Mixing Group</a>
</li>
</ul>
</div>
</DropdownItems>
</Dropdown>
</li>
<li>
<Dropdown class="group">
<button class="flex items-center">
<span> Projects </span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
stroke="currentColor"
class="w-3 h-3 mt-0.5 group-open:rotate-180">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<DropdownItems class="relative">
<div class="bg-black absolute top-0">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</DropdownItems>
</Dropdown>
</li>
<li>
<Dropdown class="group">
<button class="flex items-center">
<span> Hobbies </span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
stroke="currentColor"
class="w-3 h-3 mt-0.5 group-open:rotate-180">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<DropdownItems class="relative">
<div class="bg-black absolute top-0">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</DropdownItems>
</Dropdown>
</li>
<li>
<a href="/">Resume</a>
</li>
<li>
<a href="/">Contact</a>
</li>
</ul>
</MenuItems>
</Astronav>
</header>