barrettruth.com/src/components/Header.astro
2025-10-09 15:14:59 -04:00

57 lines
1.4 KiB
Text

---
const path = Astro.url.pathname;
const is404 = path === "/404.html" || path === "/404";
function deriveTopic() {
if (is404) return "/not-found";
if (path.startsWith("/about")) return "/about";
if (path === "/gist" || path.startsWith("/gist/")) return "/gist";
if (path === "/git" || path.startsWith("/git/")) return "/git";
return "";
}
const topic = deriveTopic();
const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
---
<header>
<a href="/" class="home-link" style="text-decoration: none; color: inherit">
<div class="terminal-container">
<span class="terminal-prompt">{promptText}</span>
<span class="terminal-cursor"></span>
</div>
</a>
<div class="header-links">
<a href="/resume.pdf" data-topic="resume" target="_blank">resume</a>
<a href="/transcript.pdf" data-topic="transcript" target="_blank"
>transcript</a
>
<a href="/about.html" data-topic="about">about</a>
</div>
</header>
<style>
.header-links a {
margin-left: 25px;
text-decoration: none;
cursor: pointer;
}
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: flex-start;
}
.header-links {
align-self: flex-end;
display: flex;
flex-direction: column;
text-align: right;
gap: 5px;
}
.header-links a {
margin-left: 0;
}
}
</style>
<script type="module" src="/scripts/index.js"></script>