torsten/miriamgemeinde
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor database configuration and enhance server settings: Update database connection logic to utilize environment variables and improve error handling in database connection. Adjust server port configuration to prioritize BACKEND_PORT. Update HTML structure for better compatibility and add missing elements in various components.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-04-08 08:37:36 +02:00
parent 7d54156112
commit 6ffc1fedd9
87 changed files with 870 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/common/components/NavbarComponent.vue
View File

@@ -1,15 +1,33 @@
<template>
<nav class="navbar">
<button class="menu-toggle" @click="toggleMenu">
Menü
<button
class="menu-toggle"
type="button"
@click="toggleMenu"
:aria-expanded="String(isMenuOpen)"
aria-controls="main-menu"
>
<span class="menu-toggle__icon" aria-hidden="true">≡</span>
<span>Menü</span>
</button>
<ul v-if="isMenuOpen || windowWidth > 768">
<li class="ekhnlogo"><img src="/images/facettenkreuz.png" class="facettenkreuz" /></li>
<li v-for="item in menu" :key="item.name" @click="toggleSubmenu(item.name)">
<router-link :to="item.link" v-if="item.link" @click="closeMenu">
<ul id="main-menu" v-if="isMenuOpen || windowWidth > 768">
<li class="ekhnlogo">
<img src="/images/facettenkreuz.png" class="facettenkreuz" alt="EKHN" />
</li>
<li v-for="item in menu" :key="item.name">
<router-link :to="item.link" v-if="item.link" @click="closeMenu" class="nav-link">
{{ item.name }}
</router-link>
<span v-if="!item.link" class="pointer">
<span
v-if="!item.link"
class="nav-link pointer"
role="button"
tabindex="0"
@click="toggleSubmenu(item.name)"
@keydown.enter.prevent="toggleSubmenu(item.name)"
@keydown.space.prevent="toggleSubmenu(item.name)"
:aria-expanded="String(!!isSubmenuOpen[item.name])"
>
{{ item.name }}
</span>
<transition name="fade">
@@ -38,16 +56,20 @@ export default {
const windowWidth = ref(window.innerWidth);
const menu = computed(() => {
return store.state.menuData.filter(item => {
return (store.state.menuData || []).map((item) => {
const submenu = Array.isArray(item.submenu)
? item.submenu.filter(
(subitem) => subitem.showInMenu && (!subitem.requiresAuth || store.getters.isLoggedIn)
)
: item.submenu;
return { ...item, submenu };
}).filter(item => {
if (!item.showInMenu) {
return false;
}
if (item.requiresAuth && !store.getters.isLoggedIn) {
return false;
}
if (item.submenu) {
item.submenu = item.submenu.filter(subitem => subitem.showInMenu && (!subitem.requiresAuth || store.getters.isLoggedIn));
}
return true;
});
});
@@ -102,25 +124,34 @@ export default {
<style scoped>
.navbar {
background-color: #9400ff;
background-color: var(--color-brand-primary);
overflow: visible;
min-height: 31px;
display: inline-flex;
flex-direction: column;
width: auto;
margin: 0.1em 0.75em 9px 0.75em;
box-shadow: 0 0 2px 5px #9400ff;
width: calc(100% - (var(--space-3) * 2));
margin: var(--space-1) var(--space-3) var(--space-3) var(--space-3);
border-radius: 4px;
box-shadow: 0 0 0 2px var(--color-brand-primary);
}
.menu-toggle {
background-color: #9400ff;
color: white;
background-color: var(--color-brand-primary);
color: #fff;
border: none;
padding: 14px 20px;
text-align: center;
padding: var(--space-3) var(--space-4);
text-align: left;
text-decoration: none;
display: none;
font-weight: bold;
align-items: center;
gap: var(--space-2);
border-radius: 4px;
}
.menu-toggle__icon {
font-size: 1.25rem;
line-height: 1;
}
.navbar ul {
@@ -128,24 +159,39 @@ export default {
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 2px;
}
.navbar li {
position: relative;
}
.nav-link,
.navbar a,
.navbar li>span {
.navbar li > span {
display: block;
color: white;
text-align: center;
padding: 6px 20px;
padding: 10px 14px;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
line-height: 1.2;
}
.navbar a:hover {
background-color: #7a00d1;
.navbar a:hover,
.nav-link:hover {
background-color: var(--color-brand-primary-hover);
}
.navbar a:focus-visible,
.menu-toggle:focus-visible {
outline-color: #fff;
}
.navbar :deep(.router-link-exact-active) {
background-color: rgba(255, 255, 255, 0.18);
}
.menu-icon {
@@ -156,7 +202,7 @@ export default {
.dropdown-content {
position: absolute;
background-color: #9400ff;
background-color: var(--color-brand-primary);
min-width: 200px;
z-index: 1;
top: 100%;
@@ -164,7 +210,9 @@ export default {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
box-shadow: 2px 2px 4px #666;
box-shadow: var(--shadow-dropdown);
border-radius: 4px;
padding: var(--space-1);
}
.dropdown-content a {
@@ -176,7 +224,7 @@ export default {
}
.dropdown-content a:hover {
background-color: #7a00d1;
background-color: var(--color-brand-primary-hover);
}
.navbar li:hover .dropdown-content {
@@ -205,6 +253,8 @@ export default {
.navbar ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.navbar li {
@@ -214,11 +264,12 @@ export default {
.navbar a,
.navbar li>span {
text-align: left;
padding: 14px 20px;
padding: 14px 16px;
border-radius: 0;
}
.menu-toggle {
display: block;
display: inline-flex;
}
.dropdown-content {
@@ -226,12 +277,12 @@ export default {
box-shadow: none;
opacity: 1;
visibility: visible;
display: none;
padding-left: 1em;
padding-left: var(--space-4);
padding-bottom: var(--space-2);
}
.navbar li:hover .dropdown-content {
display: block;
.navbar :deep(.router-link-exact-active) {
background-color: rgba(255, 255, 255, 0.14);
}
}
@@ -240,12 +291,16 @@ export default {
}
.facettenkreuz {
max-width:30px;
max-height:30px;
position: fixed;
width: 28px;
height: 28px;
display: block;
margin: 0 var(--space-2);
}
.ekhnlogo {
width: 32px;
width: auto;
display: flex;
align-items: center;
padding: 0;
}
</style>