Zwischenspeicher

app.vue

@@ -1,5 +1,11 @@
 <template>
-  <div>
+  <NuxtLayout>
     <NuxtPage />
-  </div>
+  </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+
+</script>
+
+<style src="@/assets/main.css"></style>

assets/main.css

@@ -0,0 +1,124 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Helvetica";
+}
+
+.main-content {
+  margin-left: 275px;
+  margin-top: 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+#title {
+  padding-bottom: 10px;
+}
+
+/* Header */
+.header {
+  background-color: #a5aeb5;
+  width: 100%;
+  margin-left: 250px;
+}
+
+#header-table th {
+  text-transform: uppercase;
+  text-align: left;
+  padding: 8px;
+  min-width: 20px;
+}
+
+#header-table tr {
+  min-width: 20px;
+}
+
+#header-table td {
+  text-align: left;
+  padding: 8px;
+}
+
+/* The navigation menu links */
+.header a {
+  text-decoration: none;
+  font-size: 18px;
+  color: #e0e2e3;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.header a:hover {
+  color: #f1f1f1;
+}
+
+/* The side navigation menu */
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #a5aeb5;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+.sidenav-content {
+  padding: 15px;
+}
+
+/* The menu title */
+.menu-heading {
+  color: #f1f1f1;
+  width: 200px;
+  height: 75px;
+  font-weight: 600;
+  font-size: 40px;
+  text-align: center;
+}
+
+/* The navigation menu links */
+.sidenav a {
+  text-decoration: none;
+  font-size: 25px;
+  color: #e0e2e3;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* Address Table */
+.address-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.address-table th,
+.address-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.address-table th {
+  background-color: #f2f2f2;
+  color: #333;
+}
+
+
+
+
+
+
+

assets/search.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.749 513.749" style="enable-background:new 0 0 513.749 513.749;" xml:space="preserve" width="512" height="512">
+<g>
+	<path d="M504.352,459.061l-99.435-99.477c74.402-99.427,54.115-240.344-45.312-314.746S119.261-9.277,44.859,90.15   S-9.256,330.494,90.171,404.896c79.868,59.766,189.565,59.766,269.434,0l99.477,99.477c12.501,12.501,32.769,12.501,45.269,0   c12.501-12.501,12.501-32.769,0-45.269L504.352,459.061z M225.717,385.696c-88.366,0-160-71.634-160-160s71.634-160,160-160   s160,71.634,160,160C385.623,314.022,314.044,385.602,225.717,385.696z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>

components/HeaderNav.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="header">
+    <table id="header-table">
+      <tr>
+        <th>
+          <NuxtLink to="/header/help">
+            Hilfe
+          </NuxtLink>
+        </th>
+        <th>
+          <NuxtLink to="/header/info">
+            Info
+          </NuxtLink>
+        </th>
+        <th> Logout </th>
+      </tr>
+    </table>
+  </div>
+</template>

components/SideNav.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="sidenav">
+    <div class="sidenav-content">
+      <h1 class="menu-heading">
+        WebAdmin
+      </h1>
+      <NuxtLink to="/">
+        Home
+      </NuxtLink>
+      <NuxtLink to="/address-management/address_index">
+        Adressverwaltung
+      </NuxtLink>
+    </div>
+  </div>
+</template>

data/addressData.json

@@ -0,0 +1,36 @@
+{
+  "items":
+[
+  {
+  "id": 1,
+  "customernumber": "0000",
+  "name": "Dieter Hillers",
+  "company": "Hedemann GmbH",
+  "street": "Oldenburger Str. 28",
+  "postalcode": "26639",
+  "location": "Wiesmoor",
+  "phone": "04944-1450"
+  },
+  {
+  "id": 2,
+  "customernumber": "1111",
+  "name": "Holger Hedemann",
+  "company": "Hedemann GmbH",
+  "street": "Oldenburger Str. 28",
+  "postalcode": "26639",
+  "location": "Wiesmoor",
+  "phone": "04944-1450"
+  },
+  {
+  "id": 3,
+  "customernumber": "2222",
+  "name": "Hilko Hartmann",
+  "company": "Hedemann GmbH",
+  "street": "Oldenburger Str. 28",
+  "postalcode": "26639",
+  "location": "Wiesmoor",
+  "phone": "04944-1450"
+  }
+]
+}
+

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-witdh, initial-scale=1.0" />
+        <link rel="stylesheet" href="assets/main.css">
+        <title>WebAdmin</title>
+    </head>
+    <body>
+        <div id="app">
+            <script type="module" src="/main.js"></script>
+        </div>
+    </body>
+</html>

layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <HeaderNav />
+    <SideNav />
+    <slot />
+  </div>
+</template>

main.jsx

@@ -0,0 +1,2 @@
+import './assets/main.css'
+// require('@/assets/main.css')

nuxt.config.ts

@@ -3,6 +3,9 @@ export default defineNuxtConfig({
   modules: [
     '@huntersofbook/naive-ui-nuxt'
   ],
+  css: [
+    '@/assets/main.css'
+  ],
   build: {
     transpile: [
       'trpc-nuxt'

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "webadmin3.0",
+  "name": "WebAdmin3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

pages/address-management/address_index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="main-content">
+    <h1 id="title">
+      Willkommen in der Adressverwaltung
+    </h1>
+  </div>
+</template>
+
+<script lang="ts">
+
+</script>

pages/header/help.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="main-content">
+    <h1 id="title">
+      Hilfe
+    </h1>
+    <div class="content">
+      <p>Hier findest du Hilfe</p>
+    </div>
+  </div>
+</template>

pages/header/info.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="main-content">
+    <h1 id="title">
+      Info
+    </h1>
+
+    <div class="content">
+      <p>Hier findest du Infos</p>
+    </div>
+  </div>
+</template>

pages/index.vue

@@ -1,195 +1,7 @@
 <template>
-  <div class="main-container">
+  <div class="main-content">
-    <div class="heading">
+    <h1 id="title">
-      <h1 class="heading__title">
+      Willkommen
-        Welcome to your new <span class="gradient__text">sidebase</span> app!
+    </h1>
-      </h1>
-      <p class="heading__credits">
-        Read our documentation <a href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
-        Get started in no time with the following amazing modules:
-      </p>
-    </div>
-    <div class="cards">
-      <div class="card prisma__card">
-        <div class="card__body">
-          <h2 class="card__title">
-            Prisma ORM
-          </h2>
-          <p>
-            Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
-          </p>
-        </div>
-        <p class="card__action">
-          <a class="card__link" href="https://sidebase.io/sidebase/components/prisma" target="_blank">
-            TEST
-          </a>
-          <a class="card__link" href="/prisma" target="_blank">
-            See example
-          </a>
-        </p>
-      </div>
-      <div class="card trpc__card">
-        <div class="card__body">
-          <h2 class="card__title">
-            tRPC
-          </h2>
-          <p>
-            tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.
-          </p>
-        </div>
-        <p class="card__action">
-          <a class="card__link" href="https://sidebase.io/sidebase/components/trpc" target="_blank">
-            Read documentation
-          </a>
-          <a class="card__link" href="/trpc" target="_blank">
-            See example
-          </a>
-        </p>
-      </div>
-      <div class="card naiveui__card">
-        <div class="card__body">
-          <h2 class="card__title">
-            NaiveUI
-          </h2>
-          <p>
-            A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.
-          </p>
-        </div>
-        <p class="card__action">
-          <a class="card__link" href="https://www.naiveui.com/en-US/os-theme" target="_blank">
-            Read documentation
-          </a>
-        </p>
-      </div>
-    </div>
   </div>
 </template>
-
-<style scoped>
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    background-color: #eefbfc;
-    color: #484848;
-  }
-
-  .main-container {
-    max-width: 45vw;
-    margin: auto;
-    padding-top: 60px;
-  }
-
-  /* HEADING */
-
-  .heading {
-    text-align: center;
-  }
-
-  .heading__title {
-    font-weight: 600;
-    font-size: 40px;
-  }
-
-  .gradient__text {
-    background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
-    background-size: 200% auto;
-    color: #000;
-    background-clip: text;
-    text-fill-color: transparent;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: shine 1s linear infinite;
-  }
-
-  @keyframes shine {
-    to {
-        background-position: 200% center;
-    }
-  }
-
-  .heading__credits {
-    color: #888888;
-    font-size: 25px;
-    transition: all 0.5s;
-  }
-
-  .heading__credits a {
-    text-decoration: underline;
-  }
-
-  /* CARDS */
-  .cards {
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    margin-top: 30px;
-  }
-
-  .card {
-    padding: 20px;
-    width: 100%;
-    min-height: 200px;
-    display: grid;
-    grid-template-rows: 20px 50px 1fr 50px;
-    border-radius: 10px;
-    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
-    transition: all 0.2s;
-    cursor: default;
-  }
-
-  .card:hover {
-    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
-    transform: scale(1.01);
-  }
-
-  .card__link {
-    position: relative;
-    text-decoration: underline;
-    color: rgba(255, 255, 255, 0.9);
-  }
-
-  .card__title {
-    font-weight: 400;
-    color: #ffffff;
-    font-size: 30px;
-  }
-
-  .card__body {
-    grid-row: 2/4;
-  }
-
-  .card__body p {
-    color: #ffffff;
-  }
-
-  .card__action {
-    grid-row: 5/6;
-    align-self: center;
-    display: flex;
-    gap: 20px
-  }
-
-  /* RESPONSIVE */
-
-  @media (max-width: 1600px) {
-    .main-container {
-        max-width: 100vw;
-        padding: 50px;
-    }
-
-    .cards {
-        justify-content: center;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-  }
-
-    .prisma__card { background: radial-gradient(#3fbafe, #5A67D8FF); }
-    .trpc__card { background: radial-gradient(#a07ccf, #926dc2); }
-    .naiveui__card { background: radial-gradient(#ad6434, #995020); }
-</style>

pages/prisma.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const { data: examples } = useFetch('/api/examples')
-</script>
-
-<template>
-  <div>
-    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
-  </div>
-</template>

pages/trpc.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const { $client } = useNuxtApp()
-
-const hello = await $client.hello.useQuery({ text: 'client' })
-</script>
-
-<template>
-  <div>
-    <!-- As `superjson` is already pre-configured, we can use `time` as a `Date` object without further deserialization 🎉 -->
-    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
-  </div>
-</template>