docs: styles

rossrobino · Sep 8, 2024 · fde430c · fde430c
1 parent 901651a
commit fde430c
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 100 deletions.
diff --git a/apps/docs/src/components/Layout.tsx b/apps/docs/src/components/Layout.tsx
@@ -23,9 +23,7 @@ export const Layout: FC<LayoutProps> = ({ title, children, client }) => {
 						name="viewport"
 						content="width=device-width, initial-scale=1.0"
 					/>
-					{client.map((tags) => {
-						return tags;
-					})}
+					{client.map((tags) => tags)}
 					<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 					<meta
 						name="description"
@@ -37,8 +35,8 @@ export const Layout: FC<LayoutProps> = ({ title, children, client }) => {
 					<drab-prefetch trigger="a[href^='/']" class="contents">
 						<main class="flex flex-col lg:flex-row">
 							<Nav />
-							<div class="prose mx-6 my-6 md:max-w-screen-md xl:mx-auto">
-								{children}
+							<div class="grow justify-center md:flex">
+								<div class="prose m-6 max-w-screen-md">{children}</div>
 							</div>
 						</main>
 					</drab-prefetch>

diff --git a/apps/docs/src/components/Nav.tsx b/apps/docs/src/components/Nav.tsx
@@ -1,4 +1,4 @@
-import { BookSvg, EarthSvg, FuncSvg, PlugSvg } from "./svg";
+import { BookSvg, EarthSvg, FuncSvg, HomeSvg, PlugSvg, XSvg } from "./svg";
 import type { FC } from "hono/jsx";
 
 export const Nav: FC = () => {
@@ -17,11 +17,16 @@ type NavLinkProps = {
 
 const SideBar: FC = () => {
 	return (
-		<nav class="bg-muted-background sticky top-0 hidden h-screen overflow-y-auto lg:block">
-			<div class="p-6">
-				<HomeLink />
+		<nav class="bg-muted-background sticky top-0 hidden h-screen w-[20vw] min-w-52 justify-end overflow-y-auto lg:flex">
+			<div class="flex flex-col py-6 pl-6 pr-12">
+				<div class="pb-6">
+					<HomeLink />
+				</div>
+				<div class="flex grow flex-col justify-between">
+					<InternalLinks />
+					<ExternalLinks />
+				</div>
 			</div>
-			<NavContents />
 		</nav>
 	);
 };
@@ -32,20 +37,6 @@ const HomeLink = () => (
 	</a>
 );
 
-const NavContents: FC = () => {
-	return (
-		<div class="flex h-[90%] min-w-64 flex-col justify-between">
-			<ul class="px-6">
-				<NavListItems />
-			</ul>
-			<div class="flex items-center gap-1 p-6">
-				<RepoLink />
-				<NpmLink />
-			</div>
-		</div>
-	);
-};
-
 const TopBar: FC = () => {
 	return (
 		<drab-dialog
@@ -77,36 +68,28 @@ const TopBar: FC = () => {
 
 			<dialog
 				data-content
-				class="bg-muted-background my-0 ml-0 h-full max-h-dvh max-w-[100vw] backdrop:backdrop-blur"
+				class="bg-muted-background my-0 ml-0 h-full max-h-dvh shadow-sm backdrop:backdrop-blur"
 			>
-				<nav class="flex items-center justify-between p-3 pl-6">
-					<HomeLink />
-
-					<button data-trigger type="button" class="ghost" title="Close">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M18 6 6 18" />
-							<path d="m6 6 12 12" />
-						</svg>
-					</button>
+				<nav class="flex h-full min-w-64 flex-col p-6">
+					<div class="flex items-center justify-between pb-6">
+						<HomeLink />
+						<button data-trigger type="button" class="ghost" title="Close">
+							<XSvg />
+						</button>
+					</div>
+					<div class="flex grow flex-col justify-between">
+						<InternalLinks />
+						<ExternalLinks />
+					</div>
 				</nav>
-				<NavContents />
 			</dialog>
 		</drab-dialog>
 	);
 };
 
-export const NavListItems: FC = () => {
+export const InternalLinks: FC = () => {
 	const items: NavLinkProps[] = [
+		{ title: "Overview", Icon: HomeSvg },
 		{ title: "Tutorial", Icon: BookSvg },
 		{
 			title: "Migrate",
@@ -123,23 +106,38 @@ export const NavListItems: FC = () => {
 	];
 
 	return (
-		<>
-			{items.map(({ title, Icon }) => (
-				<li>
-					<a
-						class="flex items-center gap-3 py-1.5 no-underline data-[current]:font-bold"
-						href={`/${title.split(" ").join("-").toLowerCase()}`}
-					>
-						<Icon />
-						{title}
-					</a>
-				</li>
-			))}
-		</>
+		<ul>
+			{items.map(({ title, Icon }) => {
+				const href =
+					title === "Overview"
+						? "/"
+						: `/${title.split(" ").join("-").toLowerCase()}`;
+				return (
+					<li>
+						<a
+							class="flex items-center gap-3 py-1.5 no-underline data-[current]:font-bold"
+							href={href}
+						>
+							<Icon />
+							{title}
+						</a>
+					</li>
+				);
+			})}
+		</ul>
+	);
+};
+
+const ExternalLinks: FC = () => {
+	return (
+		<div class="flex items-center gap-1">
+			<RepoLink />
+			<NpmLink />
+		</div>
 	);
 };
 
-export const RepoLink: FC = () => {
+const RepoLink: FC = () => {
 	return (
 		<a
 			href="https://github.com/rossrobino/domco"
@@ -164,7 +162,7 @@ export const RepoLink: FC = () => {
 	);
 };
 
-export const NpmLink: FC = () => {
+const NpmLink: FC = () => {
 	return (
 		<a href="https://www.npmjs.com/package/domco" class="button ghost icon">
 			<svg

diff --git a/apps/docs/src/components/svg.tsx b/apps/docs/src/components/svg.tsx
@@ -1,5 +1,24 @@
 import type { FC } from "hono/jsx";
 
+export const XSvg: FC = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M18 6 6 18" />
+			<path d="m6 6 12 12" />
+		</svg>
+	);
+};
+
 export const BookSvg: FC = () => {
 	return (
 		<svg
@@ -12,7 +31,6 @@ export const BookSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-violet-700"
 		>
 			<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
 			<path d="m8 13 4-7 4 7" />
@@ -33,7 +51,6 @@ export const PlugSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-orange-700"
 		>
 			<path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z" />
 			<path d="m2 22 3-3" />
@@ -56,7 +73,6 @@ export const EarthSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-teal-700"
 		>
 			<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
 			<path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" />
@@ -78,11 +94,29 @@ export const FuncSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-sky-700"
 		>
 			<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
 			<path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3" />
 			<path d="M9 11.2h5.7" />
 		</svg>
 	);
 };
+
+export const HomeSvg: FC = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+			<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+		</svg>
+	);
+};