Updated HeaderBar.vue to composition api & typescript.

frontend/src/components/header/Action.vue

@@ -10,14 +10,14 @@
 import { useLayoutStore } from "@/stores/layout";
 
 defineProps<{
-  icon: any;
-  label: any;
-  counter: any;
-  show: any;
+  icon?: string;
+  label?: any;
+  counter?: any;
+  show?: any;
 }>();
 
 const emit = defineEmits<{
-  (e: "action"): void;
+  (e: "action"): any;
 }>();
 
 const layoutStore = useLayoutStore();

frontend/src/components/header/HeaderBar.vue

@@ -1,58 +1,56 @@
 <template>
   <header>
     <img v-if="showLogo !== undefined" :src="logoURL" />
-    <action
+    <Action
       v-if="showMenu !== undefined"
       class="menu-button"
       icon="menu"
-      :label="$t('buttons.toggleSidebar')"
-      @action="showHover('sidebar')"
+      :label="t('buttons.toggleSidebar')"
+      @action="layoutStore.showHover('sidebar')"
     />
 
     <slot />
 
-    <div id="dropdown" :class="{ active: this.show === 'more' }">
+    <div id="dropdown" :class="{ active: layoutStore.show === 'more' }">
       <slot name="actions" />
     </div>
 
-    <action
-      v-if="this.$slots.actions"
+    <Action
+      v-if="ifActionsSlot"
       id="more"
       icon="more_vert"
-      :label="$t('buttons.more')"
-      @action="showHover('more')"
+      :label="t('buttons.more')"
+      @action="layoutStore.showHover('more')"
     />
 
-    <div class="overlay" v-show="this.show == 'more'" @click="closeHovers" />
+    <div
+      class="overlay"
+      v-show="layoutStore.show == 'more'"
+      @click="layoutStore.closeHovers"
+    />
   </header>
 </template>
 
-<script>
-import { mapActions, mapState } from "pinia";
+<script setup lang="ts">
 import { useLayoutStore } from "@/stores/layout";
 
 import { logoURL } from "@/utils/constants";
 
 import Action from "@/components/header/Action.vue";
+import { computed, useSlots } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
-  name: "header-bar",
-  props: ["showLogo", "showMenu"],
-  components: {
-    Action,
-  },
-  data: function () {
-    return {
-      logoURL,
-    };
-  },
-  computed: {
-    ...mapState(useLayoutStore, ["show"]),
-  },
-  methods: {
-    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
-  },
-};
+defineProps<{
+  showLogo: boolean;
+  showMenu: boolean;
+}>();
+
+const layoutStore = useLayoutStore();
+const slots = useSlots();
+
+const { t } = useI18n();
+
+const ifActionsSlot = computed(() => (slots.actions ? true : false));
 </script>
 
 <style></style>