src/app/admin/[[...slug]]/page.tsx

@@ -4,42 +4,59 @@ import AuthHandler from "@/components/server/admin/authHandler";
 import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar";
 import { ProjectView } from "@/components/views/admin/project";
 import { PostView } from "@/components/views/admin/post";
-import { redirect } from "next/navigation";
+import { redirect } from 'next/navigation'
 import { ReactNode } from "react";
-import {
+
-	IOptionalChildrenProps,
+function Home() {
-	ISlugArrayProps,
+	return <div>home</div>;
-} from "@/components/shared/props";
+}
+function PostManager() {
+	return <PostView></PostView>;
+}
+function ProjectManager() {
+	return <ProjectView></ProjectView>;
+}
 
 const viewMapRecords: Record<string, ReactNode> = {
-	home: <div>home</div>,
+	"home": <Home key={0}/>,
-	"man-post": <PostView />,
+	"man-post": <PostManager key={1}/>,
-	"man-proj": <ProjectView />,
+	"man-proj": <ProjectManager key={2}/>
+}
+
+const sidebarEntries: 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 getCurrentView(view: string): ReactNode {
+	const viewJSX = viewMapRecords[view || "home"];
+	return viewJSX;
+}
+
+type Props = {
+	params: {
+		slug: string[];
+	};
 };
 
-interface AdminPageProps extends ISlugArrayProps, IOptionalChildrenProps {}
+export default async function Page({ params: { slug = ["home"] } }: Props) {
-
+	if (
-export default async function Page({
+		(await sidebarEntries)
-	params: { slug = ["home"] },
+			.map((entry) => entry.view)
-}: AdminPageProps) {
+			.indexOf(slug.toString()) < 0
-	const sidebarEntries: SidebarEntry[] = [
+	) redirect("/admin/")
-		{ 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" },
-	];
-	if (sidebarEntries.map((entry) => entry.view).indexOf(slug.toString()) < 0)
-		redirect("/admin/");
 	return (
 		<main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
 			<AuthHandler params={null}>
 				<Sidebar
 					sidebarEntries={sidebarEntries}
-					params={{ slug: slug.toString() }}
+					slug={slug.toString()}
-				/>
+				></Sidebar>
 				<div className="AdminPanelWrapper flex flex-col p-2">
-					{viewMapRecords[slug.toString() || "home"]}
+					{getCurrentView(slug.toString())}
 				</div>
 			</AuthHandler>
 			{/* <section>{JSON.stringify(cookies().getAll())}</section> */}

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

@@ -1,44 +1,38 @@
-import "./sidebar.css";
+import './sidebar.css'
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
-import Link from "next/link";
+import Link from 'next/link';
-import { IOptionalChildrenProps, ISlugProps } from "@/components/shared/props";
+
 
 export type SidebarEntry = {
-	label: string;
+    label:string;
-	view: string;
+    view:string;
-};
+  }
 
-interface Props extends ISlugProps {
+type Props = {
-	sidebarEntries: Array<SidebarEntry>;
+    children?:ReactNode;
+    sidebarEntries:Array<SidebarEntry>;
+    slug:string
 }
 
-export default async function Sidebar({
+
-	sidebarEntries,
+
-	params: { slug },
+export default async function Sidebar({children, sidebarEntries, slug}:Props){
-}: Props) {
+    
-	return (
+    return (
-		<div className="w-fit h[100%] drop-shadow-2xl shadow-xl">
+        <div className='w-fit h[100%] drop-shadow-2xl shadow-xl'>
-			<ul
+            <ul className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}>
-				className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}
+                {sidebarEntries.map((sidebarEntry)=>{
-			>
+                    const activeClass:string = (slug == sidebarEntry.view) ? 'active' : '';
-				{sidebarEntries.map((sidebarEntry) => {
+                    return <li 
-					const activeClass: string =
+                    key={sidebarEntry.view} 
-						slug == sidebarEntry.view ? "active" : "";
+                    className='nav-item w-[100%]'>
-					return (
+                        <Link 
-						<li
+                            href={`/admin/${sidebarEntry.view}`}
-							key={sidebarEntry.view}
+                            className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}>
-							className="nav-item w-[100%]"
+                            {sidebarEntry.label}
-						>
+                        </Link></li>
-							<Link
+                })}
-								href={`/admin/${sidebarEntry.view}`}
+            </ul>
-								className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}
+        </div>
-							>
+    );
-								{sidebarEntry.label}
-							</Link>
-						</li>
-					);
-				})}
-			</ul>
-		</div>
-	);
 }

src/components/shared/props/ChildrenProps.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from "react";
-
-export interface IChildrenProps{
-    children: ReactNode;
-}
-export interface IOptionalChildrenProps{
-    children?: ReactNode;
-}

src/components/shared/props/SlugProps.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-
-export interface ISlugProps{
-    params: {
-        slug: string
-    };
-}
-export interface ISlugArrayProps{
-    params: {
-        slug: string[]
-    };
-}

src/components/shared/props/index.ts

@@ -1,2 +0,0 @@
-export * from "./ChildrenProps";
-export * from "./SlugProps";