Make navbar items into buttons

Instead of just icons.
This commit is contained in:
Foster Hangdaan 2024-09-11 17:03:39 -04:00
parent cf24851488
commit f72357651e
Signed by: foster
GPG key ID: E48D7F49A852F112
4 changed files with 106 additions and 87 deletions

View file

@ -1,51 +1,58 @@
export default function () { const items = [
const iconStyle = { {
filter: "var(--filter-green)", title: "Home",
}; path: "/",
icon: {
src:
"https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg",
alt: "home icon",
},
},
{
title: "Blog",
path: "/blog",
icon: {
src:
"https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/news.svg",
alt: "blog icon",
},
},
{
title: "Resume",
path: "/resume",
icon: {
src:
"https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/file-cv.svg",
alt: "resume icon",
},
},
{
title: "GPG Key",
path: "/gpg-key",
icon: {
src:
"https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/key.svg",
alt: "key icon",
},
},
];
export default function Navbar() {
return ( return (
<nav className="navbar"> <nav className="navbar">
<ul className="navbar-list"> <ul className="navbar-list">
<li className="navbar-list-item home"> {items.map((item) => (
<a href="/" title="Home"> <li>
<img <a href={item.path} className="button">
src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg" <img
className="icon" alt={item.icon.alt}
style={iconStyle} className="icon"
alt="home" src={item.icon.src}
/> />
</a> <div>{item.title}</div>
</li> </a>
<li className="navbar-list-item"> </li>
<a href="/blog/" title="Blog"> ))}
<img
src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/news.svg"
className="icon"
style={iconStyle}
alt="blog"
/>
</a>
</li>
<li className="navbar-list-item">
<a href="/resume/" title="Resume">
<img
src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/file-cv.svg"
className="icon"
style={iconStyle}
alt="resume"
/>
</a>
</li>
<li className="navbar-list-item">
<a href="/gpg-key/" title="GPG Key">
<img
src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/key.svg"
className="icon"
style={iconStyle}
alt="gpg key"
/>
</a>
</li>
</ul> </ul>
</nav> </nav>
); );

View file

@ -345,3 +345,27 @@ kbd {
background-color: var(--color-bg--layer-01); background-color: var(--color-bg--layer-01);
border: 1px solid var(--color-black); border: 1px solid var(--color-black);
} }
.button {
align-items: center;
border-radius: 10px;
color: var(--color-green);
display: flex;
gap: 0.25em;
justify-items: center;
padding: 0.5em;
border: 1px solid var(--color-green);
img.icon {
font-size: 1.25em;
filter: var(--filter-green);
}
&:hover {
background-color: var(--color-green);
color: var(--color-bg);
img.icon {
filter: var(--filter-bg);
}
}
}

View file

@ -4,45 +4,26 @@ .navbar {
margin: 0 auto; margin: 0 auto;
max-width: var(--page--max-width); max-width: var(--page--max-width);
padding: 1rem; padding: 1rem;
}
.navbar-list { .navbar-list {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
gap: 1rem; align-items: center;
list-style: none; gap: 1rem;
padding-left: 0; list-style: none;
padding-right: 1rem; padding-left: 0;
} padding-right: 1rem;
.navbar-list-item { li {
margin: 0; margin: 0;
font-size: 2rem; a {
&.home { text-decoration: none;
margin-right: auto; }
} @media (min-width: $bp-sm) {
a { &:first-child {
text-decoration: none; margin-right: auto;
} }
} }
}
.navbar-actions {
display: flex;
align-items: center;
border-left: 1px solid var(--color-black);
padding-left: 1rem;
}
button.navbar-theme-switcher {
background-color: transparent;
border-radius: 2px;
border: 1px solid var(--color-white);
padding: 0.5em;
cursor: pointer;
color: var(--color-white);
&:hover {
color: var(--color-green);
border-color: var(--color-green);
} }
} }

View file

@ -1,10 +1,17 @@
/* Breakpoints */
$bp-sm: 640px;
$bp-md: 768px;
$bp-lg: 1024px;
$bp-xl: 1280px;
$bp-2xl: 1536px;
:root { :root {
/* Breakpoints */ /* Breakpoints */
--bp-sm: 640px; --bp-sm: $bp-sm;
--bp-md: 768px; --bp-md: $bp-md;
--bp-lg: 1024px; --bp-lg: $bp-lg;
--bp-xl: 1280px; --bp-xl: $bp-xl;
--bp-2xl: 1536px; --bp-2xl: $bp-2xl;
/* Text */ /* Text */
--text-xs: 0.75rem; --text-xs: 0.75rem;