Skip to content

Commit acc67b3

Browse files
briansunterbriansunter
authored
Merge pull request #30 from briansunter/navbar
Navbar
2 parents 782dd91 + 3435566 commit acc67b3

File tree

10 files changed

+201
-158
lines changed

10 files changed

+201
-158
lines changed

‎package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"date-fns": "^3.5.0"
4+
}
5+
}

‎site/package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@astrojs/rss": "^4.0.5",
1616
"@astrojs/tailwind": "^5.1.0",
1717
"astro": "^4.4.15",
18+
"astro-navbar": "^2.3.1",
1819
"node-persist": "^4.0.1",
1920
"playwright": "^1.42.1",
2021
"react-tweet": "^3.2.0",

‎site/src/components/Header.astro

Lines changed: 32 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,36 @@
11
---
2-
import { SITE_TITLE } from '../consts';
2+
import { StickyHeader, Astronav, MenuItems, MenuIcon } from "astro-navbar";
3+
import { SITE_TITLE, NEWSLETTER_LINK } from "../consts";
4+
35
---
46

5-
<header>
6-
<nav class="mt-6">
7-
<h2 class="underline md:text-5xl font-bold"><a href="/">{SITE_TITLE}</a></h2>
8-
<div class="underline internal-links hidden md:block">
9-
<!-- <HeaderLink href="/">Home</HeaderLink> -->
10-
<!-- <HeaderLink href="/blog">Pages</HeaderLink> -->
11-
<!-- <HeaderLink href="https://newsletter.briansunter.com">Subscribe</HeaderLink> -->
12-
</div>
13-
<!-- <div class="social-links">
14-
<a href="https://m.webtoo.ls/@astro" target="_blank">
15-
<span class="sr-only">Follow Astro on Mastodon</span>
16-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
17-
><path
18-
fill="currentColor"
19-
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
20-
></path></svg
21-
>
22-
</a>
23-
<a href="https://twitter.com/astrodotbuild" target="_blank">
24-
<span class="sr-only">Follow Astro on Twitter</span>
25-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
26-
><path
27-
fill="currentColor"
28-
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
29-
></path></svg
30-
>
31-
</a>
32-
<a href="https://github.com/withastro/astro" target="_blank">
33-
<span class="sr-only">Go to Astro's GitHub repo</span>
34-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
35-
><path
36-
fill="currentColor"
37-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
38-
></path></svg
39-
>
40-
</a>
41-
</div> -->
42-
</nav>
7+
<header class="sticky">
8+
<StickyHeader
9+
class="sticky top-0 border-b z-20 transition-all"
10+
scrollY={50}
11+
defaultClass="py-2 border-transparent backdrop-blur-lg"
12+
activeClass="py-2 bg-white/90 border-gray-200 backdrop-blur-lg text-gray-900"
13+
>
14+
<Astronav>
15+
<div class="flex justify-between items-center px-4">
16+
<span class="underline md:text-2xl font-bold">
17+
<a class="m-0 text-gray-900 hover:text-gray-300" href="/"
18+
>{SITE_TITLE}</a
19+
>
20+
</span>
21+
<MenuIcon class="w-12 h-12 hover:text-gray-300" />
22+
</div>
23+
<MenuItems class="hidden md:flex">
24+
<ul class="flex flex-col">
25+
<li class="ml-4"><a class="hover:text-gray-300" href="/">Home</a></li>
26+
<li class="ml-4">
27+
<a class="hover:text-gray-300" href="/pages">All Pages</a>
28+
</li>
29+
<li class="ml-4">
30+
<a class="hover:text-gray-300" href={NEWSLETTER_LINK}>Newsletter</a>
31+
</li>
32+
</ul>
33+
</MenuItems>
34+
</Astronav>
35+
</StickyHeader>
4336
</header>
44-
<style>
45-
header {
46-
margin: 0;
47-
padding: 0 1em;
48-
/* background: white; */
49-
/* box-shadow: 0 2px 8px rgba(var(--black), 5%); */
50-
}
51-
h2 {
52-
margin: 0;
53-
}
54-
55-
h2 a,
56-
h2 a.active {
57-
text-decoration: none;
58-
}
59-
nav {
60-
display: flex;
61-
align-items: center;
62-
justify-content: space-between;
63-
}
64-
nav a {
65-
color: var(--black);
66-
border-bottom: 4px solid transparent;
67-
text-decoration: none;
68-
}
69-
nav a.active {
70-
text-decoration: none;
71-
border-bottom-color: var(--accent);
72-
}
73-
.social-links,
74-
.social-links a {
75-
display: flex;
76-
}
77-
@media (max-width: 720px) {
78-
.social-links {
79-
display: none;
80-
}
81-
}
82-
</style>

‎site/src/components/Header.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.sticky-header {
2+
position: sticky;
3+
top: 0;
4+
border-bottom: 1px solid;
5+
transition: all 0.3s ease;
6+
}
7+
8+
.sticky-header.active {
9+
padding: 0.5rem 0;
10+
background-color: rgba(255, 255, 255, 0.8);
11+
border-color: #ccc;
12+
backdrop-filter: blur(10px);
13+
}
14+
15+
.sticky-header .menu-icon {
16+
width: 3rem;
17+
height: 3rem;
18+
color: #333;
19+
}
20+
21+
.sticky-header .menu-items {
22+
display: none;
23+
}
24+
25+
.sticky-header .menu-items.active {
26+
display: flex;
27+
}
28+
29+
.sticky-header .menu-items ul {
30+
display: flex;
31+
gap: 1rem;
32+
}
33+
34+
.sticky-header .menu-items a {
35+
color: #333;
36+
text-decoration: none;
37+
}
38+
39+
.sticky-header .menu-items a:hover {
40+
color: #777;
41+
}

‎site/src/components/about/AboutSection.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
import avatar from '../../static//avatar.jpg';
2+
import avatar from '../../static/avatar.jpg';
33
import {Content as AboutMe, frontmatter as aboutMeData } from './about-me.md';
44
import { Image } from 'astro:assets';
55
66
---
77

88
<div class="items-center">
9-
<div class="md:hidden">
9+
<div class="sm:block">
1010
<div class="flex flex-col flex-grow ml-4 sm:ml-8 md:ml-12 lg:ml-16 justify-center">
1111
<div class="flex flex-row mb-4">
1212
<Image src={avatar} alt="Profile Image" class="w-24 h-24 sm:w-32 sm:h-32 md:w-48 md:h-48 lg:w-64 lg:h-64 rounded-full mr-4" />

‎site/src/consts.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@
33

44
export const SITE_TITLE = 'Brian Sunter';
55
export const SITE_DESCRIPTION = 'Welcome to my website!';
6+
7+
export const NEWSLETTER_LINK = 'https://newsletter.briansunter.com';

0 commit comments

Comments
 (0)