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

Add initial version of navbar

Browse source
This commit is contained in:
Foster Hangdaan 2023-07-26 09:50:04 -04:00
parent fe9ffbfa84
commit 5b111bb9ce
Signed by: foster
GPG key ID: E48D7F49A852F112
4 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
_components/navbar.tsx Normal file
View file

@ -0,0 +1,17 @@
export default function() {
return (
<nav className="navbar">
<ul className="navbar-list">
<li className="navbar-list-item home">
<a href="/"></a>
</li>
<li className="navbar-list-item">
<a href="/resume" title="resume">󰈙</a>
</li>
</ul>
<div className="navbar-actions">
<button className="navbar-theme-switcher"></button>
</div>
</nav>
);
}

3
_includes/layouts/main.tsx
View file

@ -1,4 +1,4 @@
export default function({ title, children }) { export default function({ title, children, comp }) {
return ( return (
<html> <html>
<head> <head>
@ -8,6 +8,7 @@ export default function({ title, children }) {
<link rel="stylesheet" href="/styles/main.css"/> <link rel="stylesheet" href="/styles/main.css"/>
</head> </head>
<body> <body>
{comp.navbar()}
<div className="main-content"> <div className="main-content">
{ children } { children }
</div> </div>

39
_includes/styles/components/navbar.scss Normal file
View file

@ -0,0 +1,39 @@
.navbar {
display: grid;
grid-template-columns: 1fr auto;
margin: 0 auto;
max-width: 48rem;
padding: 1rem;
}
.navbar-list {
display: flex;
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 {
color: var(--color-green);
text-decoration: none;
}
}
.navbar-actions {
display: flex;
align-items: center;
border-left: 1px solid var(--color-black);
padding-left: 1rem;
}
button.navbar-theme-switcher {
padding: 0.3em;
}

3
styles/main.scss
View file

@ -3,3 +3,6 @@
@import "styles/variables"; @import "styles/variables";
@import "styles/color-palette"; @import "styles/color-palette";
@import "styles/base"; @import "styles/base";
// Components
@import "styles/components/navbar";