foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Make navbar items into buttons

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/_components/navbar.tsx
View file

@ -1,51 +1,58 @@
export default function () {
const iconStyle = {
filter: "var(--filter-green)",
};
const items = [
{
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 (
<nav className="navbar">
<ul className="navbar-list">
<li className="navbar-list-item home">
<a href="/" title="Home">
<img
src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg"
className="icon"
style={iconStyle}
alt="home"
/>
</a>
</li>
<li className="navbar-list-item">
<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>
{items.map((item) => (
<li>
<a href={item.path} className="button">
<img
alt={item.icon.alt}
className="icon"
src={item.icon.src}
/>
<div>{item.title}</div>
</a>
</li>
))}
</ul>
</nav>
);

24
src/_includes/styles/base.scss
View file

@ -345,3 +345,27 @@ kbd {
background-color: var(--color-bg--layer-01);
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);
}
}
}

57
src/_includes/styles/components/navbar.scss
View file

@ -4,45 +4,26 @@ .navbar {
margin: 0 auto;
max-width: var(--page--max-width);
padding: 1rem;
}
.navbar-list {
display: flex;
align-items: center;
gap: 1rem;
list-style: none;
padding-left: 0;
padding-right: 1rem;
}
.navbar-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
list-style: none;
padding-left: 0;
padding-right: 1rem;
.navbar-list-item {
margin: 0;
font-size: 2rem;
&.home {
margin-right: auto;
}
a {
text-decoration: none;
}
}
.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);
li {
margin: 0;
a {
text-decoration: none;
}
@media (min-width: $bp-sm) {
&:first-child {
margin-right: auto;
}
}
}
}
}

17
src/_includes/styles/variables.scss
View file

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