DocsLayout.jsx

Go to the documentation of this file.

import { useMemo, useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import PublicLayout from '../../components/Layout/PublicLayout';
import { docGroups } from './docsData';
import './docs.css';
 
export default function DocsLayout({ children }) {
  const [q, setQ] = useState('');
 
  const filtered = useMemo(() => {
    if (!q.trim()) return docGroups;
    const query = q.toLowerCase();
    return docGroups
      .map((g) => ({
        ...g,
        items: g.items.filter((i) =>
          i.title.toLowerCase().includes(query) ||
          i.summary?.toLowerCase().includes(query)
        )
      }))
      .filter((g) => g.items.length > 0);
  }, [q]);
 
  return (
    <PublicLayout>
      <div className="docs-container">
        <aside className="docs-sidebar">
          <div className="docs-search">
            <span className="material-symbols-outlined">search</span>
            <input
              type="text"
              placeholder="Search docs..."
              value={q}
              onChange={(e) => setQ(e.target.value)}
              aria-label="Search documentation"
            />
          </div>
          <nav className="docs-nav">
            {filtered.map((group) => (
              <div className="nav-section" key={group.id}>
                <h3>{group.title}</h3>
                <ul>
                  {group.items.map((item) => (
                    <li key={item.slug}>
                      <NavLink
                        to={`/docs/${item.slug}`}
                        className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
                      >
                        <span className="material-symbols-outlined" aria-hidden="true">{item.icon}</span>
                        <span>{item.title}</span>
                      </NavLink>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </aside>
        <main className="docs-content">
          {children}
        </main>
      </div>
    </PublicLayout>
  );
}