Docs: Initial navigation sidebar.

NordcomInc · Sep 24, 2024 · b3e3bd6 · b3e3bd6
1 parent 3b006f0
commit b3e3bd6
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 8 deletions.
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -26,9 +26,7 @@ let config = {
     experimental: {
         appNavFailHandling: true,
         caseSensitiveRoutes: true,
-        mdxRs: {
-            mdxType: 'gfm'
-        },
+        mdxRs: true,
         optimizePackageImports: [],
         optimizeServerReact: true,
         parallelServerBuildTraces: true,

diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx
@@ -1,6 +1,8 @@
-import '@/styles/base.scss';
+import * as Nordstar from '@nordcom/nordstar';
+import { Label } from '@nordcom/nordstar';
 
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import type { ReactNode } from 'react';
 
 export const metadata: Metadata = {
@@ -11,6 +13,53 @@ export const metadata: Metadata = {
     }
 };
 
+function NavBlock({ label, href, children }: { label: string; href: string; children: ReactNode }) {
+    return (
+        <section className="flex flex-col gap-4">
+            <Label as={Link} href={href} className="block text-base leading-none text-foreground">
+                {label}
+            </Label>
+
+            <div className="flex flex-col gap-4 px-3 text-base font-normal leading-none text-foreground-highlight *:flex *:gap-3 *:text-inherit *:leading-none *:transition-colors *:before:block *:before:content-['•']">
+                {children}
+            </div>
+        </section>
+    );
+}
+
 export default function DocsLayout({ children }: { children: ReactNode }) {
-    return <>{children}</>;
+    return (
+        <div className="grid grid-cols-[18rem_1fr] gap-6">
+            <nav className="flex flex-col gap-6">
+                <NavBlock label="Guide" href="/docs/">
+                    <Link href="/docs/getting-started/" className="hover:text-primary">
+                        Introduction
+                    </Link>
+                    <Link href="/docs/installation/" className="hover:text-primary">
+                        Installation
+                    </Link>
+                </NavBlock>
+
+                <NavBlock label="Customization" href="/docs/customization/">
+                    <Link href="/docs/customization/theme/" className="hover:text-primary">
+                        Theme
+                    </Link>
+                    <Link href="/docs/customization/system/" className="hover:text-primary">
+                        System
+                    </Link>
+                </NavBlock>
+
+                <NavBlock label="Components" href="/docs/components/">
+                    {Object.keys(Nordstar)
+                        .filter((key) => (Nordstar as any)[key].displayName)
+                        .map((key) => (
+                            <Link key={key} href={`/docs/components/${key}/`} className="hover:text-primary">
+                                {key}
+                            </Link>
+                        ))}
+                </NavBlock>
+            </nav>
+            <section>{children}</section>
+        </div>
+    );
 }
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import '@/styles/base.scss';
+import '@/styles/globals.css';
 
 import { Providers } from '@/components/providers';
 import { Card, cn, Header, View } from '@nordcom/nordstar';

diff --git a/docs/src/styles/base.scss → docs/src/styles/globals.css b/docs/src/styles/base.scss → docs/src/styles/globals.css
diff --git a/packages/core/system/README.md b/packages/core/system/README.md
@@ -1,4 +1,4 @@
-# [@nordcom/nordstar-system](https://nordstar.dev/docs/system/?utm_source=nordstar&utm_campaign=oss)
+# [@nordcom/nordstar-system](https://nordstar.dev/docs/customization/system/?utm_source=nordstar&utm_campaign=oss)
 
 General utility libraries and tools used by all of the Nordstar components, hooks and packages. Also currently provides the theming for all components, which should be extracted to another package.
 

diff --git a/packages/core/system/package.json b/packages/core/system/package.json
@@ -66,7 +66,7 @@
     "bugs": {
         "url": "https://github.com/NordcomInc/nordstar/issues"
     },
-    "homepage": "https://nordstar.dev/docs/system/",
+    "homepage": "https://nordstar.dev/docs/customization/system/",
     "scripts": {
         "build": "vite build",
         "dev": "vite build --watch",