Header-Coloring-SideBar-Redirects

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

@@ -25,7 +25,7 @@ export default async function GetMarkdownPageView({ params }: StaticSlugParams)
     const MdxData = blogs[slg.join("/")];
     return (
         <div className="m-[1%] flex">
-            <article>
+            <article className="w-full">
                 <MdxData />
             </article>
             {/* <div className="border-opacity-20 my-10 border-gray-400 border-l-2 ml-[2%] float-right min-w-40 max-w-60 w-[40%]" style={{visibility:isMobile()?"hidden":"visible"}}></div> */}

src/app/not-found.tsx

@@ -0,0 +1,10 @@
+
+export default function NotFound(){
+    return <div className="m-[1%] my-10 content-center">
+        <div className="text-center">
+            <p style={{fontSize:60}}>404 Not found</p>
+            <hr className="m-5"/>
+            <p className="text-xl">This is not page what are you looking for.</p>
+        </div>  
+    </div>
+}

src/components/BaseView.tsx

@@ -6,7 +6,7 @@ export default function BaseView(data: { children: any[] | any, sideBarOptions:
   return <div className="w-full sm:flex">
     <SideBar options={data.sideBarOptions} />
     <div className="w-full overflow-y-auto">
-      <main className="min-h-[calc(100vh-8.5rem)] p-[calc(1%+0.5rem)] w-full mt-[3.5rem] break-all">
+      <main className="min-h-[calc(100vh-8.5rem)] p-[calc(1%+0.5rem)] w-full mt-[3.5rem]">
         {data.children}
       </main>
       <Footer />

src/components/aside/aside.tsx

@@ -14,7 +14,11 @@ export default function SideBar(params: { options: SideBarOptions }) {
     //TODO : Fix Re-Rendering Of Component on Resize With Memo
     //const mobile = isMobile()
 
-    const [expanded, setExpanded] = useState(true)
+    const [expanded, setExpanded] = useState(true);
+
+    useEffect(()=>{
+        (window as any).__sidebar = ()=>setExpanded(!expanded);
+    })
 
     const container = {
         hidden: { opacity: 1, scale: 0 },
@@ -64,23 +68,27 @@ export default function SideBar(params: { options: SideBarOptions }) {
     }
 
     return <>
-        <aside className="shadow-md z-50">
-            <button className="fixed top-2 left-2 z-50" onClick={() => setExpanded(!expanded)}>
-                <svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
-            </button>
-            <AnimatePresence>
-                {expanded &&
-                    <>
-                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 0.40 }} exit={{ opacity: 0 }} className="visible sm:hidden bg-black fixed w-[100vw] h-[100vh] z-0" onClick={() => setExpanded(!expanded)} />
-                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="min-w-[14rem] max-w-[15rem] top-10 h-full float-left">
-                            <div className="z-50 fixed top-14 h-[calc(100%-50px)] overflow-y-auto border-t-0 border min-w-[14rem] max-w-[15rem] border-highlight bg-secondary float-left">
-                                <motion.div variants={container} initial="hidden" animate="visible" className="flex my-1.5 flex-col px-3">
-                                    {arrayComponents}
-                                </motion.div>
-                            </div>
-                        </motion.div>
-                    </>}
-            </AnimatePresence>
+        <aside className="mt-[3.5rem]">
+                <AnimatePresence>
+                    {expanded &&
+                        <>
+                            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 0.40 }} exit={{ opacity: 0 }} className="visible sm:hidden bg-black fixed w-[100vw] h-[100vh] z-0" onClick={() => setExpanded(!expanded)} />
+                            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="min-w-[14rem] max-w-[15rem] h-full float-left">
+                                <div className="z-50 fixed h-[calc(100%-50px)] overflow-y-auto border-t-0 border-l-0 border min-w-[14rem] max-w-[15rem] border-highlight bg-[--main] shadow-md float-left">
+                                    <motion.div variants={container} initial="hidden" animate="visible" className="flex my-1.5 flex-col px-3">
+                                        {arrayComponents}
+                                    </motion.div>
+                                </div>
+                            </motion.div>
+                        </>
+                    }
+                </AnimatePresence>
         </aside>
     </>;
-}
+}
+
+/*
+            <button className="fixed top-2 left-2 z-50" onClick={() => {setExpanded(!expanded); (window as any).__sidebar = console.warn;}}>
+                <svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
+            </button>
+            */

src/components/footer.tsx

@@ -1,5 +1,5 @@
 export default function Footer() {
-    return <footer className="w-full h-20 bg-secondary border border-highlight text-center">
+    return <footer className="w-full h-20 bg-[--main] border-t-[1px] border-highlight text-center">
         Not Affilieted With Mojang Lmao
     </footer>
 }

src/components/header.tsx

@@ -1,16 +1,27 @@
+"use client";
 import ButtonLink from "./buttonLink/buttonLink"
 
 export default function Header() {
     return <header className="w-full z-40">
-        <div className="fixed bg-secondary border border-highlight h-[3.5rem] w-full items-center shadow-xl">
-            <div className="ml-[3.25rem] h-full">
-                <ButtonLink link="/" className="my-2.5 text-2xl w-min inline font-bold text-nowrap float-left align-middle">
+        <div className="fixed bg-secondary border border-l-0 border-t-0 border-b-1 border-highlight h-[3.5rem] w-full shadow-xl">
+            <div className="m-3 h-min w-full flex">
+                <button className="-my-2 px-1 rounded-md hover:bg-slate-100 hover:bg-opacity-[0.02]" onClick={()=>(window as any).__sidebar("Test")}>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="45" viewBox="0 -960 960 960" width="45"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
+                </button>
+                <ButtonLink link="/" className="float-left text-2xl ml-2 w-min font-bold text-nowrap">
                     Scripting Wiki
                 </ButtonLink>
-                <ButtonLink link="/" className="mr-3 my-3 text-xl w-min inline font-bold text-nowrap float-right align-middle">
-                    API Types
-                </ButtonLink>
+                <div className="w-full mr-[3%]">
+                    <HyperLink link="https://wiki.bedrock.dev/" content="Bedrock Wiki"/>
+                    <HyperLink link="https://github.com/bedrock-apis/wiki" content="Github"/>
+                    <HyperLink link="https://discord.gg/38M6A2RvKk" content="Discord"/>
+                </div>
             </div>
         </div>
     </header>
+}
+export function HyperLink(data: {children?: any, link?: string, content?: string}){
+    return <a href={data.link} target="_blank" className="rounded-md px-2 float-right hover:bg-slate-600 hover:bg-opacity-20 text-xl opacity-80 hover:opacity-95 inline text-nowrap">
+        {data.children??data.content}
+    </a>
 }

src/styles/globals.css

@@ -14,8 +14,9 @@
   --background-end-rgb: 255, 255, 255;
 
 
-  --primary: #232628;
+  --primary: #232732;
   --secondary: #293439;
+  --main: #222528;
   --highlight: #788687;
   --accent: #987420;
   --accent-highlight: #f4805d;