Feature: Horizontal navbar (#56)

* Initial Commit

Copied component from [notkesto-site](https://github.com/camargomau/notkesto-site). Replaced links in `LinksHeader.tsx` and made all `img src=` entries empty.

* Fix: correct link destinations

Added hyphens to `<a>` link destinations containing spaces

* Update: add icons, trim CSS, trim link titles

- Mobile breakpoint removed as redundant - the links utilise flexbox
- Trimmed link titles:
   - 'Modding Tools' shortened to 'Tools'
   - Removed 'Projects' as that wiki section lacks content and its use-case is dubious

* Update: implement mobile version of navbar

- navbar uses `overflow: scroll` on mobile

Also removed `<hr>` element below navbar to make appearance cleaner

* Update: Highlight background of links on-hover

- Removed flex and replaced with inline-block.
- Placed `<svg>` link icons inside the `<a>` elements so they are part of the link
- Hovering over the links highlights the background
- Trimmed CSS further

Author: MasssiveJuice08

quartz.layout.ts

@@ -4,7 +4,7 @@ import * as Component from "./quartz/components"
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
-  header: [],
+  header: [Component.LinksHeader()],
   footer: Component.Footer({
     links: {
       GitHub: "https://github.com/morrowind-modding/wiki",

quartz/components/LinksHeader.tsx

@@ -0,0 +1,40 @@
+import { QuartzComponentConstructor } from "./types"
+import style from "./styles/linksHeader.scss"
+
+interface Options {
+  links: Record<string, string>
+}
+
+export default (() => {
+  function LinksHeader() {
+    return (
+      <div>
+        <div id="links-header">        
+            <a href="/Guides/">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-check"><path d="M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4Z"/><path d="m16 12 2 2 4-4"/><path d="M22 6V3h-6c-2.2 0-4 1.8-4 4v14c0-1.7 1.3-3 3-3h7v-2.3"/></svg>
+            Guides</a>    
+            <a href="/Modding-Tools/">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
+            Tools</a>     
+            <a href="/TES3-Construction-Set/">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil-ruler"><path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"/><path d="m8 6 2-2"/><path d="m18 16 2-2"/><path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
+            Construction Set</a>
+            <a href="/Programmers-Reference/">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-json"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"/><path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"/></svg>
+            Programmers Reference</a>
+          {/* <div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
+            <a href="/Projects/">Projects</a>
+          </div> */}
+          {/* commented out 'Projects' as it has no content and its use-case is still dubious */}
+            <a href="/MMW-Design--and--Planning/">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-alert"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
+            Contributing</a>
+        </div>
+      </div>
+    )
+  }
+
+  LinksHeader.css = style
+  return LinksHeader
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 
 import Comments from "./Comments"
+import LinksHeader from "./LinksHeader"
 
 export {
   ArticleTitle,
@@ -45,4 +46,5 @@ export {
   RecentNotes,
   NotFound,
   Breadcrumbs,
+  LinksHeader,
 }

quartz/components/styles/linksHeader.scss

@@ -0,0 +1,36 @@
+@use "../../styles/variables.scss" as *;
+
+header {
+  display: block;
+  margin-top: 1rem;
+}
+
+#links-header {
+  font-size: 1.2em;
+  margin: 0 0.2em;
+
+  svg {
+    height: 1em;
+    margin: 0 0.3em 0 0;
+    vertical-align: middle;
+    color: var(--dark);
+  }
+
+  a {
+    display: inline-block;
+    color: var(--dark);
+    padding: 10px 15px;
+    background-color: #8f9fa926;
+  }  
+  
+  a:hover{
+      background-color: #8f9fa93d;
+  }
+}
+
+@media screen and (max-width: $mobileBreakpoint) {
+  #links-header {
+    overflow: scroll;
+    white-space: nowrap;
+  }
+}