From 31957812475170dcf0c9ea5cd43998d0ad5635aa Mon Sep 17 00:00:00 2001
From: Heli-o <vasikmares@gmail.com>
Date: Sun, 7 Apr 2024 14:12:40 +0200
Subject: [PATCH] added homebar

---
 quartz.layout.ts              |  4 +++-
 quartz/components/Homebar.tsx | 38 +++++++++++++++++++++++++++++++++++
 quartz/components/index.ts    |  2 ++
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 quartz/components/Homebar.tsx

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 9a7a563..bd650a9 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -4,7 +4,9 @@ import * as Component from "./quartz/components"
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
-  header: [],
+  header: [
+    Component.Homebar(),
+  ],
   footer: Component.Footer({
     links: {
       "Main social profile": "https://derg.social/@ulysia",
diff --git a/quartz/components/Homebar.tsx b/quartz/components/Homebar.tsx
new file mode 100644
index 0000000..d130ac6
--- /dev/null
+++ b/quartz/components/Homebar.tsx
@@ -0,0 +1,38 @@
+import { pathToRoot } from "../util/path"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
+
+const Homebar: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
+  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
+  const baseDir = pathToRoot(fileData.slug!)
+  return (
+    <div class={classNames(displayClass, "homebar")}>
+        <a href="/index">Home</a>
+        <a href="Characters">Characters</a>
+        <a href="Links">Where you can find me</a>
+        <a href="Projects">Projects</a>
+        <a href="Articles">Articles</a>
+    </div>
+  )
+}
+
+Homebar.css = `
+.homebar {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+}
+.homebar > * {
+    border-radius: 25%;
+    background-color: rgba(100,100,100, 0.3);
+    padding: 0.2rem 0.4rem;
+    margin: 0.2rem 0.4rem;
+    text-decoration: none;
+}
+.homebar > *:hover {
+    background-color: rgba(100,100,100, 0.5);
+}
+`
+
+export default (() => Homebar) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index c3825d8..111ce9b 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import PageImage from "./PageImage"
+import Homebar from "./Homebar"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   PageImage,
+  Homebar,
 }