refactor: Docs design update

apps/docs/src/components/fragments/header.tsx

@@ -12,18 +12,6 @@ const isAppleDevice = (): boolean => {
 const Header: Component = () => {
   return (
     <div class="top-0 bg-gray-50 dark:bg-gray-800 border-b-2 border-gray-200 dark:border-gray-700 left-0 z-50 items-center justify-center w-full flex py-2 px-4 md:px-3">
-      <div class="flex items-center justify-start">
-        <IconButton
-          path={logoIcon}
-          color="primary"
-          link="/"
-          class="bg-gradient-to-tr from-red-500 to-orange-500 m-0 mr-1"
-        />
-        <span class="flex-1 text-2xl font-extrabold text-gray-600 dark:text-gray-200">rite</span>
-        <span class="text-gray-500 dark:text-gray-400 font-semibold border-l-2 pl-2 ml-2 leading-8 border-gray-200 dark:border-gray-700">
-          Documentation
-        </span>
-      </div>
       <div class="flex-1" />
       <IconButton
         path={mdiMagnify}

apps/docs/src/components/fragments/on-this-page.tsx

@@ -1,5 +1,6 @@
 import { Component, For, onMount, onCleanup, createSignal, createMemo } from "solid-js";
 import { mdiListBox } from "@mdi/js";
+import clsx from "clsx";
 import type { MarkdownHeading } from "astro";
 import { Button, IconButton } from "#components/primitives";
 
@@ -29,9 +30,8 @@ const OnThisPage: Component<OnThisPageProps> = (props) => {
         }
       }
     };
-    const container = document.getElementById("container");
+    const container = document.body;
     const observerOptions: IntersectionObserverInit = {
-      root: container,
       rootMargin: "-100px 0% -66%",
       threshold: 0
     };
@@ -66,38 +66,46 @@ const OnThisPage: Component<OnThisPageProps> = (props) => {
   });
 
   return (
-    <div class="w-56 flex-col justify-start top-0 pt-16 sticky hidden xl:flex gap-2">
-      <IconButton
-        text="soft"
-        class="font-bold justify-start m-0"
-        variant="text"
-        badge
-        hover={false}
-        path={mdiListBox}
-        label="On This Page"
-      />
-      <For each={headings()}>
-        {(heading) => {
-          return (
-            <Button
-              variant="text"
-              text={activeHeading() === heading.slug ? "base" : "soft"}
-              color={activeHeading() === heading.slug ? "primary" : "base"}
-              class="text-start m-0"
-              onClick={() => {
-                document.getElementById(heading.slug)?.scrollIntoView({
-                  block: "start",
-                  inline: "nearest"
-                });
-                setActiveHeading(heading.slug);
-              }}
-            >
-              {heading.text}
-            </Button>
-          );
-        }}
-      </For>
-    </div>
+    <>
+      <div
+        class={clsx(
+          "w-56 flex-col justify-start top-0 pt-16 fixed right-0 hidden xl:flex gap-2",
+          "mr-[max(0px,calc((100%-(1536px))/2))]"
+        )}
+      >
+        <IconButton
+          text="soft"
+          class="font-bold justify-start m-0"
+          variant="text"
+          badge
+          hover={false}
+          path={mdiListBox}
+          label="On This Page"
+        />
+        <For each={headings()}>
+          {(heading) => {
+            return (
+              <Button
+                variant="text"
+                text={activeHeading() === heading.slug ? "base" : "soft"}
+                color={activeHeading() === heading.slug ? "primary" : "base"}
+                class="text-start m-0"
+                onClick={() => {
+                  document.getElementById(heading.slug)?.scrollIntoView({
+                    block: "start",
+                    inline: "nearest"
+                  });
+                  setActiveHeading(heading.slug);
+                }}
+              >
+                {heading.text}
+              </Button>
+            );
+          }}
+        </For>
+      </div>
+      <div class="min-w-56 hidden xl:flex" />
+    </>
   );
 };
 

apps/docs/src/components/fragments/side-bar.tsx

