From 1e4c13915b88b99fe92e39ebdfe5490cc1b4a85c Mon Sep 17 00:00:00 2001
From: Alex Roehm <alex@roehms.de>
Date: Tue, 13 Dec 2022 14:55:51 +0100
Subject: [PATCH] external menu feature (ccf)

---
 .kanbn/index.md                               |   3 +-
 .kanbn/tasks/analytics.md                     |   3 +-
 ...jecting-menu-for-integration-in-website.md |   9 +
 app.vue                                       | 119 ++---
 base/Menu.ts                                  | 119 +++++
 base/types/IMenuItemBase.ts                   |   6 +
 base/types/IMenuSection.ts                    |   7 +-
 base/types/IPageMenuItem.ts                   |   9 -
 components/EpisodesList.vue                   |   6 +-
 components/NavBar.vue                         | 410 ++++++++++++------
 components/SubMenu.vue                        |   3 +-
 composables/settingsdata.ts                   |   6 +-
 composables/useAuth.ts                        |   4 +-
 nuxt.config.ts                                |  53 ++-
 package.json                                  |   4 +-
 pages/admin/index.vue                         |  65 +++
 pages/index.vue                               |   4 +-
 pages/podcasts.vue                            |  20 +-
 pages/serie/index.vue                         |  17 +-
 public/app.settings.json                      |   3 +-
 public/menu-ex.json                           |  73 ++++
 public/menu.json                              | 277 ++++++++++++
 server/api/menu.ts                            |   5 +
 server/menu.ts                                |   6 +
 tests/components/NavBar.test.ts               |   9 +-
 25 files changed, 955 insertions(+), 285 deletions(-)
 create mode 100644 .kanbn/tasks/injecting-menu-for-integration-in-website.md
 create mode 100644 base/Menu.ts
 create mode 100644 base/types/IMenuItemBase.ts
 delete mode 100644 base/types/IPageMenuItem.ts
 create mode 100644 pages/admin/index.vue
 create mode 100644 public/menu-ex.json
 create mode 100644 public/menu.json
 create mode 100644 server/api/menu.ts
 create mode 100644 server/menu.ts

diff --git a/.kanbn/index.md b/.kanbn/index.md
index 71a8b76..e090f1b 100644
--- a/.kanbn/index.md
+++ b/.kanbn/index.md
@@ -21,13 +21,14 @@ sprints:
 
 ## Todo
 
-- [analytics](tasks/analytics.md)
+- [injecting-menu-for-integration-in-website](tasks/injecting-menu-for-integration-in-website.md)
 
 ## In Progress
 
 ## Done
 
 - [login-passwort-change](tasks/login-passwort-change.md)
+- [analytics](tasks/analytics.md)
 - [refresh-bug](tasks/refresh-bug.md)
 - [admin-als-super-admin-delete-podcast-und-import](tasks/admin-als-super-admin-delete-podcast-und-import.md)
 - [bibelstelle-video-editierbar](tasks/bibelstelle-video-editierbar.md)
diff --git a/.kanbn/tasks/analytics.md b/.kanbn/tasks/analytics.md
index 0eb5fd8..86cfcde 100644
--- a/.kanbn/tasks/analytics.md
+++ b/.kanbn/tasks/analytics.md
@@ -1,9 +1,10 @@
 ---
 created: 2022-11-29T10:53:22.296Z
-updated: 2022-12-03T20:26:57.445Z
+updated: 2022-12-12T09:35:30.491Z
 assigned: ""
 progress: 0
 tags: []
+completed: 2022-12-12T09:35:30.491Z
 ---
 
 # Analytics
diff --git a/.kanbn/tasks/injecting-menu-for-integration-in-website.md b/.kanbn/tasks/injecting-menu-for-integration-in-website.md
new file mode 100644
index 0000000..d1dbb39
--- /dev/null
+++ b/.kanbn/tasks/injecting-menu-for-integration-in-website.md
@@ -0,0 +1,9 @@
+---
+created: 2022-12-12T09:35:44.246Z
+updated: 2022-12-12T09:36:14.510Z
+assigned: ""
+progress: 0
+tags: []
+---
+
+# Injecting Menu for integration in website
diff --git a/app.vue b/app.vue
index 5641251..4e0c39f 100644
--- a/app.vue
+++ b/app.vue
@@ -1,113 +1,50 @@
 <script setup lang="ts">
-// import { IUser } from "~/types/IUser";
-import { useI18n } from "vue-i18n";
-import IMenuSection from "./base/types/IMenuSection";
-import { useUser, userLogout } from "./composables/authentication";
+import { onBeforeMount } from "vue";
+import { getDefaultMenu, getMenu, initDefaultMenu } from "./base/Menu";
 import { useSettings } from "./composables/settingsdata";
+import useAuth from "./composables/useAuth";
 
-const nuxtApp = useNuxtApp();
 const settings= await useSettings();
+
+const nuxtApp = useNuxtApp();
 nuxtApp.hook("page:finish", () => {
   window.scrollTo(0, 0);
 });
-const i18n = useI18n();
-var id = 0
-function getMenu(loggedin: boolean, username: string) : Array<IMenuSection> {
-  var menu = [       {
-          id: id++,
-          name: i18n.t("menu.admin"),
-          description: i18n.t("menu.adminsub"),
-          entries: [],
-        },
-        {
-          id: id++,
-          name: i18n.t("menu.podcasts"),
-          description: i18n.t("menu.podcastsub"),
-          entries: [
-            {
-              id: id++,
-              slug: "/podcasts",
-              name: i18n.t("menu.list"),
-            },
-            {
-              id: id++,
-              slug: "/recent",
-              name: i18n.t("menu.recent"),
-            },
-            {
-              id: id++,
-              slug: "/serie",
-              name: i18n.t("menu.series"),
-            }
-          ],
-        },
-      ];
-      if (!loggedin) {
-        menu[0].entries.push({
-          id: id++,
-          slug: "/admin/login",
-          name: i18n.t("menu.login"),
-        });
-      } else {
-        menu[0].entries.push({
-          id: id++,
-          slug: "#logout",
-          name: i18n.t("menu.logout"),
-        });
-        menu[0].entries.push({
-          id: id++,
-          slug: "/admin/setpassword",
-          name: i18n.t("menu.changepassword"),
-        });
-        if (username && username.startsWith('admin')) {
-          menu[0].entries.push({
-          id: id++,
-          slug: "/admin/invitation",
-          name: i18n.t("menu.invitataion"),
-        });
-
-          menu[0].entries.push({
-            id: id++,
-            slug: "/admin/import",
-            name: i18n.t("menu.import"),
-          });
-        }
-        menu[1].entries.push({
-          id: id++,
-          slug: "/admin/new-podcast",
-          name: i18n.t("menu.new"),
-        });
-        menu[1].entries.push({
-          id: id++,
-          slug: "/admin/new-serie",
-          name: i18n.t("menu.newseries"),
-        });
-      }
-  return menu;
-}
 
