wide layout

frontend/node_modules/.vite/deps/_metadata.json

@@ -1,25 +1,25 @@
 {
-  "hash": "74ee2b3b",
-  "configHash": "7ba34175",
+  "hash": "09d4df21",
+  "configHash": "4d3b8235",
   "lockfileHash": "2df9fa13",
-  "browserHash": "5d25d1a0",
+  "browserHash": "c015ea55",
   "optimized": {
     "axios": {
       "src": "../../axios/index.js",
       "file": "axios.js",
-      "fileHash": "5760348d",
+      "fileHash": "ae726a1d",
       "needsInterop": false
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "668d3806",
+      "fileHash": "1e75593f",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../vue-router/dist/vue-router.mjs",
       "file": "vue-router.js",
-      "fileHash": "bbe7f140",
+      "fileHash": "62152408",
       "needsInterop": false
     }
   },

frontend/node_modules/.vue-global-types/vue_3.5_false.d.ts

@@ -85,13 +85,13 @@ export {};
 		index: number,
 	][];
 	function __VLS_getVForSourceType<T extends { [Symbol.iterator](): Iterator<any> }>(source: T): [
-		item: T extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never,
+		item: T extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never, 
 		key: number,
 		index: undefined,
 	][];
 	// #3845
 	function __VLS_getVForSourceType<T extends number | { [Symbol.iterator](): Iterator<any> }>(source: T): [
-		item: number | (Exclude<T, number> extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never),
+		item: number | (Exclude<T, number> extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never), 
 		key: number,
 		index: undefined,
 	][];
@@ -111,7 +111,6 @@ export {};
 			: __VLS_unknownDirective;
 	function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
 	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
-	function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
 	function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
 		T extends new (...args: any) => any
 		? (props: (K extends { $props: infer Props } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & { __ctx?: {

frontend/src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="app">
     <Menu />
-    <router-view />
+     <!-- Main Content Area -->
+     <main class="main-content">
+      <router-view />
+    </main>
   </div>
 </template>
 
@@ -15,6 +18,7 @@ export default {
 };
 </script>
 
+<style src="./assets/main.css"></style>
 <style>
 /* Global styles can go here */
 </style>

frontend/src/assets/main.css

@@ -33,3 +33,60 @@ a,
     padding: 0 2rem;
   }
 }
+
+/* Top Navigation Bar */
+.top-nav {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: var(--vt-c-black-soft); /* Use your palette from base.css */
+  color: var(--vt-c-white);
+  height: 60px;
+  width: 100%; /* Full width */
+  position: fixed; /* Fix it to the top */
+  top: 0;
+  z-index: 1000;
+  padding: 0 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.top-nav ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  padding: 0;
+  margin: 0;
+}
+
+.top-nav li a {
+  text-decoration: none;
+  color: var(--vt-c-white);
+  font-size: 1rem;
+  transition: color 0.3s;
+}
+
+.top-nav li a:hover {
+  color: var(--vt-c-indigo); /* Highlight on hover */
+}
+
+/* Main Content Area */
+.main-content {
+  margin-top: 60px; /* Prevent content from overlapping the nav */
+  padding: 20px;
+  width: 100%; /* Full width */
+  box-sizing: border-box;
+  background-color: var(--color-background); /* Use palette from base.css */
+  min-height: calc(100vh - 60px); /* Fill the remaining height */
+}
+
+@media (max-width: 768px) {
+  .top-nav {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .top-nav ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/components/CharacterDetails.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Character Details</h1>
+    <p>ID: {{ character.id }}</p>
+    <p>Name: {{ character.name }}</p>
+    <p>Race: {{ character.rasse }}</p>
+    <p>Typ: {{ character.typ }}</p>
+    <p>Grad: {{ character.grad }}</p>
+    <p>Besitzer: {{ character.owner }}</p>
+    <p>öffentlich: {{ character.public }} </p>
+    <router-link to="/dashboard">Back to Character List</router-link>
+  </div>
+</template>
+
+<script>
+import API from '../utils/api'
+
+export default {
+  name: "CharacterDetails",
+  props: ["id"], // Receive the route parameter as a prop
+  data() {
+    return {
+      character: {},
+    };
+  },
+  async created() {
+    const token = localStorage.getItem('token')
+    const response = await API.get(`/api/characters/${this.id}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    this.character = response.data
+  },
+};
+</script>

frontend/src/components/CharacterList.vue

@@ -2,7 +2,9 @@
   <div>
     <h2>Your Characters</h2>
     <ul>
-      <li v-for="character in characters" :key="character.character_id">
+      <li v-for="character in characters" :key="character.character_id" style="white-space: nowrap; /* Prevent line breaks inside list items */;">
+        <!-- Link to Character Details -->
+        <router-link :to="`/character/${character.id}`">View Details</router-link>
         {{ character.name }} ({{ character.rasse }}, {{ character.typ }}, {{ character.grad }}, {{ character.owner }}, {{ character.public }} )
         <button @click="goToAusruestung(character.character_id)">Manage Equipment</button>
       </li>

frontend/src/components/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="menu">
+  <nav class="top-nav"><!---<nav class="menu"> --->
     <ul>
       <li>
         <router-link to="/dashboard" active-class="active">Dashboard</router-link>

frontend/src/router/index.js

@@ -6,6 +6,8 @@ import DashboardView from "../views/DashboardView.vue";
 import AusruestungView from "../views/AusruestungView.vue";
 import FileUploadPage from "../views/FileUploadPage.vue";
 
+import CharacterDetails from "@/components/CharacterDetails.vue";
+
 
 
 
@@ -15,6 +17,8 @@ const routes = [
   { path: "/dashboard", name: "Dashboard", component: DashboardView, meta: { requiresAuth: true } },
   { path: "/ausruestung/:characterId", name: "Ausruestung", component: AusruestungView, meta: { requiresAuth: true } },
   { path: "/upload", name: "FileUpload", component: FileUploadPage },
+  // Route for character details  // Pass route params as props to the component
+  {    path: "/character/:id",     name: "CharacterDetails",    component: CharacterDetails,    props: true, meta: { requiresAuth: true }   },
 ];
 
 const router = createRouter({

frontend/src/views/CharacterView.vue

@@ -0,0 +1,11 @@
+<template>
+  <CharacterForm :characterId="$route.params.characterId" />
+</template>
+
+<script>
+import CharacterForm from '../components/CharacterDetails.vue'
+
+export default {
+  components: { CharacterForm },
+}
+</script>