diff --git a/.gitignore b/.gitignore index 2adc832..a6f9c08 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,14 @@ docs/.gitbook/ docs/dist/ docs/build/ +# Next.js build outputs +docs/.next/ +docs/out/ +docs/next-env.d.ts +.next/ +out/ +next-env.d.ts + # IDE and editor files .vscode/ .idea/ diff --git a/docs/package.json b/docs/package.json index e0da70a..1e7d8b8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -8,16 +8,17 @@ "start": "next start" }, "dependencies": { + "next": "15.5.4", + "next-themes": "^0.4.6", "react": "19.1.0", - "react-dom": "19.1.0", - "next": "15.5.4" + "react-dom": "19.1.0" }, "devDependencies": { - "typescript": "^5", + "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4" + "tailwindcss": "^4", + "typescript": "^5" } } diff --git a/docs/src/app/clients/page.tsx b/docs/src/app/clients/page.tsx index e83e87c..c0602ba 100644 --- a/docs/src/app/clients/page.tsx +++ b/docs/src/app/clients/page.tsx @@ -5,7 +5,7 @@ export default function Clients() {

Supported Clients

-

+

starknode-kit supports multiple client implementations for both Ethereum and Starknet networks.

@@ -27,19 +27,19 @@ export default function Clients() {

-
-

Execution Clients

-

Handle transaction execution and state management

-
    +
    +

    Execution Clients

    +

    Handle transaction execution and state management

    +
    • • Geth (Go)
    • • Reth (Rust)
    -
    -

    Consensus Clients

    -

    Handle proof-of-stake consensus mechanism

    -
      +
      +

      Consensus Clients

      +

      Handle proof-of-stake consensus mechanism

      +
      • • Lighthouse (Rust)
      • • Prysm (Go)
      @@ -53,10 +53,10 @@ export default function Clients() {

      -
      -

      Starknet Clients

      -

      Full node implementations for Starknet

      -
        +
        +

        Starknet Clients

        +

        Full node implementations for Starknet

        +
        • • Juno (Go) - Full node client
        • • Starknet Validator - Validator client for staking
        @@ -67,38 +67,42 @@ export default function Clients() {

        Popular client combinations for Ethereum nodes:

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        ExecutionConsensusCharacteristics
        GethLighthouseMost popular, well-tested
        RethLighthouseHigh performance, modern
        GethPrysmStable, feature-rich
        RethPrysmPerformance-focused
        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        ExecutionConsensusCharacteristics
        GethLighthouseMost popular, well-tested
        RethLighthouseHigh performance, modern
        GethPrysmStable, feature-rich
        RethPrysmPerformance-focused
        +
        +

        Choosing Clients

        @@ -158,54 +162,58 @@ export default function Clients() {

        Resource Requirements by Client

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        ClientRAMDiskCPU
        Geth16+ GB~1.2 TB4+ cores
        Reth16+ GB~900 GB4+ cores
        Lighthouse8+ GB~200 GB2+ cores
        Prysm8+ GB~250 GB2+ cores
        Juno8+ GB~300 GB2+ cores
        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        ClientRAMDiskCPU
        Geth16+ GB~1.2 TB4+ cores
        Reth16+ GB~900 GB4+ cores
        Lighthouse8+ GB~200 GB2+ cores
        Prysm8+ GB~250 GB2+ cores
        Juno8+ GB~300 GB2+ cores
        +
        +
        -
        -

        💡 Recommendation

        -

        +

        +

        💡 Recommendation

        +

        For most users, we recommend Reth + Lighthouse for Ethereum (best performance) and Juno for Starknet.

        @@ -231,21 +239,21 @@ export default function Clients() {
      • Start nodes: starknode-kit start
        • -
        -

        ⚠️ Note

        -

        +

        +

        ⚠️ Note

        +

        Switching clients may require re-syncing from scratch, which can take several days. Plan accordingly and ensure you have sufficient disk space.

        -
        -

        📖 Next Steps

        -

        +

        +

        📖 Next Steps

        +

        Ready to dive deeper? Check out our validator guide:

        - Validator Guide + Validator Guide
        diff --git a/docs/src/app/commands/page.tsx b/docs/src/app/commands/page.tsx index 3fd0b4f..7fcdabb 100644 --- a/docs/src/app/commands/page.tsx +++ b/docs/src/app/commands/page.tsx @@ -6,72 +6,76 @@ export default function Commands() {

        Commands Reference

        -

        +

        Complete reference for all starknode-kit commands. Each command helps you manage different aspects of your Ethereum and Starknet nodes.

        Command Overview

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        CommandDescription
        addAdd an Ethereum or Starknet client to the config
        completionGenerate the autocompletion script for the specified shell
        configCreate, show, and update your Starknet node configuration
        monitorLaunch real-time monitoring dashboard
        removeRemove a specified resource
        runRun a specific local infrastructure service
        startRun the configured Ethereum clients
        statusDisplay status of running clients
        stopStop the configured Ethereum clients
        updateCheck for and install client updates
        validatorManage the Starknet validator client
        versionShow version of starknode-kit or a specific client
        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        CommandDescription
        addAdd an Ethereum or Starknet client to the config
        completionGenerate the autocompletion script for the specified shell
        configCreate, show, and update your Starknet node configuration
        monitorLaunch real-time monitoring dashboard
        removeRemove a specified resource
        runRun a specific local infrastructure service
        startRun the configured Ethereum clients
        statusDisplay status of running clients
        stopStop the configured Ethereum clients
        updateCheck for and install client updates
        validatorManage the Starknet validator client
        versionShow version of starknode-kit or a specific client
        +
        +

        Quick Examples

        @@ -142,13 +146,13 @@ starknode-kit completion zsh > "\${fpath[1]}/_starknode-kit" starknode-kit completion fish > ~/.config/fish/completions/starknode-kit.fish`} /> -
        -

        📖 Next Steps

        -

        +

        +

        📖 Next Steps

        +

        Ready to dive deeper? Check out our comprehensive guides:

        - Supported Clients + Supported Clients
        diff --git a/docs/src/app/configuration/page.tsx b/docs/src/app/configuration/page.tsx index 3cee155..c46d147 100644 --- a/docs/src/app/configuration/page.tsx +++ b/docs/src/app/configuration/page.tsx @@ -6,7 +6,7 @@ export default function Configuration() {

        Configuration

        -

        +

        Learn how to configure starknode-kit for your Ethereum and Starknet nodes.

        @@ -171,9 +171,9 @@ starknode-kit config set juno eth_node=http://localhost:8545`}
      -
      -

      ⚠️ Important

      -

      +

      +

      ⚠️ Important

      +

      Changing the network will affect all clients. Make sure to stop your nodes before changing networks.

      @@ -187,43 +187,47 @@ starknode-kit config set juno eth_node=http://localhost:8545`}

      Default ports for each client:

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      ClientPortsPurpose
      Geth8545, 8546, 30303HTTP RPC, WS RPC, P2P
      Reth8545, 8546, 30303HTTP RPC, WS RPC, P2P
      Lighthouse5052, 9000HTTP API, P2P
      Prysm4000, 13000HTTP API, P2P
      Juno6060RPC
      +
      +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      ClientPortsPurpose
      Geth8545, 8546, 30303HTTP RPC, WS RPC, P2P
      Reth8545, 8546, 30303HTTP RPC, WS RPC, P2P
      Lighthouse5052, 9000HTTP API, P2P
      Prysm4000, 13000HTTP API, P2P
      Juno6060RPC
      +
      +

      @@ -316,13 +320,13 @@ starknode-kit config set juno eth_node=http://localhost:8545`}
    • Stop conflicting services

    -
    -

    📖 Next Steps

    -

    +

    +

    📖 Next Steps

    +

    Ready to dive deeper? Check out our comprehensive guides:

    - Commands Reference + Commands Reference
    diff --git a/docs/src/app/contributing/page.tsx b/docs/src/app/contributing/page.tsx index d003597..afd9a7e 100644 --- a/docs/src/app/contributing/page.tsx +++ b/docs/src/app/contributing/page.tsx @@ -6,7 +6,7 @@ export default function Contributing() {

    Contributing

    -

    +

    We welcome contributions to starknode-kit! This guide will help you get started with contributing to the project.

    @@ -251,9 +251,9 @@ Error log output here
  • Conventional Commits
-
-

🎉 Thank You!

-

+

+

🎉 Thank You!

+

Thank you for considering contributing to starknode-kit! Your contributions help make this tool better for everyone.

diff --git a/docs/src/app/getting-started/page.tsx b/docs/src/app/getting-started/page.tsx index f7e0251..871d648 100644 --- a/docs/src/app/getting-started/page.tsx +++ b/docs/src/app/getting-started/page.tsx @@ -6,7 +6,7 @@ export default function GettingStarted() {

Getting Started

-

+

Welcome to starknode-kit! This guide will help you get up and running with your Ethereum and Starknet nodes in just a few minutes.

@@ -33,9 +33,9 @@ export default function GettingStarted() { -
-

📝 Note

-

+

+

📝 Note

+

For detailed hardware requirements, check out our{" "} Requirements page @@ -127,9 +127,9 @@ export default function GettingStarted() { -

-

⚠️ Important

-

+

+

⚠️ Important

+

The start command only launches Ethereum clients (execution + consensus). It does not start Starknet clients.

@@ -164,42 +164,42 @@ starknode-kit run lighthouse`}

The monitoring dashboard provides real-time insights:

-
+
🔄
-

Node Sync Status

-

Real-time synchronization progress and health

+

Node Sync Status

+

Real-time synchronization progress and health

-
+
📊
-

Current Block Height

-

Latest block number and sync progress

+

Current Block Height

+

Latest block number and sync progress

-
+
🌐
-

Network Statistics

-

Peer connections and network performance

+

Network Statistics

+

Peer connections and network performance

-
+
💻
-

System Resources

-

CPU, RAM, and disk usage metrics

+

System Resources

+

CPU, RAM, and disk usage metrics

@@ -213,13 +213,13 @@ starknode-kit run lighthouse`} -
-

📖 Next Steps

-

+

+

📖 Next Steps

+

Ready to dive deeper? Check out our installation guide:

- Installation Guide + Installation Guide
diff --git a/docs/src/app/globals.css b/docs/src/app/globals.css index b60e14f..02dbce5 100644 --- a/docs/src/app/globals.css +++ b/docs/src/app/globals.css @@ -34,19 +34,57 @@ body { margin-bottom: 1.5rem; } +.prose h1 { + font-size: 2rem; + line-height: 1.2; +} + +@media (min-width: 640px) { + .prose h1 { + font-size: 2.5rem; + } +} + .prose h2 { - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 1.5rem; + font-size: 1.5rem; +} + +@media (min-width: 640px) { + .prose h2 { + margin-top: 3rem; + font-size: 1.875rem; + } } .prose h3 { - margin-bottom: 1.25rem; + margin-bottom: 1rem; + font-size: 1.25rem; +} + +@media (min-width: 640px) { + .prose h3 { + margin-bottom: 1.25rem; + font-size: 1.5rem; + } +} + +.prose h4 { + font-size: 1.125rem; +} + +@media (min-width: 640px) { + .prose h4 { + font-size: 1.25rem; + } } .prose a { color: #2563eb; text-decoration: none; transition: color 0.2s; + word-break: break-word; } .prose a:hover { @@ -55,11 +93,12 @@ body { } .prose code { - background: #f3f4f6; + background: #040811; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.875em; font-family: 'Courier New', monospace; + word-break: break-word; } .prose pre { @@ -73,11 +112,20 @@ body { background: transparent; padding: 0; color: #e2e8f0; + word-break: normal; } .prose table { width: 100%; border-collapse: collapse; + display: block; + overflow-x: auto; +} + +@media (min-width: 768px) { + .prose table { + display: table; + } } .prose th { @@ -91,3 +139,26 @@ body { font-style: italic; color: #6b7280; } + +.prose ul, .prose ol { + padding-left: 1.5rem; +} + +@media (min-width: 640px) { + .prose ul, .prose ol { + padding-left: 2rem; + } +} + +/* Responsive table wrapper */ +.table-wrapper { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin: 1.5rem 0; +} + +/* Ensure images are responsive */ +.prose img { + max-width: 100%; + height: auto; +} diff --git a/docs/src/app/installation/page.tsx b/docs/src/app/installation/page.tsx index 9dcd313..342df95 100644 --- a/docs/src/app/installation/page.tsx +++ b/docs/src/app/installation/page.tsx @@ -6,7 +6,7 @@ export default function Installation() {

Installation

-

+

There are multiple ways to install starknode-kit. Choose the method that best suits your needs.

@@ -132,9 +132,9 @@ Use "starknode [command] --help" for more information about a command.`} rm -rf ~/.config/starknode-kit`} /> -
-

⚠️ Note

-

+

+

⚠️ Note

+

This will not remove any client data (e.g., blockchain data). The data is stored in the locations specified in your{" "} ~/.starknode-kit/starknode.yml file. @@ -164,13 +164,13 @@ rm -rf ~/.config/starknode-kit`} have sudo access or contact your system administrator.

-
-

📖 Next Steps

-

+

+

📖 Next Steps

+

Ready to dive deeper? Check out our configuration guide:

- Configuration Guide + Configuration Guide
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx index 66099db..d6c8eea 100644 --- a/docs/src/app/layout.tsx +++ b/docs/src/app/layout.tsx @@ -1,8 +1,10 @@ -import type { Metadata } from "next"; +"use client"; + import { Inter, Source_Code_Pro } from "next/font/google"; import "./globals.css"; import Sidebar from "@/components/Sidebar"; import Header from "@/components/Header"; +import { useState, useCallback } from "react"; const inter = Inter({ subsets: ["latin"], @@ -11,26 +13,39 @@ const inter = Inter({ const source_code_pro = Source_Code_Pro({ subsets: ["latin"], - variable: "--font-source-code" -}) - -export const metadata: Metadata = { - title: "starknode-kit Documentation", - description: "Complete documentation for starknode-kit - A CLI tool for setting up and managing Ethereum and Starknet nodes", -}; + variable: "--font-source-code", +}); export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + + const toggleSidebar = useCallback(() => { + setIsSidebarOpen((prev) => !prev); + }, []); + + const closeSidebar = useCallback(() => { + setIsSidebarOpen(false); + }, []); + return ( - - - -
-
-
+ + + starknode-kit Documentation + + + + + +
+
+
{children}
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx index ea7a66d..429834a 100644 --- a/docs/src/app/page.tsx +++ b/docs/src/app/page.tsx @@ -6,7 +6,7 @@ export default function Home() {

Welcome to starknode-kit

-

+

A powerful command-line tool to help developers and node operators easily set up, manage, and maintain Ethereum and Starknet nodes.

@@ -14,12 +14,12 @@ export default function Home() {
-

+

🚀 Getting Started

-

+

Learn how to install and configure starknode-kit for your node setup.

@@ -27,36 +27,36 @@ export default function Home() { -

+

📘 Commands

-

+

Explore all available commands and their usage.

-

+

⚙️ Configuration

-

+

Configure your Ethereum and Starknet clients.

-

+

🔐 Validator Setup

-

+

Set up and manage your Starknet validator node.

@@ -107,36 +107,36 @@ export default function Home() {

Supported Clients

-
-

Execution Layer

-
    +
    +

    Execution Layer

    +
    • • Geth
    • • Reth
    -
    -

    Consensus Layer

    -
      +
      +

      Consensus Layer

      +
      • • Lighthouse
      • • Prysm
      -
      -

      Starknet

      -
        +
        +

        Starknet

        +
        • • Juno
        • • Starknet Validator
      -
      -

      📖 Next Steps

      -

      +

      +

      📖 Next Steps

      +

      Ready to dive deeper? Check out our comprehensive guides:

      - Installation Guide + Installation Guide
      diff --git a/docs/src/app/requirements/page.tsx b/docs/src/app/requirements/page.tsx index 8ef1256..9219f30 100644 --- a/docs/src/app/requirements/page.tsx +++ b/docs/src/app/requirements/page.tsx @@ -6,59 +6,63 @@ export default function Requirements() {

      Requirements

      -

      +

      Hardware and software requirements for running Ethereum and Starknet nodes with starknode-kit.

      Hardware Requirements

      -
      -

      📚 Reference

      -

      +

      +

      📚 Reference

      +

      For a detailed breakdown of node hardware requirements, see the Rocket Pool Hardware Guide.

      Minimum Requirements

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      ComponentRequirementNotes
      CPU4+ coresIntel i3/i5 or AMD equivalent. Avoid Celeron.
      RAM32 GBMinimum 16GB, 32GB recommended for comfort
      Storage2+ TB NVMe SSDMust have DRAM cache, no QLC NAND
      Network100+ MbpsStable connection, unlimited data preferred
      Power24/7 uptimeUPS recommended for validators
      +
      +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      ComponentRequirementNotes
      CPU4+ coresIntel i3/i5 or AMD equivalent. Avoid Celeron.
      RAM32 GBMinimum 16GB, 32GB recommended for comfort
      Storage2+ TB NVMe SSDMust have DRAM cache, no QLC NAND
      Network100+ MbpsStable connection, unlimited data preferred
      Power24/7 uptimeUPS recommended for validators
      +
      +

      Recommended Specifications

      @@ -77,43 +81,47 @@ export default function Requirements() {

      Storage Size

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      ClientCurrent SizeGrowth Rate
      Ethereum (Geth)~1.2 TB~150 GB/year
      Ethereum (Reth)~900 GB~120 GB/year
      Lighthouse~200 GB~50 GB/year
      Prysm~250 GB~60 GB/year
      Juno (Starknet)~300 GB~100 GB/year
      +
      +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      ClientCurrent SizeGrowth Rate
      Ethereum (Geth)~1.2 TB~150 GB/year
      Ethereum (Reth)~900 GB~120 GB/year
      Lighthouse~200 GB~50 GB/year
      Prysm~250 GB~60 GB/year
      Juno (Starknet)~300 GB~100 GB/year
      +
      +

      SSD Requirements

      @@ -127,9 +135,9 @@ export default function Requirements() {
    • ✅ NVMe interface - SATA SSDs are too slow
    -
    -

    ⚠️ Warning

    -

    +

    +

    ⚠️ Warning

    +

    Using a QLC SSD or SSD without DRAM cache will result in poor performance and potential node failures. See the tested SSD list for recommendations.

    @@ -195,38 +203,42 @@ make --version`} />

    Ensure these ports are accessible:

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    PortProtocolPurpose
    30303TCP/UDPEthereum execution P2P
    9000TCP/UDPLighthouse consensus P2P
    13000TCPPrysm consensus P2P
    6060TCPJuno RPC (localhost only)
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    PortProtocolPurpose
    30303TCP/UDPEthereum execution P2P
    9000TCP/UDPLighthouse consensus P2P
    13000TCPPrysm consensus P2P
    6060TCPJuno RPC (localhost only)
    +
    +

    For Validator Nodes

    @@ -278,38 +290,42 @@ make --version`} />

    If running in the cloud, recommended specifications:

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    ProviderInstance TypeEst. Cost/Month
    AWSm5.2xlarge + 4TB gp3~$500-700
    Google Cloudn2-standard-8 + 4TB SSD~$600-800
    AzureStandard_D8s_v3 + 4TB Premium SSD~$550-750
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    ProviderInstance TypeEst. Cost/Month
    AWSm5.2xlarge + 4TB gp3~$500-700
    Google Cloudn2-standard-8 + 4TB SSD~$600-800
    AzureStandard_D8s_v3 + 4TB Premium SSD~$550-750
    +
    +
    -
    -

    💡 Cost Consideration

    -

    +

    +

    💡 Cost Consideration

    +

    Running on dedicated hardware is often more cost-effective long-term than cloud hosting, especially for validators.

    diff --git a/docs/src/app/validator/page.tsx b/docs/src/app/validator/page.tsx index 156aa27..f7387a2 100644 --- a/docs/src/app/validator/page.tsx +++ b/docs/src/app/validator/page.tsx @@ -5,13 +5,13 @@ export default function Validator() {

    Validator Setup

    -

    +

    Set up and manage your Starknet validator node using starknode-kit.

    -
    -

    ⚠️ Important

    -

    +

    +

    ⚠️ Important

    +

    Running a validator requires significant responsibility. Make sure you understand the requirements and risks before proceeding.

    @@ -209,9 +209,9 @@ starknode-kit monitor`} />
  • Penalties - For downtime or malicious behavior
-
-

💡 Tip

-

+

+

💡 Tip

+

Start on the testnet (Sepolia) to familiarize yourself with validator operations before running on mainnet.

@@ -224,13 +224,13 @@ starknode-kit monitor`} />
  • GitHub Repository
    • -
    -

    📖 Next Steps

    -

    +

    +

    📖 Next Steps

    +

    Ready to dive deeper? Check out our comprehensive guides:

    - System Requirements + System Requirements
    diff --git a/docs/src/components/CodeBlock.tsx b/docs/src/components/CodeBlock.tsx index 8f6f33e..f12527e 100644 --- a/docs/src/components/CodeBlock.tsx +++ b/docs/src/components/CodeBlock.tsx @@ -17,17 +17,17 @@ export default function CodeBlock({ code, language = 'bash' }: CodeBlockProps) { }; return ( -
    +
    - 
    -        
    {code}
    
+      
    +        
    {code}
    ); diff --git a/docs/src/components/Header.tsx b/docs/src/components/Header.tsx index 7be998d..973e120 100644 --- a/docs/src/components/Header.tsx +++ b/docs/src/components/Header.tsx @@ -2,16 +2,49 @@ import Link from 'next/link'; -export default function Header() { +interface HeaderProps { + onMenuClick: () => void; +} + +export default function Header({ onMenuClick }: HeaderProps) { return ( -
    -
    -
    +
    +
    + {/* Hamburger button for mobile */} + + + {/* Mobile title - shown only on mobile */} +
    + + starknode-kit + +
    + + {/* Social links */} +
    @@ -26,7 +59,7 @@ export default function Header() { href="https://t.me/+SCPbza9fk8dkYWI0" target="_blank" rel="noopener noreferrer" - className="text-gray-600 hover:text-gray-900 transition-colors" + className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" aria-label="Telegram" > diff --git a/docs/src/components/Sidebar.tsx b/docs/src/components/Sidebar.tsx index 0c7c350..f6d3f17 100644 --- a/docs/src/components/Sidebar.tsx +++ b/docs/src/components/Sidebar.tsx @@ -2,6 +2,7 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import { useState, useEffect } from 'react'; interface NavItem { title: string; @@ -20,7 +21,12 @@ const navigation: NavItem[] = [ { title: 'Contributing', href: '/contributing' }, ]; -export default function Sidebar() { +interface SidebarProps { + isOpen: boolean; + onClose: () => void; +} + +export default function Sidebar({ isOpen, onClose }: SidebarProps) { const pathname = usePathname(); const isActive = (href: string) => { @@ -28,33 +34,87 @@ export default function Sidebar() { return pathname.startsWith(href); }; + // Close sidebar when route changes on mobile + useEffect(() => { + onClose(); + }, [pathname, onClose]); + + // Prevent body scroll when mobile menu is open + useEffect(() => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'unset'; + } + return () => { + document.body.style.overflow = 'unset'; + }; + }, [isOpen]); + return ( -
    - -

    - starknode-kit -

    -

    Documentation

    - -
    - - - + <> + {/* Backdrop for mobile */} + {isOpen && ( +
    + )} + + {/* Sidebar */} + + ); } diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts index f67c807..e85b68c 100644 --- a/docs/tailwind.config.ts +++ b/docs/tailwind.config.ts @@ -1,6 +1,7 @@ import type { Config } from "tailwindcss"; const config: Config = { + darkMode: "class", content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}",