@@ -111,63 +111,81 @@ const SideBarNestedMenu: Component<{
 const SideBar: Component<SideBarProps> = (props) => {
   return (
     <>
-      <Card
-        class={clsx(
-          "top-0 h-full z-50 min-w-80 w-full md:max-w-80 m-0 bg-gray-100 dark:bg-gray-900",
-          "flex-col gap-2 justify-start items-start border-0 md:border-r-2 rounded-none flex fixed md:relative",
-          "transform md:transition-transform duration-300 ease-in-out scrollbar-sm-contrast overflow-auto",
-          menuOpened() ? "" : "translate-y-full md:translate-y-0"
-        )}
-      >
-        <div class="flex flex-col gap-2 pl-1 w-full py-4">
-          <For each={externalLinks}>
-            {(link) => {
+      <div class={clsx("h-full fixed top-0 left-0 z-1", "pl-[max(0px,calc((100%-1536px)/2))]")}>
+        <Card
+          class={clsx(
+            "top-0 h-full z-50 min-w-80 w-full md:max-w-80 m-0 bg-gray-100 dark:bg-gray-900",
+            "flex-col gap-2 justify-start items-start border-0 md:border-r-2 rounded-none flex fixed md:relative",
+            "transform md:transition-transform duration-300 ease-in-out scrollbar-sm-contrast overflow-auto",
+            menuOpened() ? "" : "translate-y-full md:translate-y-0"
+          )}
+        >
+          <div class="flex items-center justify-start px-1 pb-4 pt-2">
+            <IconButton
+              path={logoIcon}
+              color="primary"
+              link="/"
+              class="bg-gradient-to-tr from-red-500 to-orange-500 m-0 mr-1"
+            />
+            <span class="flex-1 text-2xl font-extrabold text-gray-600 dark:text-gray-200">
+              rite
+            </span>
+            <span class="text-gray-500 dark:text-gray-400 font-semibold border-l-2 pl-2 ml-2 leading-8 border-gray-200 dark:border-gray-700">
+              Documentation
+            </span>
+          </div>
+          <div class="flex flex-col gap-2 pl-1 w-full py-4">
+            <For each={externalLinks}>
+              {(link) => {
+                return (
+                  <a
+                    class="flex justify-start items-center group w-full cursor-pointer"
+                    target="_blank"
+                    href={link.href}
+                  >
+                    <IconButton
+                      path={link.icon}
+                      class="m-0 group-hover:bg-gray-300 dark:group-hover:bg-gray-700 h-8 w-8"
+                      iconProps={{ class: "h-5 w-5" }}
+                      color="contrast"
+                      text="soft"
+                    />
+                    <span class=" ml-2 text-gray-500 dark:text-gray-400">{link.label}</span>
+                  </a>
+                );
+              }}
+            </For>
+          </div>
+          <For each={props.menu}>
+            {(menuItem) => {
               return (
-                <a
-                  class="flex justify-start items-center group w-full cursor-pointer"
-                  target="_blank"
-                  href={link.href}
-                >
-                  <IconButton
-                    path={link.icon}
-                    class="m-0 group-hover:bg-gray-300 dark:group-hover:bg-gray-700 h-8 w-8"
-                    iconProps={{ class: "h-5 w-5" }}
-                    color="contrast"
-                    text="soft"
-                  />
-                  <span class=" ml-2 text-gray-500 dark:text-gray-400">{link.label}</span>
-                </a>
+                <SideBarNestedMenu currentPath={props.currentPath} menu={menuItem.menu}>
+                  <Button
+                    variant="text"
+                    class="justify-start w-full font-bold m-0"
+                    badge
+                    hover={false}
+                  >
+                    {menuItem.label}
+                  </Button>
+                </SideBarNestedMenu>
               );
             }}
           </For>
-        </div>
-        <For each={props.menu}>
-          {(menuItem) => {
-            return (
-              <SideBarNestedMenu currentPath={props.currentPath} menu={menuItem.menu}>
-                <Button
-                  variant="text"
-                  class="justify-start w-full font-bold m-0"
-                  badge
-                  hover={false}
-                >
-                  {menuItem.label}
-                </Button>
-              </SideBarNestedMenu>
-            );
+        </Card>
+        <div class="bg-gray-100 dark:bg-gray-900 absolute h-screen w-screen top-0 right-0" />
+        <IconButton
+          path={menuOpened() ? mdiClose : mdiMenu}
+          size="large"
+          color={menuOpened() ? "contrast" : "base"}
+          text="soft"
+          class="fixed bottom-4 right-4 z-50 md:hidden bg-gray-800 hover:bg-gray-700 text-gray-50 hover:text-gray-50 dark:bg-gray-200 dark:hover:bg-gray-300 dark:text-gray-900 dark:hover:text-gray-900"
+          onClick={() => {
+            setMenuOpened(!menuOpened());
           }}
-        </For>
-      </Card>
-      <IconButton
-        path={menuOpened() ? mdiClose : mdiMenu}
-        size="large"
-        color={menuOpened() ? "contrast" : "base"}
-        text="soft"
-        class="fixed bottom-4 right-4 z-50 md:hidden bg-gray-800 hover:bg-gray-700 text-gray-50 hover:text-gray-50 dark:bg-gray-200 dark:hover:bg-gray-300 dark:text-gray-900 dark:hover:text-gray-900"
-        onClick={() => {
-          setMenuOpened(!menuOpened());
-        }}
-      />
+        />
+      </div>
+      <div class="min-w-80 hidden md:block" />
     </>
   );
 };

apps/docs/src/components/layouts/default.astro

@@ -21,17 +21,13 @@ type Props = {
   </head>
   <body class="overflow-x-hidden overscroll-none">
     <SVGDefs />
-    <main class="flex flex-col items-center justify-center h-screen bg-gray-50 dark:bg-gray-800">
-      <Header />
-      <div class="flex-1 flex justify-center items-center overflow-hidden flex-1 w-full">
+    <main class="flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-800">
+      <div class="flex-1 flex justify-center items-center flex-1 w-full max-w-screen-2xl relative">
         <SideBar menu={menu} currentPath={Astro.url.pathname} client:load />
         <div class="flex overflow-hidden w-full relative h-full">
-          <div
-            class="flex-1 flex overflow-y-auto overflow-x-hidden md:max-h-[calc(100vh-3.125rem)]"
-            id="container"
-          >
+          <div class="flex-1 flex overflow-y-auto overflow-x-hidden justify-center" id="container">
             <div
-              class="flex-1 prose max-w-screen-lg w-full text-lg px-4 pt-4 lg:px-36 pb-24 h-fit xl:w-[calc(100%-15rem)]"
+              class="flex-1 prose max-w-screen-md w-full text-lg px-4 pt-4 pb-24 h-fit xl:w-[calc(100%-15rem)]"
             >
               <slot />
             </div>

apps/docs/src/styles/styles.scss

@@ -37,7 +37,7 @@ kbd {
   }
 
   img {
-    @apply rounded-2xl;
+    @apply rounded-2xl dark:border-gray-700 dark:border-2;
   }
   table {
     overflow: visible;