ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-08 02:33:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplified header

Browse Source
This commit is contained in:
Oliver Bryan
2025-09-29 20:42:14 +01:00
parent d0f5b73f9f
commit 8dbfc25719
1 changed files with 25 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Header.astro
View File

@@ -1,7 +1,4 @@
--- ---
import NavLink from "./NavLink.astro";
import { Icon } from "astro-icon/components";
const { currentPage } = Astro.props; const { currentPage } = Astro.props;
const pages = [ const pages = [
@@ -24,51 +21,32 @@ const pages = [
.cancel-button:hover .text { .cancel-button:hover .text {
color: var(--ayu-red-500); color: var(--ayu-red-500);
} }
.github-icon-link {
color: var(--ayu-accent);
transition: color 0.2s ease;
}
.github-icon-link:hover {
color: var(--ayu-red-500);
}
</style> </style>
<header> <header>
<div <div
class="w-full flex items-center justify-between px-4 py-2 border-b-1 border-ayu-gutter" class="w-full flex items-center justify-between px-4 py-2 border-b-1 border-ayu-gutter"
> >
<div class="flex items-center gap-3"> <div class="flex items-center">
<img src="/favicon.svg" alt="oliver bryan icon" class="h-6 w-6" /> <a href="/" class="flex items-center gap-2">
<h1 class="text-2xl text-ayu-red-500">oliver bryan</h1> <img
</div> src="/favicon.svg"
</div> alt="oliver bryan icon"
<div class="h-6 w-6"
class="w-full flex justify-between items-center p-2 border-b-1 border-ayu-gutter"
>
<div class="flex gap-4 px-2">
{
pages.map((page) => (
<NavLink
currentPage={currentPage}
title={page.title}
href={page.path}
/> />
)) <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1></a
} >
{ {
!pages.find((page) => page.path === currentPage.path) && ( !pages.find((page) => page.path === currentPage.path) && (
<span class="flex items-center justify-start gap-4 text-ayu-gutter"> <span class="flex items-center justify-start ml-4 text-ayu-gutter text-md">
{"|"} {"|"}
<button <button
class="cancel-button flex items-center justify-center gap-2" class="cancel-button flex items-center justify-center gap-2 ml-4"
type="button" type="button"
onclick="window.location.href='/'" onclick="window.location.href='/'"
> >
<span class="text-sm text">{currentPage.path} </span> <span class="text">{currentPage.path} </span>
<span class="text-xl leading-none text-ayu-red-500"> <span class="text-2xl leading-none text-ayu-red-500">
&times; &times;
</span> </span>
</button> </button>
@@ -76,15 +54,5 @@ const pages = [
) )
} }
</div> </div>
<a
href="https://github.com/hex248"
target="_blank"
rel="noopener noreferrer"
class="github-icon-link flex items-center gap-2"
title="GitHub Profile"
>
<Icon name="mdi:github" class="w-6 h-6" />
hex248
</a>
</div> </div>
</header> </header>