Direct liunk to current event in mobile mode

resources/js/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, onMounted, ref} from 'vue';
+import {reactive, onMounted, ref, computed} from 'vue';
 import Icon from "../../../app/Views/Components/Icon.vue";
 import GlobalWidgets from "../../../app/Views/Partials/GlobalWidgets/GlobalWidgets.vue";
 import {toast} from "vue3-toastify";
@@ -20,7 +20,8 @@ const globalProps = reactive({
     currentPath: '/',
     errors: {},
     availableLocalGroups: [],
-    message: ''
+    message: '',
+    currentEvent: null,
 });
 
 const sidebarOpen = ref(false);
@@ -51,13 +52,15 @@ onMounted(async () => {
     }
 });
 
-
-
-
-
-
 const currentPath = window.location.pathname;
 
+const showCurrentEventLink = computed(() => {
+    if (!globalProps.currentEvent) {
+        return false;
+    }
+    return currentPath !== '/event/details/' + globalProps.currentEvent.identifier;
+});
+
 const props = defineProps({
     title: { type: String, default: 'App' },
     flash: { type: Object, default: () => ({}) }
@@ -84,6 +87,16 @@ const props = defineProps({
                     <label id="show_username" v-if="globalProps.user !== null">Willkommen, {{ globalProps.user.nicename }}</label>
                 </div>
 
+                <a
+                    v-if="showCurrentEventLink"
+                    :href="'/event/details/' + globalProps.currentEvent.identifier"
+                    class="current-event-link"
+                    :title="'Zur Veranstaltung: ' + globalProps.currentEvent.name"
+                >
+                    <Icon name="calendar-day" />
+                    <span class="current-event-link-label">{{ globalProps.currentEvent.name }}</span>
+                </a>
+
                 <div class="header-actions" v-if="globalProps.user !== null">
                     <div class="user-info">
                         <a href="/messages" class="header-link-anonymous" title="Meine Nachrichten">
@@ -394,6 +407,34 @@ const props = defineProps({
     align-items: center;
 }
 
+/* ─── Direktlink zum aktuellen Event ─── */
+.current-event-link {
+    display: none; /* per Default ausgeblendet – nur auf Mobile sichtbar */
+    align-items: center;
+    gap: 6px;
+
+    color: #1d4899;
+    font-weight: bold;
+    text-decoration: none;
+    padding: 6px 10px;
+    border-radius: 4px;
+    margin-right: 10px;
+    max-width: 50%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.current-event-link:hover {
+    background-color: #1d4899;
+    color: #ffffff;
+}
+
+.current-event-link-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* ═══════════════════════════════════════════
    TABLET (640px – 1023px)
 ═══════════════════════════════════════════ */
@@ -455,6 +496,14 @@ const props = defineProps({
         height: 60px;
     }
 
+    .current-event-link {
+        display: inline-flex;
+    }
+
+    .current-event-link-label {
+        max-width: 120px;
+    }
+
     .left-side h1 {
         font-size: 1rem;
     }