-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add NavLink component to simplify links in headers/footers (#10)
- Taking the base URL into account when checking whether the current page is the same as one of the nav links is handled inside NavLink.astro. - You can pass in a class prop to apply to the NavLink anchor. - Add NavDropdown component to simplify the creation and styling of the header dropdown menus. - Add header and footer tags inside the components. - Fix the TypeScript errors. - Adjust some of the styles to work with Pico v2.
- Loading branch information
1 parent
f16151a
commit 3d1cd50
Showing
9 changed files
with
173 additions
and
147 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,78 +1,50 @@ | ||
--- | ||
import NavLink from "./NavLink.astro"; | ||
import NavDropdown from "./NavDropdown.astro"; | ||
const routes = [ | ||
{ label: "Wiki", page: "wiki" }, | ||
{ label: "Get Started", page: "getting-started" }, | ||
{ label: "Events", page: "events" }, | ||
{ label: "Projects", page: "projects" }, | ||
{ label: "Blog", page: "blog" }, | ||
{ label: "Donate", page: "donate" }, | ||
{ label: "Get Started", page: "getting-started" }, | ||
{ label: "Events", page: "events" }, | ||
{ label: "Projects", page: "projects" }, | ||
{ label: "Blog", page: "blog" }, | ||
{ label: "Donate", page: "donate" }, | ||
{ label: "About", page: "about", | ||
pages: [ | ||
{ label: "Code of Conduct", page: "about/code-of-conduct" } | ||
] | ||
} | ||
pages: [ | ||
{ label: "Code of Conduct", page: "about/code-of-conduct" } | ||
] | ||
} | ||
]; | ||
// because of annoying differences between dev and build modes, due to this | ||
// behavior (https://github.com/withastro/astro/issues/5630), always remove | ||
// any trailing slash so currentPage can match the pages above | ||
const fullPath = Astro.url.pathname.replace(/\/$/, ""); | ||
const currentPage = fullPath.slice(fullPath.lastIndexOf("/") + 1); | ||
--- | ||
|
||
<nav class="container"> | ||
<ul> | ||
<li> | ||
<a href="./" class="contrast"> | ||
<strong>SF Civic Tech</strong> | ||
</a> | ||
</li> | ||
</ul> | ||
<ul> | ||
{routes.map(route => ( | ||
<li class={`nav-item ${!!route.pages?.length ? "dropdown" : ""}`}> | ||
<a href={route.page} aria-current={currentPage === route.page ? "page" : false}>{route.label}</a> | ||
{!!route.pages?.length && | ||
<div class="dropdown-content"> | ||
{route.pages.map(page => ( | ||
<a href={page.page} aria-current={currentPage === page.page ? "page" : false}>{page.label}</a> | ||
))} | ||
</div> | ||
} | ||
</li> | ||
))} | ||
</ul> | ||
</nav> | ||
<header class="container"> | ||
<nav> | ||
<ul> | ||
<li> | ||
{/* the href of "" on the homepage link here looks a little weird, but the base | ||
path is prefixed to these links, so basePath + "" == the root page */} | ||
<NavLink href="" class="contrast"> | ||
<strong>SF Civic Tech</strong> | ||
</NavLink> | ||
</li> | ||
</ul> | ||
<ul> | ||
{routes.map(({ label, page, pages }) => ( | ||
<li> | ||
<NavLink href={page}> | ||
{label} | ||
</NavLink> | ||
{!!pages?.length && | ||
<NavDropdown items={pages} /> | ||
} | ||
</li> | ||
))} | ||
</ul> | ||
</nav> | ||
</header> | ||
|
||
<style> | ||
a[aria-current] { | ||
--color: var(--contrast); | ||
cursor: default; | ||
pointer-events: none; | ||
header { | ||
padding: 0; | ||
} | ||
|
||
.dropdown { | ||
position: relative; | ||
display: inline-block; | ||
} | ||
|
||
.dropdown-content { | ||
display: none; | ||
position: absolute; | ||
background-color: #f9f9f9; | ||
min-width: 160px; | ||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
z-index: 1; | ||
} | ||
|
||
.dropdown-content a { | ||
color: black; | ||
padding: 12px 16px; | ||
text-decoration: none; | ||
display: block; | ||
} | ||
|
||
.dropdown:hover .dropdown-content { | ||
display: block; | ||
} | ||
|
||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
--- | ||
import NavLink from "./NavLink.astro"; | ||
interface Props { | ||
items: { label: string; page: string }[]; | ||
} | ||
const { items } = Astro.props; | ||
--- | ||
|
||
<div class="dropdown-content"> | ||
{items.map(({ label, page }) => ( | ||
<NavLink href={page}> | ||
{label} | ||
</NavLink> | ||
))} | ||
</div> | ||
|
||
<style> | ||
.dropdown-content { | ||
display: none; | ||
position: absolute; | ||
background-color: #f9f9f9; | ||
white-space: nowrap; | ||
padding: .5rem 1rem; | ||
right: 0; | ||
top: 80%; | ||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); | ||
z-index: 1; | ||
} | ||
|
||
/* set global styles on li's inside a nav, since we can't target their scoped | ||
styles from here */ | ||
:global(nav li) { | ||
position: relative; | ||
} | ||
|
||
:global(nav li):hover > .dropdown-content { | ||
display: block; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
--- | ||
interface Props { | ||
href: string; | ||
class?: string; | ||
} | ||
// we can destructure `class` from props, but we have to rename it so it won't | ||
// trigger syntax errors in the JS | ||
const { href, class: className } = Astro.props; | ||
// remove the base URL from the beginning of the current page so we can match | ||
// it against the href prop, which shouldn't include any base URL. because of | ||
// annoying differences between dev and build modes, due to this behavior | ||
// (https://github.com/withastro/astro/issues/5630), we also have to remove | ||
// any trailing slash so currentPage can match the href. | ||
const currentPage = Astro.url.pathname | ||
.replace(import.meta.env.BASE_URL, "") | ||
.replace(/\/$/, ""); | ||
const ariaCurrent = currentPage === href ? "page" : false; | ||
--- | ||
|
||
<a href={href} class={className} aria-current={ariaCurrent}> | ||
<slot /> | ||
</a> | ||
|
||
<style> | ||
a[aria-current] { | ||
--pico-color: var(--pico-contrast); | ||
cursor: default; | ||
pointer-events: none; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.