Add Navbar

PancakesWeb/Components/Layout/MainLayout.razor

@@ -1,7 +1,12 @@
-@inherits LayoutComponentBase
+@using PancakesWeb.Components.UI
+@inherits LayoutComponentBase
 
 <a class="skip-to-content" href="#main-content">Skip to main content</a>
 
+<header>
+    <Navbar/>
+</header>
+
 @Body
 
 <div id="blazor-error-ui" data-nosnippet>

PancakesWeb/Components/UI/Navbar.razor

@@ -0,0 +1,23 @@
+@using PancakesWeb.Data
+
+<nav class="container">
+    <ul class="nav-content">
+        <li class="nav-item brand">
+            <a class="nav-link" href="/">
+                <img class="nav-img" src="@Assets["icon.webp"]" alt="">
+                <span class="nav-label">pancakes</span>
+            </a>
+        </li>
+
+        @foreach (var link in Links.Accounts.Where(p => p is { Href: not null, HomePageOnly: false }))
+        {
+            <li class="nav-item">
+                <a class="nav-link can-hide-label" href="@link.Href">
+                    <img class="@(link.IconInvert ? "nav-img invert-icon" : "nav-img")"
+                         src="@Assets[$"imgs/icons/{link.Icon}"]" alt="@link.Name icon" aria-hidden="true">
+                    <span class="nav-label">@link.Name</span>
+                </a>
+            </li>
+        }
+    </ul>
+</nav>

PancakesWeb/Components/UI/Navbar.razor.css

@@ -0,0 +1,63 @@
+.nav-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+    gap: 1rem;
+
+    margin: 0 0 2rem;
+    padding: 1rem;
+
+    list-style: none;
+}
+
+.nav-item {
+    display: inline-flex;
+    align-items: center;
+}
+
+.brand {
+    margin-right: auto;
+}
+
+.brand .nav-img {
+    height: 2em;
+
+    border-radius: var(--radius);
+}
+
+.nav-link {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+
+    text-decoration-line: none;
+}
+
+.nav-link:hover {
+    text-decoration-line: underline;
+}
+
+.nav-img {
+    aspect-ratio: 1;
+    height: 1.5em;
+    object-fit: contain;
+}
+
+.nav-img.invert-icon {
+    filter: invert() hue-rotate(180deg);
+}
+
+@media screen and (max-width: 768px) {
+    /* Hide labels while still being accessible by screen readers */
+    .nav-link.can-hide-label {
+        gap: 0;
+    }
+
+    .can-hide-label .nav-label {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+    }
+}

PancakesWeb/wwwroot/style.css

@@ -30,6 +30,7 @@
     --font-mono: monospace;
 
     /* Layout variables */
+    --container-width: 768px;
     --radius: 0.5rem;
 
     font-family: var(--font-main), sans-serif;
@@ -49,4 +50,18 @@ body {
     color-scheme: light dark;
     background-color: var(--background);
     color: var(--text);
+}
+
+a {
+    color: var(--accent);
+}
+
+a:visited {
+    color: var(--accent);
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--container-width);
 }