changes

src/components/client/admin/adminPanel.tsx

@@ -1,23 +1,67 @@
 'use client'
-import { ReactNode, useContext } from "react";
+import { ReactNode, useContext, useState } from "react";
 import { AuthContext, AuthProps } from "@/providers/providers";
 import SomeServerSubComponent from "@/components/server/admin/serverContextUserTest";
+import PostView from "@/components/server/admin/views/PostView";
+import Sidebar from "./views/sidebar";
+import ClientPostView from "./views/ClientPostView";
+import ServerComponentTest from "@/components/server/ServerComponentTest";
+
 
 interface Props {
     children?: ReactNode;
     auth?: AuthProps;
 }
 
+
+export type SidebarEntry = {
+    label:string;
+    view:string;
+}
+
+
+export const sidebarEntries:Array<SidebarEntry> = [
+    { label: 'Home', view: 'home'},
+    { label: 'Post Management', view: 'man-post'},
+    { label: 'Project Management', view: 'man-proj'},
+    { label: 'Tag Management', view: 'man-tags'},
+    { label: 'User Management', view: 'man-user'},
+]
+
+function Home(){
+    return <div>home</div>
+}
+function PostManager(){
+    return <div>posts</div>
+}
+
+
+const viewMap = new Map<string, ReactNode>([
+    ['home', <Home></Home>],
+    ['man-post', <ClientPostView></ClientPostView>]
+])
+
+
+
 export default function AdminPanel(props:Props){
-    
+    const [view, setView] = useState((<Home></Home>) as ReactNode);
+
+    const switchView = function (value:string){
+        setView(viewMap.get(value));
+    }    
+
     return (
-        <div className="AdminPanelWrapper">
-            <h1>Super Secret Admin Panel!</h1>
-            <h2>this is where we use the context test:<SomeSubComponent></SomeSubComponent></h2>
-            <SomeServerSubComponent></SomeServerSubComponent>
-            <section>
-                {props.children}
-            </section>
+        <div className="AdminPanelWrapper w-[100%] h-[100%] flex flex-row">
+            {/* <h1>Super Secret Admin Panel!</h1> */}
+            {/* <h2>this is where we use the context test:<SomeSubComponent></SomeSubComponent></h2> */}
+            {/* <SomeServerSubComponent></SomeServerSubComponent> */}
+            {/* <section> */}
+                {/* {props.children} */}
+                {/* <PostView></PostView> */}
+            {/* </section> */}
+            <Sidebar sidebarEntries={sidebarEntries} switchView={switchView}></Sidebar>
+            <div>{view}</div>
+            <ServerComponentTest></ServerComponentTest>
         </div>
     )
 }

src/components/client/admin/entryEditor.tsx

@@ -0,0 +1,9 @@
+
+
+export default function EntryEditor(){    
+    return (
+        <div className='w[100%] h[100%] bg-primary-800'>
+            Entries
+        </div>
+    );
+}

src/components/client/admin/views/ClientPostView.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import ServerComponentTest from "@/components/server/ServerComponentTest";
+import { ReactNode } from "react";
+
+type Props = {
+    children?:ReactNode
+}
+
+export default function ClientPostView(props:Props){
+    return (
+        <div>
+            test
+        </div>
+    );
+}

src/components/client/admin/views/sidebar.css

@@ -0,0 +1,90 @@
+body {
+    min-height: 100vh;
+    min-height: -webkit-fill-available;
+  }
+  
+  html {
+    height: -webkit-fill-available;
+  }
+  
+  main {
+    display: flex;
+    flex-wrap: nowrap;
+    height: 100vh;
+    height: -webkit-fill-available;
+    max-height: 100vh;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  
+  .b-example-divider {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .1);
+    border: solid rgba(0, 0, 0, .15);
+    border-width: 1px 0;
+    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+  }
+  
+  .bi {
+    vertical-align: -.125em;
+    pointer-events: none;
+    fill: currentColor;
+  }
+  
+  .dropdown-toggle { outline: 0; }
+  
+  .nav-flush .nav-link {
+    border-radius: 0;
+  }
+  
+  .btn-toggle {
+    display: inline-flex;
+    align-items: center;
+    padding: .25rem .5rem;
+    font-weight: 600;
+    color: rgba(0, 0, 0, .65);
+    background-color: transparent;
+    border: 0;
+  }
+  .btn-toggle:hover,
+  .btn-toggle:focus {
+    color: rgba(0, 0, 0, .85);
+    background-color: #d2f4ea;
+  }
+  
+  .btn-toggle::before {
+    width: 1.25em;
+    line-height: 0;
+    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+    transition: transform .35s ease;
+    transform-origin: .5em 50%;
+  }
+  
+  .btn-toggle[aria-expanded="true"] {
+    color: rgba(0, 0, 0, .85);
+  }
+  .btn-toggle[aria-expanded="true"]::before {
+    transform: rotate(90deg);
+  }
+  
+  .btn-toggle-nav a {
+    display: inline-flex;
+    padding: .1875rem .5rem;
+    margin-top: .125rem;
+    margin-left: 1.25rem;
+    text-decoration: none;
+  }
+  .btn-toggle-nav a:hover,
+  .btn-toggle-nav a:focus {
+    background-color: #d2f4ea;
+  }
+  
+  .scrollarea {
+    overflow-y: auto;
+  }
+  
+  .fw-semibold { font-weight: 600; }
+  .lh-tight { line-height: 1.25; }
+  