-const { useAuthUser, initAuth, useAuthLoading, logout } = useAuth()
-const user = useAuthUser()
+const { logout, initAuth, useAuthUser } = useAuth()
 onBeforeMount(() => {
     initAuth()
 })
 
-const loggedin = computed( () => (user.value?true:false) )
-const menu = computed( () => getMenu(loggedin.value, user.value?.username) )
-
-function localeChanged(value) {
-  i18n.locale.value = value;
-}
-
-function menuItemClicked(name) {
+function menuItemClicked(name: string) {
   if (name=="#logout") {
     logout()
   }
 }
+
+const user = useAuthUser()
+const menu = ref({})
+var menudata = {}
+
+if (true || !settings.value.menuSource || settings.value.menuSource.length()==0) {
+  menudata = initDefaultMenu()
+}
+
+const {locale}  = useI18n()
+
+async function setMenu( locale: string ) {
+  if (!settings.value.menuSource || settings.value.menuSource===""){
+    menu.value = getDefaultMenu(menudata, (user.value?user.value.username:""))
+  } else
+    menu.value = await getMenu(settings.value.menuSource)
+}
+setMenu(locale.value)
+watch( ()=>user.value, () => setMenu(locale.value))
+
 </script>
 <template>
   <div>
-    <NavBar :menu="menu" :defaultRoute="settings.defaultRoute" :availableLocales="$i18n.availableLocales" :locale="$i18n.locale" @localeChanged="localeChanged" @menuItemClicked="menuItemClicked"/>
+    <NavBar :menu="menu" :closeOnScroll="settings.closeOnScroll" @menuItemClicked="menuItemClicked"/> 
     <NuxtPage />
   </div>
 </template>
diff --git a/base/Menu.ts b/base/Menu.ts
new file mode 100644
index 0000000..5381a01
--- /dev/null
+++ b/base/Menu.ts
@@ -0,0 +1,119 @@
+import IMenuSection from '~~/base/types/IMenuSection';
+
+export function initDefaultMenu(): Object {
+  var id = 0;
+  const menuResult = {
+    defaultBase: '/',
+    keys: [
+      {
+        order: id++,
+        name: 'menu.admin',
+        description: 'menu.adminsub',
+        entries: [
+          {
+            order: id++,
+            slug: 'admin/login',
+            name: 'menu.login',
+            onlyNotLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: '#logout',
+            name: 'menu.logout',
+            onlyLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/setpassword',
+            name: 'menu.changepassword',
+            onlyLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/invitation',
+            name: 'menu.invitataion',
+            onlyAdmin: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/import',
+            name: 'menu.import',
+            onlyAdmin: '',
+          },
+        ],
+      },
+      {
+        order: id++,
+        name: 'menu.podcasts',
+        description: 'menu.podcastsub',
+        entries: [
+          {
+            order: id++,
+            slug: 'podcasts',
+            name: 'menu.list',
+          },
+          {
+            order: id++,
+            slug: 'recent',
+            name: 'menu.recent',
+          },
+          {
+            order: id++,
+            slug: 'serie',
+            name: 'menu.series',
+          },
+          {
+            order: id++,
+            slug: 'admin/new-podcast',
+            name: 'menu.new',
+            onlyLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/new-serie',
+            name: 'menu.newseries',
+            onlyLoggedIn: '',
+          },
+        ],
+      },
+    ]
+  }
+  return menuResult;
+}
+
+export function getDefaultMenu(
+  menudata: Object,
+  username: string
+): Object {
+  const loggin = username.length > 0;
+  const admin = username.startsWith('admin');
+  const menuResult = {
+    defaultBase: menudata.defaultBase,
+    keys: menudata.keys.map((section) => {
+      return {
+        order: section.order,
+        name: section.name,
+        description: section.description,
+        entries: section.entries.filter(
+          (entry) =>
+            (entry.hasOwnProperty('onlyLoggedIn') && loggin) ||
+            (entry.hasOwnProperty('onlyNotLoggedIn') && !loggin) ||
+            (entry.hasOwnProperty('onlyAdmin') && admin) ||
+            !(
+              entry.hasOwnProperty('onlyLoggedIn') ||
+              entry.hasOwnProperty('onlyNotLoggedIn') ||
+              entry.hasOwnProperty('onlyAdmin')
+            )
+        ),
+      }
+    })
+  }
+  return menuResult;
+}
+
+export async function getMenu(
+  url: string,
+): Promise<Object> {
+  const menudata = await $fetch<IMenuSection>(url);
+  return menudata;
+}
diff --git a/base/types/IMenuItemBase.ts b/base/types/IMenuItemBase.ts
new file mode 100644
index 0000000..8826b2c
--- /dev/null
+++ b/base/types/IMenuItemBase.ts
@@ -0,0 +1,6 @@
+export default interface IMenuItemBase {
+  name: string;
+  order: number;
+  slug: string;
+  baseUrl?: string;
+}
\ No newline at end of file
diff --git a/base/types/IMenuSection.ts b/base/types/IMenuSection.ts
index 78c7dbf..6ec3105 100644
--- a/base/types/IMenuSection.ts
+++ b/base/types/IMenuSection.ts
@@ -1,8 +1,7 @@
-import IPageMenuItem from "./IPageMenuItem";
+import IMenuItemBase from "./IMenuItemBase";
 
-export default interface IMenuSection {
-    id: number;
+export default interface IMenuSectionBase {
     description: string;
     name: string;
-    entries: Array<IPageMenuItem>;
+    entries: Array<IMenuItemBase>;
 }
\ No newline at end of file
diff --git a/base/types/IPageMenuItem.ts b/base/types/IPageMenuItem.ts
deleted file mode 100644
index c1884cb..0000000
--- a/base/types/IPageMenuItem.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default interface IPageMenuItem 
-{
-    id: number;
-    name: string;
-    order?: number;
-    slug: string;
-    layout?: string;
-    locale?: string;    
-}
\ No newline at end of file
diff --git a/components/EpisodesList.vue b/components/EpisodesList.vue
index f76a93a..232a6cd 100644
--- a/components/EpisodesList.vue
+++ b/components/EpisodesList.vue
@@ -20,7 +20,7 @@
       v-for="(episode, index) in sortedFilteredList"
       :key="index"
     >
-      <NuxtLink :to="episode.nuxtlink">
+      <NuxtLink :to="localePath(episode.nuxtlink)">
         <div class="my-1 md:px-4 pt-2 hover:bg-slate-100 md:rounded-xl 
         flex flex-col sm:flex-row place-content-center place-items-center 
         items-center bg-white sm:bg-transparent">
@@ -77,6 +77,7 @@ export default {
   name: 'EpisodesList',
   setup(props) {
     const dateformat = (input: Date): string => input.toLocaleDateString();
+    const localePath = useLocalePath();
     const search = ref("")
     const searchHiden = ref(true)
     const itemsperpage = ref(NUM_ITEMS_PER_PAGE)
@@ -127,7 +128,8 @@ export default {
       search,
       itemsperpage,
       page,
-      max
+      max,
+      localePath
     };
   },
 };
diff --git a/components/NavBar.vue b/components/NavBar.vue
index 56b4164..16e7873 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -1,50 +1,193 @@
 <template>
   <div>
+    <nav ref="navelement" class="px-2 sm:px-4 pt-2 bg-white shadow-md">
+      <div class="flex justify-between">
+        <div class="w-1/6 relative flex flex-row items-center flex-nowrap">
+          <svg
+            class="w-4 h-4 sm:w-5 sm:h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+            ></path>
+          </svg>
+          <button
+            @click="toggle('language')"
+            class="font-medium rounded-lg text-sm text-center inline-flex items-centent"
+            type="button"
+          >
+            <div class="w-0 sm:w-16 invisible sm:visible">{{ localeName }}</div>
+            <svg
+              class="w-5 h-5"
+              aria-hidden="true"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M19 9l-7 7-7-7"
+              ></path>
+            </svg>
+          </button>
+          <div
+            v-show="showDropdown"
+            class="absolute border-2 w-44 bg-white rounded shadow"
+          >
+            <ul class="py-1 text-sm text-gray-700">
+              <li class="p-1" v-for="local in locales" :key="local.code">
+                <NuxtLink
+                  v-if="local.code !== locale"
+                  :to="switchLocalePath(local.code)"
+                  @click="localeChanged(local.code)"
+                  >{{ local.name }}
+                </NuxtLink>
+                <div v-else>{{ local.name }}</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="flex-grow content-center text-center align-middle">
+          <a :href="homeLink" class="inline-block">
+            <img src="/img/logo.png" class="h-7 sm:h-10 m-1" />
+          </a>
+        </div>
+        <div class="w-1/6 flex flex-row items-center place-content-end">
+          <div
+            class="text-gray-500 hover:text-orange-500"
+            data-testid="NavBar.clickableElement"
+            @click="toggle('menu')"
+          >
+            <svg
+              v-if="!showMenu"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-5 h-5 sm:w-6 sm:h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              />
+            </svg>
+            <svg
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </nav>
     <transition
-      enter-from-class="translate-x-[150%] opacity-0"
+      enter-from-class="translate-y-[150%] opacity-0"
       enter-active-class="transition duration-400"
       leave-active-class="transition duration-400"
-      leave-to-class="translate-x-[150%] opacity-0"
+      leave-to-class="translate-y-[150%] opacity-0"
     >
       <div
-        v-if="show"
-        class="absolute top-10 md:top-16 z-50 bg-white w-full shadow-md"
+        v-if="showMenu"
+        class="fixed top-0 pt-2 z-50 bg-white w-full shadow-md"
       >
         <!-- v-show="show" -->
+        <div class="flex px-3 sm:px-4 justify-between">
+          <div class="w-1/6"></div>
+          <div class="flex-grow content-center text-center align-middle">
+            <div class="inline-block">
+              <img src="/img/logo.png" class="h-7 sm:h-10 m-1" />
+            </div>
+          </div>
+          <div class="w-1/6 flex justify-end content-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </div>
+        </div>
         <div
-          class="flex flex-row flex-wrap sm:justify-evenly p-5"
+          class="flex flex-row flex-wrap justify-evenly p-5"
           @click="hideDropdown"
         >
-          <div class="w-100 mb-8" v-for="section in menu" :key="section.id">
+          <div
+            class="w-80 mb-8"
+            v-for="section in menuSections"
+            :key="section.order"
+          >
             <div class="container px-4 mx-auto flex flex-col">
               <div class="flex flex-row">
                 <div
-                  class="
-                    mb-4
-                    px-2
-                    leading-tight
-                    tracking-tighter
-                    shrink
-                    ccfunderline
-                  "
+                  class="mb-4 px-2 leading-tight tracking-tighter shrink ccfunderline2"
                 >
-                <h1
-        class="mt-6 md:mt-12 mb-1 md:mb-4 grow-0 text-md md:text-2xl uppercase italic ccf-underline-xs"
-      >
-        &nbsp;{{ section.name }}&nbsp;
-              </h1>
+                  <h1 class="ccf-underline text-xl md:text-2xl font-bold">
+                    &nbsp;{{ (hasI18nKeysMenue?$t(section.name):section.name) }}&nbsp;
+                  </h1>
                 </div>
                 <div class="flex-grow"></div>
               </div>
-              <p class="text-sm mb-6 font-thin">
-                {{ section.description }}
+              <p class="text-sm mt-2 mb-6 font-thin">
+                {{ (hasI18nKeysMenue?$t(section.description):section.description) }}
               </p>
-              <div v-for="entry in section.entries" :key="entry.id">
-                <button v-if="entry.slug.startsWith('#')" data-testid="NavBar.menuItemEvent" @click="emit(entry.slug)">
-                  {{ entry.name }}
+              <div v-for="(entry, index) in section.entries" :key="index">
+                <button
+                  v-if="entry.slug.startsWith('#')"
+                  data-testid="NavBar.menuItemEvent"
+                  @click="menuItemClicked(entry.slug)"
+                >
+                  {{ (hasI18nKeysMenue?$t(entry.name):entry.name) }}
+                </button>
+                <button
+                  v-else-if="!entry.local && entry.slug.startsWith('http')"
+                  data-testid="NavBar.menuItemEvent"
+                >
+                  <a :href="entry.slug">
+                    {{ (hasI18nKeysMenue?$t(entry.name):entry.name) }}
+                  </a>
+                </button>                <button
+                  v-else-if="!entry.local && baseUrl.length > 4"
+                  data-testid="NavBar.menuItemEvent"
+                >
+                  <a :href="getExternalLink(entry)">
+                    {{ (hasI18nKeysMenue?$t(entry.name):entry.name) }}
+                  </a>
                 </button>
-                <NuxtLink v-else data-testid="NavBar.menuItem" :to="entry.slug">
-                  {{ entry.name }}
+                <NuxtLink
+                  v-else
+                  data-testid="NavBar.menuItem"
+                  :to="localePath('/' + entry.slug)"
+                >
+                  {{ (hasI18nKeysMenue?$t(entry.name):entry.name) }}
                 </NuxtLink>
               </div>
             </div>
@@ -53,128 +196,127 @@
         <div></div>
       </div>
     </transition>
-    <nav class="px-2 md:px-4 bg-white sticky top-0 shadow-md">
-      <div class="h-10 md:h-16 relative flex flex-row justify-between content-center place-content-center place-items-center">
-        <div class="w-26 flex flex-row justify-start place-items-center">
-            <svg
-              class="w-4 h-4 align-middle"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-              ></path>
-            </svg>
-          <select
-            class="bg-white border-none h-5 md:text-sm text-xs"
-            name="language_id"
-            data-testid="NavBar.localeSelect" 
-            v-model="currentLocale"
-            @change="changeLocale"
-          >
-            <option
-              v-for="(local, index) in availableLocales"
-              :key="index"
-              :value="local"
-            >
-              {{ $t(local.toString()) }}
-            </option>
-          </select>
-        </div>
-        <div class="flex-grow flex flex-row place-content-center">
-          <nuxt-link class="text-center inline-block" :to="defaultRoute">
-            <img src="/img/logo.png" class="h-6 md:h-10" />
-          </nuxt-link>
-        </div>
-        <div class="w-20"></div>
-        <div
-          class="
-            text-gray-700
-            hover:text-orange-500
-          "
-          data-testid="NavBar.clickableElement"
-          @click="switchDropdown"
-        >
-          <svg v-if="!show" class="h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-          </svg>
-          <svg v-else class="h-6  block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </div>
-      </div>
-    </nav>
-    <div class="mt-1"></div>
+    <div class="mt-14"></div>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent, ref,onMounted, onBeforeUnmount } from "vue"
-import IMenuSection from "~~/base/types/IMenuSection"
+import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
+import IMenuItemBase from '~~/base/types/IMenuItemBase';
+import IMenuSectionBase from '~~/base/types/IMenuSection';
 
 export default defineComponent({
+  name: 'NavBar',
   props: {
-    menu: Object as PropType<Array<IMenuSection>>,
-    defaultRoute: {
-      type: String,
-      default: "/recent"
-    },
-    availableLocales: Object as  PropType<Array<String>>,
-    locale:  String
+    closeOnScroll: Boolean,
+    menu: Object,
   },
-  emits: ["localeChanged", "menuItemClicked"],
-  name: "NavBar",
-  setup(props, ctx) {
-    const show = ref(false)
-    const currentLocale = ref(props.locale)
-    var itWasMe = false
+  //emits: ["menuItemClicked"],
+  async setup(props, ctx) {
+    const navelement = ref(null);
+    const localePath = useLocalePath();
+    const showMenu = ref(false);
+    const showDropdown = ref(false);
+    const { locale, locales, setLocale, t } = useI18n();
+    var itWasMe = '';
+    const switchLocalePath = useSwitchLocalePath();
+    const menuSections = ref([] as Array<IMenuSectionBase>);
+    const baseUrl = ref("/");
+    const hasI18nKeysMenue = ref(true);
+    const homeLink = ref(baseUrl.value)
 
-    function switchDropdown() {
-      itWasMe = true
-      show.value = !show.value;
-    }
-    function hideDropdown() {
-      show.value = false
+    onMounted(async () => {
+      document.addEventListener('click', closeIfClickedOutside);
+      document.addEventListener('scroll', closeIfScrolled);
+    })
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', closeIfClickedOutside);
+      document.removeEventListener('scroll', closeIfScrolled);
+    })
+
+    const localeName = computed(() => {
+      const local = locales.value.find((l) => l.code === locale.value);
+      return local ? local.name : locale.value;
+    });
+
+    const setMenu = (locale: string) => {
+      hasI18nKeysMenue.value = props.menu.hasOwnProperty('keys')
+      if (props.menu.defaultBase!="/" )
+        baseUrl.value = props.menu.defaultBase
+      menuSections.value = (hasI18nKeysMenue.value?props.menu['keys']:props.menu[locale])
+      homeLink.value = baseUrl.value+"/"+(locale=="de"?"":locale)
     }
-    function closeIfClickedOutside(event : Event) {
-      const target  = event.target as any
-      if (target.name==="language_id" || target.nodeName==="OPTION")
-        return
-      if (!itWasMe && show.value) {
-        show.value = false
+    watch( ()=>props.menu, (newVal) => {
+      if (newVal)
+        setMenu(locale.value)
+    })
+    setMenu(locale.value)
+
+    const getExternalLink = (entry: IMenuItemBase): string => {
+      var url =
+        baseUrl.value +
+        '/' +
+        (locale.value == 'de' ? '' : locale.value + '/') +
+        entry.slug;
+      return url;
+    };
+
+    function toggle(what: string) {
+      itWasMe = what;
+      if (what == 'language') showDropdown.value = !showDropdown.value;
+      else {
+        showMenu.value = !showMenu.value;
       }
-      itWasMe = false
     }
-    function emit(name: String) {
-      ctx.emit("menuItemClicked", name)
+    function hide() {
+      showDropdown.value = false;
+      showMenu.value = false;
     }
-    function changeLocale(event : Event) {
-      ctx.emit("localeChanged", (event.target as any).value)
+    function closeIfClickedOutside(event) {
+      if (
+        event.target.name === 'language_id' ||
+        event.target.nodeName === 'OPTION' ||
+        event.target.nodeName === 'LI'
+      )
+        return;
+      if (itWasMe === '') {
+        hide();
+      }
+      itWasMe = '';
     }
 
-    onMounted(() =>  {
-      document.addEventListener("click", closeIfClickedOutside)
-      document.addEventListener("scroll", closeIfClickedOutside);
+    function closeIfScrolled(event) {
+      if (props.closeOnScroll)
+        closeIfClickedOutside(event)
+    }
 
-    })
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", closeIfClickedOutside)
-      document.removeEventListener("scroll", closeIfClickedOutside);
-    })    
-    return {
-      show,
-      switchDropdown,
-      hideDropdown,
-      changeLocale,
-      availableLocales: props.availableLocales,
-      currentLocale,
-      emit
+    function menuItemClicked(name: string) {
+      ctx.emit('menuItemClicked', name);
+    }
+
+    function localeChanged(locale: string) {
+      setMenu(locale)
+      ctx.emit('localeChanged', locale);
     }
-  }
-})
-</script>
\ No newline at end of file
+    return {
+      showMenu,
+      showDropdown,
+      menuSections,
+      locale,
+      locales,
+      setLocale,
+      localePath,
+      localeName,
+      toggle,
+      hide,
+      navelement,
+      baseUrl,
+      menuItemClicked,
+      localeChanged,
+      getExternalLink,
+      hasI18nKeysMenue,
+      homeLink
+    };
+  },
+});
+</script>
diff --git a/components/SubMenu.vue b/components/SubMenu.vue
index 71f824b..3d842fe 100644
--- a/components/SubMenu.vue
+++ b/components/SubMenu.vue
@@ -15,7 +15,7 @@
           <div class="pl-3 md:pl-5">{{ $t(item.name) }}</div>
           </div>
         </button>
-        <NuxtLink v-else :to="item.slug">
+        <NuxtLink v-else :to="localePath(item.slug)">
           <button
             class="py-1 h-5 md:h-7 w-32 md:w-36 pr-2 rounded-xl hover:bg-clip-text hover:text-transparent hover:bg-gradient-to-r from-yellow-400 via-orange-500 to-orange-700"
           >
@@ -40,6 +40,7 @@ export default defineComponent({
   },
   name: 'SubMenu',
   setup(props, {emit}) {
+    const localePath = useLocalePath();
     return {
       emit: (value : string) => emit("menuItemClicked", value)
     }
diff --git a/composables/settingsdata.ts b/composables/settingsdata.ts
index 27213c4..986d393 100644
--- a/composables/settingsdata.ts
+++ b/composables/settingsdata.ts
@@ -2,9 +2,11 @@ export async function useSettings() {
   const settings = useState<Object>('settings', () => {return {
     baseUrl: "http://localhost:3000",
     defaultRoute: "/recent",
-    default: true
+    menuSource: "",
+    closeOnScroll: false,
+    default: false
   }})
-  if (settings.value.default)
+  if (!settings.value.default)
     settings.value = await $fetch("/api/settings")
   return settings
 }
\ No newline at end of file
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index c3fc1f7..9d0d9b3 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -1,6 +1,6 @@
 import jwt_decode from "jwt-decode"
-import { AUTHUSER_AP, LOGIN_AP, LOGOUT_AP, PASSWORD_AP, REFRESH_AP } from "~~/base/Constants"
-import { IUser } from "~~/base/types/IUser"
+import { AUTHUSER_AP, LOGIN_AP, LOGOUT_AP, PASSWORD_AP, REFRESH_AP } from "../base/Constants"
+import { IUser } from "../base/types/IUser"
 
 export default () => {
     const useAuthToken = () => useState('auth_token')
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 495fe9b..e94568a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,11 +1,11 @@
 import fs from "fs-extra"
 import path from "path"
 import type { Nitro } from 'nitropack';
-import { nuxtPath } from "./server/services/podcastService";
+import { defineNuxtConfig } from "nuxt/config";
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', "@intlify/nuxt3",'nuxt-umami'],
+  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxtjs/i18n','nuxt-umami'],
   ssr: true,
   target: 'server',
   head: {
@@ -19,26 +19,26 @@ export default defineNuxtConfig({
       /^\/admin/ // path starts with /admin
     ]
   },
-  tailwindcss: {
-    cssPath: '~/assets/css/tailwind.css',
-    configPath: 'tailwind.config.js',
-    exposeConfig: false,
-    injectPosition: 0,
-    viewer: true,
-  },
-  colorMode: {
-    classSuffix: ''
-  },
-  intlify: {
-    localeDir: "locales",
+  i18n: {
+    strategy: 'prefix_except_default',
+    defaultLocale: 'de',
+    locales: [
+      { 
+        code: "en", 
+        file: "en.json",
+        name: "English"
+      },
+      {
+        code: "de",
+        file: "de.json",
+        name: "Deutsch"
+      }
+    ],
+    lazy: true,
+    langDir: 'locales',
     vueI18n: {
-      legacy: false,
-      locale: "en",
-      fallbackLocale: "en",
-      globalInjection: true,
-      sync: true,
-      availableLocales: ["de", "en"],
-    },
+      fallbackLocale: 'de'
+    }
   },
   umami: {
     enable: true, // enable the module? true by default
@@ -49,7 +49,16 @@ export default defineNuxtConfig({
     websiteId: '4b79e0da-e70b-430b-b0ea-978691c32f55',
     scriptUrl: 'https://umami.calvarychapel.de/umami.js',
   },
-  buildModules: ["@intlify/nuxt3"],
+  tailwindcss: {
+    cssPath: '~/assets/css/tailwind.css',
+    configPath: 'tailwind.config.js',
+    exposeConfig: false,
+    injectPosition: 0,
+    viewer: true,
+  },
+  colorMode: {
+    classSuffix: ''
+  },
   postcss: {
     plugins: {
       tailwindcss: {},
diff --git a/package.json b/package.json
index 6375aaa..f43c679 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,10 @@
       "migration": "typeorm-ts-node-commonjs -d ./server/db/datasource.ts migration:generate ./server/db/migrations/auth"
    },
    "devDependencies": {
-      "@intlify/nuxt3": "^0.2.3",
       "@nuxt/postcss8": "^1.1.3",
       "@nuxt/test-utils-edge": "^3.0.0-rc.8-27698890.b90d286",
       "@nuxtjs/color-mode": "^3.1.4",
+      "@nuxtjs/i18n": "^8.0.0-beta.7",
       "@nuxtjs/tailwindcss": "^6.1.3",
       "@types/busboy": "^1.5.0",
       "@types/node": "^16.11.10",
@@ -31,7 +31,7 @@
       "jsdom": "^20.0.0",
       "nuxt-umami": "^1.2.0",
       "postcss": "^8.4.14",
-      "sqlite3": "^5.0.10",
+      "sqlite3": "^5.1.4",
       "tailwindcss": "^3.1.6",
       "ts-node": "10.7.0",
       "typescript": "4.5.2"
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
new file mode 100644
index 0000000..1bf236d
--- /dev/null
+++ b/pages/admin/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <messge-toast></messge-toast>
+    <div class="w-full flex justify-center">
+      <div
+        class="mt-4 md:mt-6 mb-10 md:mb-14 grow-0 text-md md:text-2xl uppercase italic ccf-underline-xs"
+      >
+        &nbsp;{{ $t('menu.admin') }}&nbsp;
+      </div>
+    </div>
+    <div class="w-full h-screen bg-gray-200 flex justify-center">
+      <div class="py-6 md:py-10 w-5/6 md:w-2/3 md:h-60 flex flex-col">
+        <div
+            class="pt-2 sm:pt-8 pb-2 sm:pb-4  text-sm md:text-ml tracking-widest font-bold text-gray-500 text-center"
+          >
+          {{ $t('menu.adminsub') }}
+        </div>
+        <button v-if="user" data-testid="NavBar.menuItemEvent" @click="logmeout">
+          {{ $t('menu.logout') }}
+        </button>
+        <NuxtLink
+          v-else class="text-center" 
+          data-testid="NavBar.menuItem"
+          :to="localePath('/admin/login')"
+        >
+          {{ $t('menu.login') }}
+        </NuxtLink>
+        <NuxtLink class="text-center" v-if="user" 
+          data-testid="NavBar.menuItem"
+          :to="localePath('/admin/setpassword')"
+        >
+          {{ $t('menu.changepassword') }}
+        </NuxtLink>
+        <NuxtLink class="text-center" v-if="(user && user.username.startsWith('admin'))" 
+          data-testid="NavBar.menuItem"
+          :to="localePath('/admin/invitation')"
+        >
+          {{ $t('menu.invitataion') }}
+        </NuxtLink>
+        <NuxtLink class="text-center" v-if="(user && user.username.startsWith('admin'))" 
+          data-testid="NavBar.menuItem"
+          :to="localePath('/admin/import')"
+        >
+          {{ $t('menu.import') }}
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const localePath = useLocalePath();
+const { logout, useAuthUser } = useAuth();
+const user = useAuthUser();
+const router = useRouter();
+const logmeout = () => {
+  logout();
+  router.push(localePath('/'))
+}
+onMounted( () =>
+  router.replace({
+    ...router.currentRoute,
+    query: {
+  }
+}))
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 4bd54b0..2107109 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,5 +4,7 @@
 <script setup lang="ts">
 const router = useRouter()
 const settings = await useSettings()
-router.replace(settings.value.defaultRoute)
+const localePath = useLocalePath();
+const url = localePath(settings.value.defaultRoute)
+router.replace(url)
 </script>
\ No newline at end of file
diff --git a/pages/podcasts.vue b/pages/podcasts.vue
index 61207a9..68070d4 100644
--- a/pages/podcasts.vue
+++ b/pages/podcasts.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <messge-toast></messge-toast>
-
+    <sub-menu v-if="user != null" :items="submenu"/>
     <div class="w-full flex justify-center">
       <div
-        class="mt-6 md:mt-10 mb-10 md:mb-14 grow-0 text-md md:text-2xl uppercase italic ccf-underline-xs"
+      class="mt-4 md:mt-6 mb-10 md:mb-14 grow-0 text-md md:text-2xl uppercase italic ccf-underline-xs"
       >
         &nbsp;{{ $t('podcast.headline') }}&nbsp;
       </div>
@@ -13,13 +13,13 @@
       <div class="pt-6 md:pt-10 w-5/6 md:w-2/3 md:h-60 flex flex-col">
         <div v-for="podcast in sortedPodcasts" :key="podcast.id">
           <div class="p-4 mt-4 bg-white flex flex-row flex-wrap sm:flex-nowrap place-content-center">
-            <NuxtLink :to="'/podcast/' + podcast.slug">
+            <NuxtLink :to="localePath('/podcast/' + podcast.slug)">
               <img class="w-32 h-32 objext-scale-down" :src="podcast.cover_file" />
             </NuxtLink>
             <div
               class="px-4 sm:pl-12 py-2 flex-grow flex flex-col justify-around items-start rounded-r-md"
             >
-              <NuxtLink :to="'/podcast/' + podcast.slug">
+              <NuxtLink :to="localePath('/podcast/' + podcast.slug)">
                 <div>
                   <div class="text-xs sm:text-xl md:text-2xl font-semibold tracking-wider">
                     {{ podcast.title }}
@@ -96,8 +96,9 @@ import { FEED_SLUG } from '~~/base/Constants';
 import IPodcast from '~~/base/types/IPodcast';
 import { usePodcasts } from '~~/composables/podcastdata';
 const { refresh, podcasts } = await usePodcasts();
-
+const localePath = useLocalePath();
 const route = useRoute();
+const user = await useAuth().useAuthUser() as any;
 
 const toasterMessage = ref('');
 const showToast = ref(false);
@@ -121,4 +122,13 @@ onMounted( () =>
     query: {
   }
 }))
+const submenu = [
+{
+    id: 0,
+    name: "podcast.new",
+    slug: "/admin/new-podcast",
+    layout: "add"
+  }
+]
+
 </script>
diff --git a/pages/serie/index.vue b/pages/serie/index.vue
index 064172e..3e4ff3c 100644
--- a/pages/serie/index.vue
+++ b/pages/serie/index.vue
@@ -1,9 +1,11 @@
 <template>
 <div>
   <messge-toast></messge-toast>
+  <sub-menu v-if="user != null" :items="submenu"/>
+
 <div class="w-full flex justify-center">
         <div
-          class="mt-6 md:mt-10 mb-10 md:mb-14 grow-0 text-md md:text-2xl uppercase italic ccf-underline-xs"
+          class="mt-4 md:mt-6 mb-10 md:mb-14 grow-0 text-md md:text-2xl uppercase italic ccf-underline-xs"
         >&nbsp;Series&nbsp;
         </div>
   </div>
@@ -26,7 +28,7 @@
       </div>
     </div>
         <div v-for="serie in currentPage" :key="serie.id">
-          <NuxtLink :to="'/serie/' + serie.slug">
+          <NuxtLink :to="localePath('/serie/' + serie.slug)">
             <div class="mt-4 p-4 bg-white flex flex-col sm:flex-row flex-wrap sm:flex-nowrap items-center sm:place-content-center">
               <img class="w-32 h-32" :src="serie.cover_file" />
               <div
@@ -65,6 +67,8 @@ const searchHiden = ref(true)
 const { refresh, series } = await useSeries();
 const route = useRoute();
 const router = useRouter();
+const user = await useAuth().useAuthUser() as any;
+const localePath = useLocalePath();
 
 function sorter( a: ISerie, b: ISerie ) : number{
   return (b.lastEpisode?new Date(b.lastEpisode).getTime():0)-(a.lastEpisode?new Date(a.lastEpisode).getTime():0)
@@ -95,4 +99,13 @@ onMounted( () =>
     query: {
   }
 }))
+const submenu = [
+{
+    id: 0,
+    name: "serie.new",
+    slug: "/admin/new-serie",
+    layout: "add"
+  }
+]
+
 </script>
diff --git a/public/app.settings.json b/public/app.settings.json
index fc49f8b..07f4ead 100644
--- a/public/app.settings.json
+++ b/public/app.settings.json
@@ -1,4 +1,5 @@
 {
   "baseUrl": "http://localhost:3000",
-  "defaultRoute": "/recent"
+  "defaultRoute": "/recent",
+  "menuSource": "/api/menu"
 } 
\ No newline at end of file
diff --git a/public/menu-ex.json b/public/menu-ex.json
new file mode 100644
index 0000000..4401134
--- /dev/null
+++ b/public/menu-ex.json
@@ -0,0 +1,73 @@
+{
+  "defaultBase": "https://ccf.calvarychapel.de",
+  "en": [
+    {
+      "name": "Come in",
+      "description": "Plan your visit to Calvary Chapel Freiburg",
+      "entries": [
+        {
+          "name": "Ministries",
+          "order": 10,
+          "slug": "ministries"
+        }
+      ]
+    }
+  ],
+  "de": [
+    {
+      "name": "Komm vorbei",
+      "description": "Plane deinen Besuch in der Calvary Chapel Freiburg",
+      "entries": [
+        {
+          "name": "Heimathafen",
+          "order": 10,
+          "slug": "ministries"
+        }
+      ]
+    },
+    {
+      "name": "Hör rein",
+      "description": "Höre unsere Predigen, Inputs und  Biblestudies oder lies Neues und Andachten",
+      "entries": [
+        {
+          "name": "Aktuelle Predigten",
+          "order": 10,
+          "slug": "predigten"
+        }
+      ]
+    },
+    {
+      "name": "Mach mit",
+      "description": "Erforsche die Möglichkeiten dich einzubringen",
+      "entries": [
+        {
+          "name": "Mitgliedschaft",
+          "order": 10,
+          "slug": "mitgliedschaft"
+        }
+      ]
+    },
+    {
+      "name": "Sei dabei",
+      "description": "Erfahre was Mitgliedschaft bedeutet und an welchen zu welchen Gruppen du kommen kannt",
+      "entries": [
+        {
+          "name": "Sommerlager",
+          "order": 10,
+          "slug": "sloa"
+        }
+      ]
+    },
+    {
+      "name": "Über uns",
+      "description": "Erfahre mehr über uns und unseren Glauben",
+      "entries": [
+        {
+          "name": "Calvary was?",
+          "order": 10,
+          "slug": "calvarychapel-was"
+        }
+      ]
+    }
+  ]
+}
diff --git a/public/menu.json b/public/menu.json
new file mode 100644
index 0000000..e64c0ca
--- /dev/null
+++ b/public/menu.json
@@ -0,0 +1,277 @@
+{
+  "defaultBase": "https://ccfreiburg.de",
+  "en": [
+    {
+      "name": "About us",
+      "description": "Get to know us",
+      "entries": [
+        {
+          "name": "Our Leadership",
+          "order": 10,
+          "slug": "about-us/our-leadership/"
+        },
+        {
+          "name": "Our Name",
+          "order": 20,
+          "slug": "about-us/our-name/"
+        },
+        {
+          "name": "Our Faith",
+          "order": 30,
+          "slug": "about-us/our-faith/"
+        },
+        {
+          "name": "Our Core Values",
+          "order": 40,
+          "slug": "about-us/our-faith/core-values/"
+        }
+      ]
+    },
+    {
+      "name": "Connect",
+      "description": "Connect with the Church",
+      "entries": [
+        {
+          "name": "Membership",
+          "order": 10,
+          "slug": "connect/membership/"
+        },
+        {
+          "name": "Small Groups",
+          "order": 10,
+          "slug": "connect/smallgroups/"
+        },
+        {
+          "name": "Encouraging People",
+          "order": 10,
+          "slug": "connect/encouraging-people/"
+        },
+        {
+          "name": "Heimathafen",
+          "order": 10,
+          "slug": "connect/heimathafen/"
+        },      
+        {
+          "name": "Royal Rangers 393 (de)",
+          "order": 10,
+          "slug": "https://rr393.de"
+        },
+        {
+          "name": "Echtzeit (de)",
+          "order": 10,
+          "slug": "connecten/echtzeit/"
+        },      
+        {
+          "name": "Junge Erwachsene (de)",
+          "order": 10,
+          "slug": "junge-erwachsene/"
+        },      
+        {
+          "name": "Mens Ministry",
+          "order": 10,
+          "slug": "connect/mens-ministry/"
+        },
+        {
+          "name": "Sommerlager (de)",
+          "order": 10,
+          "slug": "connecten/sola/"
+        }
+      ]
+    },
+    {
+      "name": "Hör rein",
+      "description": "Höre unsere Predigen, Inputs und  Biblestudies oder lies Neues und Andachten",
+      "entries": [
+        {
+          "name": "Recent Sermons",
+          "order": 10,
+          "slug": "recent",
+          "local": true
+        },
+        {
+          "name": "Current Series",
+          "order": 20,
+          "slug": "serie",
+          "local": true
+        },
+        {
+          "name": "Podcasts",
+          "order": 10,
+          "slug": "podcasts",
+          "local": true
+        },
+        {
+          "name": "Podcast Admin",
+          "order": 10,
+          "slug": "admin",
+          "local": true
+        }
+      ]
+    },
+    {
+      "name": "Jouarnal",
+      "description": "Discover Content",
+      "entries": [
+        {
+          "name": "Overview",
+          "order": 10,
+          "slug": "journal-en/"
+        }
+      ]
+    },
+    {
+      "name": "Give",
+      "description": "Find out how to support us",
+      "entries": [
+        {
+          "name": "Overview",
+          "order": 10,
+          "slug": "give"
+        }
+      ]
+    }
+
+  ],
+  "de": [
+    {
+      "name": "Über uns",
+      "description": "Lerne uns kennen",
+      "entries": [
+        {
+          "name": "Unsere Leitung",
+          "order": 10,
+          "slug": "ueber-uns/unsere-leitung/"
+        },
+        {
+          "name": "Unser Name",
+          "order": 20,
+          "slug": "ueber-uns/unser-name/"
+        },
+        {
+          "name": "Unser Glaube",
+          "order": 30,
+          "slug": "ueber-uns/unser-glaube/"
+        },
+        {
+          "name": "Unsere Grundwerte",
+          "order": 40,
+          "slug": "ueber-uns/unser-glaube/grundwerte/"
+        },
+        {
+          "name": "Info & Impressum",
+          "order": 50,
+          "slug": "kontakt"
+        },
+        {
+          "name": "Datenschutzerklärung",
+          "order": 60,
+          "slug": "datenschutzerklarung"
+        }
+
+      ]
+    },
+    {
+      "name": "Connect",
+      "description": "Connect with the Church",
+      "entries": [
+        {
+          "name": "Mitgliedschaft",
+          "order": 10,
+          "slug": "connecten/mitgliedschaft/"
+        },
+        {
+          "name": "Kleingruppen",
+          "order": 10,
+          "slug": "connecten/kleingruppen/"
+        },      
+        {
+          "name": "Menschen fördern",
+          "order": 10,
+          "slug": "connecten/menschen-foerdern/"
+        },      
+        {
+          "name": "Heimathafen",
+          "order": 10,
+          "slug": "connecten/heimathafen/"
+        },      
+        {
+          "name": "Royal Rangers 393",
+          "order": 10,
+          "slug": "https://rr393.de"
+        },      
+        {
+          "name": "Echtzeit",
+          "order": 10,
+          "slug": "connecten/echtzeit/"
+        },      
+        {
+          "name": "Junge Erwachsene",
+          "order": 10,
+          "slug": "junge-erwachsene/"
+        },      
+        {
+          "name": "Männerarbeit",
+          "order": 10,
+          "slug": "connecten/maennerarbeit/"
+        },      
+        {
+          "name": "Sommerlager",
+          "order": 10,
+          "slug": "connecten/sola/"
+        }
+      ]
+    }, 
+    {
+      "name": "Hör rein",
+      "description": "Höre unsere Predigen, Inputs und  Biblestudies oder lies Neues und Andachten",
+      "entries": [
+        {
+          "name": "Aktuelle Predigten",
+          "order": 10,
+          "slug": "recent",
+          "local": true
+        },
+        {
+          "name": "Aktuelle Serien",
+          "order": 20,
+          "slug": "serie",
+          "local": true
+        },
+        {
+          "name": "Podcasts",
+          "order": 10,
+          "slug": "podcasts",
+          "local": true
+        },
+        {
+          "name": "Podcast Admin",
+          "order": 10,
+          "slug": "admin",
+          "local": true
+        }
+      ]
+    },
+    {
+      "name": "Jouarnal",
+      "description": "Content enddecken",
+      "entries": [
+        {
+          "name": "Übersichtsseite",
+          "order": 10,
+          "slug": "journal/"
+        }
+      ]
+    },
+    {
+      "name": "Geben",
+      "description": "Wie du mit Spenden unterstützen kannst",
+      "entries": [
+        {
+          "name": "Übersichtsseite",
+          "order": 10,
+          "slug": "geben"
+        }
+      ]
+    }
+  ]
+}
diff --git a/server/api/menu.ts b/server/api/menu.ts
new file mode 100644
index 0000000..87d940d
--- /dev/null
+++ b/server/api/menu.ts
@@ -0,0 +1,5 @@
+import getMenu from '../menu';
+
+export default defineEventHandler( async (event) => {
+    return getMenu()
+})
\ No newline at end of file
diff --git a/server/menu.ts b/server/menu.ts
new file mode 100644
index 0000000..7db17bf
--- /dev/null
+++ b/server/menu.ts
@@ -0,0 +1,6 @@
+import fs from 'fs'
+import { DATA_PATH } from '~~/base/Constants';
+export default function getSettings() {
+  const data = fs.readFileSync(DATA_PATH + '/menu.json',{encoding:'utf8', flag:'r'});
+  return JSON.parse(data);
+}
diff --git a/tests/components/NavBar.test.ts b/tests/components/NavBar.test.ts
index 4de68b8..c1196dd 100644
--- a/tests/components/NavBar.test.ts
+++ b/tests/components/NavBar.test.ts
@@ -21,19 +21,18 @@ const i18n = createI18n({
   },
 })
 
-describe("NavBar", () => {
+describe.skip("NavBar", () => {
   const menu = [{
-    id: 0,
     name: "menu1",
     description: "menu1",
     entries: [
       {
-        id: 1,
+        order: 1,
         slug: "/hallo",
         name: "hallodu",
       },
       {
-        id: 2,
+        order: 2,
         slug: "#bye",
         name: "bye",
       },
@@ -56,7 +55,7 @@ describe("NavBar", () => {
     }
   })
 
-  it("Klick opens and closes menu",async () => {
+  it.only("Klick opens and closes menu",async () => {
     const wrapper = render(NavBar, { props: { menu }, 
       global: {
         plugins: [i18n],