+
+
+
+ )
+}
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
new file mode 100644
index 00000000..ad3bd08d
--- /dev/null
+++ b/src/Components/AppShell/SideBar.tsx
@@ -0,0 +1,209 @@
+import { useRef, useState } from 'react'
+import { useEffect } from 'react'
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+ Sidenav,
+ initTE,
+} from "tw-elements";
+import SidebarSubmenu from './SidebarSubmenu';
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import * as React from 'react';
+
+type route = {
+ path: string;
+ icon: JSX.Element;
+ name: string;
+ submenu?: route;
+}
+
+
+export function SideBar({routes} : {routes : route[]}) {
+
+ // prevent react18 from calling useEffect twice
+ const init = useRef(false)
+
+ const location = useLocation();
+
+ const [instance, setInstance] = useState
+
+
+
+
+ {isAuthenticated && token ?
+
+ :
+
+
+ {name}
+ +
+
+
+ }
+
+
+
+ setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
+ setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
+
+
+
+
+
+
+ {/** Route header */}
+
+ )
+}
+
+export default SidebarSubmenu
\ No newline at end of file
diff --git a/src/Components/AppShell/index.tsx b/src/Components/AppShell/index.tsx
new file mode 100644
index 00000000..7ec7304c
--- /dev/null
+++ b/src/Components/AppShell/index.tsx
@@ -0,0 +1,3 @@
+export {AppShell} from "./AppShell"
+export {SideBar} from "./SideBar"
+export {Content} from "./Content"
\ No newline at end of file
diff --git a/src/Components/Auth/authDirectus.tsx b/src/Components/Auth/authDirectus.tsx
new file mode 100644
index 00000000..b86e7926
--- /dev/null
+++ b/src/Components/Auth/authDirectus.tsx
@@ -0,0 +1,124 @@
+import { createContext, useState, useContext, useEffect } from "react";
+import * as React from "react";
+
+
+type AuthProviderProps = {
+ directus: any,
+ children?: React.ReactNode
+}
+
+type AuthCredentials = {
+ email: string;
+ password: string;
+ otp?: string | undefined;
+}
+
+
+
+export type MyUserItem = {
+ id: string;
+ avatar: string;
+ first_name: string;
+ description: string;
+ email: string;
+ password: string;
+}
+
+type AuthContextProps = {
+ isAuthenticated: Boolean,
+ user: MyUserItem | null;
+ login: (credentials: AuthCredentials) => Promise setIsExpanded(!isExpanded)}>
+ {icon} {name}
+
+
+ {/** Submenu list */}
+
+
+ -
+ {
+ submenu.map((m, k) => {
+ return(
+
- + + {m.icon}{m.name} + { + location.pathname == m.path ? () : null + } + + + ) + }) + } +
Herzlich Willkommen, schön dass du da bist!
+
+ Wir erschaffen zusammen eine Welt, in der wir frei und menschlich zusammen leben dürfen.
+ Dafür bauen wir ein Netzwerk in dem wir uns im echten Leben begegnen und helfen
+ ... ganz ohne Geld 😉
+
+ Hast du Lust mitzumachen?
+
+
+
+ )
+}
+
+export function Welcome2({ clickAction }: ModalProps) {
+ return (
+ <>
+ Veränderung passiert im echten Leben
+
+ Mal ganz ehrlich: 99% unser Zeit am Bildschirm ist sinnlose Zeit- und Energie-Verschwendung.
+
+ Darum tauchen wir wieder in das echte Leben ein und nutzen digitale Medien nur dort, wo sie uns wirklich helfen in echt zusammen zu kommen
+
+
+
+ )
+}
+
+export function Welcome3({ clickAction }: ModalProps) {
+ return (
+ <>
+ Gemeinsam erschaffen wir Strukturen
+-
+
- 🥕 Essen & Trinken +
- 🏡 Wohn- & Lebensraum +
- 💬 Kommunikation +
- 💡 Energie +
- 🚐 Mobilität +
+
+
+
+ )
+}
+
+
+export function Modal() {
+
+ const [chapter, setChapter] = useState