src/components/client/admin/views/sidebar.tsx

@@ -0,0 +1,30 @@
+import './sidebar.css'
+import { Button, NavLink } from 'react-bootstrap';
+import { SidebarEntry } from '../adminPanel';
+import React, { ReactNode, useState } from 'react';
+
+
+
+
+type Props = {
+    children?:ReactNode;
+    sidebarEntries:Array<SidebarEntry>;
+    switchView:any;
+}
+
+
+
+export default function Sidebar(props:Props){
+    
+    return (
+        <div className='w[100%] h[100%] bg-secondary-800'>
+            <ul className='nav nav-pills flex-column mb-auto container-fluid'>
+                {props.sidebarEntries.map((sidebarEntry)=>{
+                    return <li className='nav-item'><NavLink className='nav-link bg-purple-400 m-2' onClick={(e)=>{props.switchView(sidebarEntry.view)}}>
+                        {sidebarEntry.label}
+                    </NavLink></li>
+                })}
+            </ul>
+        </div>
+    );
+}

src/components/server/admin/authHandler.tsx

@@ -40,8 +40,8 @@ export default async function AuthHandler(props: Props) {
     }
 
     return (
-        <div className="flex flex-row">
-            {!(koek && await serverValidateSessionCookie(koek)) ? <LoginForm>{ }</LoginForm> : <ClientAuthHandler authProps={p}><section>{props.children}<div>signed in! :D</div></section></ClientAuthHandler>}
+        <div className="flex flex-row w-[100%] h-[100%]">
+            {!(koek && await serverValidateSessionCookie(koek)) ? <LoginForm>{ }</LoginForm> : <ClientAuthHandler authProps={p}>{props.children}</ClientAuthHandler>}
         </div>
     );
 }

src/components/server/admin/authWrapper.tsx

@@ -0,0 +1,47 @@
+'use server'
+import { cookies } from "next/headers";
+
+import LoginForm            from "@/components/client/admin/loginForm";
+import AdminPanel           from "@/components/client/admin/adminPanel";
+import ClientAuthHandler    from "@/components/client/admin/clientAuthHandler";
+
+import { serverValidateSessionCookie } from "@/app/lib/actions";
+import { constructAPIUrl } from "@/util/Utils";
+import { ReactNode } from "react";
+import { AuthContext, AuthProps } from "@/providers/providers";
+
+
+interface Props {
+    children?: ReactNode;
+    params?: any;
+    requiredRole?: number;
+} // We interfacing lads
+
+
+export default async function AuthHandler(props: Props) {
+    const protoKoek = await cookies().get('auth')?.value;
+    const koek = decodeURIComponent(protoKoek ? protoKoek: "");
+    console.log("koekje:" + koek)
+    let p:AuthProps = {
+        test:"not pog"
+    };
+    if(koek){
+        const kd = JSON.parse(koek);
+        if(kd.id && kd.token && kd.user_id){
+            p = {
+                test:"success!",
+                auth: {
+                    id:kd.id,
+                    token:kd.token,
+                    user_id:kd.user_id
+                }
+            }
+        }
+    }
+
+    return (
+        <div className="flex flex-row">
+            {!(koek && await serverValidateSessionCookie(koek)) ? <LoginForm>{ }</LoginForm> : <ClientAuthHandler authProps={p}><section>{props.children}</section></ClientAuthHandler>}
+        </div>
+    );
+}

src/components/server/admin/views/PostView.tsx

@@ -0,0 +1,21 @@
+'use server'
+
+import { ReactNode } from "react"
+import AuthHandler from "../authHandler"
+import { Post } from "@/model/Post"
+import { constructAPIUrl } from "@/util/Utils"
+
+type Props = {
+    children?:ReactNode
+}
+
+export default async function PostView(props:Props){
+    // const posts = await Post.findAll();
+
+    
+    return (
+        <div>
+            test
+        </div>
+    );
+}