Erste Schritte Navigation
This commit is contained in:
92
app.vue
92
app.vue
@ -1,5 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="main-container">
|
||||||
<NuxtPage />
|
<div class="sidenav">
|
||||||
|
<div class="sidenav-content">
|
||||||
|
<h1 class="menu-heading">
|
||||||
|
WebAdmin
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
<router-link to="/">
|
||||||
|
Home
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/adresses">
|
||||||
|
Adressverwaltung
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script></script>
|
||||||
|
<style scoped>
|
||||||
|
.main-container {
|
||||||
|
max-width: 70vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position and style the close button (top right corner) */
|
||||||
|
.sidenav .closebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 25px;
|
||||||
|
font-size: 36px;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
|
||||||
|
#main {
|
||||||
|
transition: margin-left .5s;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
14
index.html
Normal file
14
index.html
Normal file
@ -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="/main.css" />
|
||||||
|
<title>WebAdmin</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
pages/adresses.vue
Normal file
12
pages/adresses.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="heading">
|
||||||
|
<h1>
|
||||||
|
Willkommen in der Adressverwaltung
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p>fill this with content</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
194
pages/index.vue
194
pages/index.vue
@ -1,195 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main-container">
|
<div class="index">
|
||||||
<div class="heading">
|
<h1>Willkommen</h1>
|
||||||
<h1 class="heading__title">
|
|
||||||
Welcome to your new <span class="gradient__text">sidebase</span> app!
|
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</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>
|
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
68
public/main.css
Normal file
68
public/main.css
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
.main-container {
|
||||||
|
max-width: 45vw;
|
||||||
|
margin: auto;
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The navigation menu links */
|
||||||
|
.sidenav a {
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position and style the close button (top right corner) */
|
||||||
|
.sidenav .closebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 25px;
|
||||||
|
font-size: 36px;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
|
||||||
|
#main {
|
||||||
|
transition: margin-left .5s;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;}
|
||||||
|
}
|
||||||
|
|
||||||
19
router/index.js
Normal file
19
router/index.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import index from '@/pages/index.vue'
|
||||||
|
import adresses from '@/pages/adresses.vue'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ path: '/', name: 'Home', component: index },
|
||||||
|
{ path: '/adresses', name: 'Adressverwaltung', component: adresses }
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
const app = createApp({})
|
||||||
|
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
export default router
|
||||||
Reference in New Issue
Block a user