From 583aeacf37bc5fd86814dc21796ad893d295e9d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Thu, 13 Apr 2023 21:36:37 +0200
Subject: [PATCH] Add support for href and darkmode toggle

---
 .../components/BitinflowFirstLevelHref.vue    | 47 +++++++++++++++++++
 .../components/BitinflowFirstLevelMenu.vue    |  7 +++
 2 files changed, 54 insertions(+)
 create mode 100644 src/runtime/components/BitinflowFirstLevelHref.vue

diff --git a/src/runtime/components/BitinflowFirstLevelHref.vue b/src/runtime/components/BitinflowFirstLevelHref.vue
new file mode 100644
index 0000000..b3ec6ad
--- /dev/null
+++ b/src/runtime/components/BitinflowFirstLevelHref.vue
@@ -0,0 +1,47 @@
+<template>
+  <a
+    class="hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2"
+    :class="calculateClasses"
+    :href="href"
+  >
+    <i :class="['fal text-xl', icon]" />
+    <span>
+      <slot />
+    </span>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "BitinflowFirstLevelLink",
+  props: {
+    icon: {
+      type: String,
+      default: 'fa-arrow-up-right-from-square'
+    },
+    href: {
+      type: String,
+      default: '/'
+    }
+  },
+  computed: {
+    calculateClasses: function () {
+      return {
+        'router-link-active': document.location.href.includes(this.href) && this.href !== '/',
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.router-link-active {
+  @apply bg-primary-500 dark:bg-primary-500;
+}
+
+/*
+.router-link-active:hover {
+  @apply bg-primary-600 dark:bg-primary-400;
+}
+*/
+</style>
diff --git a/src/runtime/components/BitinflowFirstLevelMenu.vue b/src/runtime/components/BitinflowFirstLevelMenu.vue
index 92e2135..b88980e 100644
--- a/src/runtime/components/BitinflowFirstLevelMenu.vue
+++ b/src/runtime/components/BitinflowFirstLevelMenu.vue
@@ -122,6 +122,12 @@ export default {
   components: {
     Avatar
   },
+  props: {
+    darkMode: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       count: 0,
@@ -155,6 +161,7 @@ export default {
       this.$refs.sidebar.classList.add('-translate-x-full');
     },
     toggleDarkMode() {
+      if (!this.darkMode) return;
       this.count++;
       if (this.count % 4 === 0) {
         console.log('rotate');