Navigation latérale responsive

Un cadre réutilisable pour la navigation applicativeLien vers la section

ResponsiveSidebar donne à une application React un shell borné : navigation persistante sur le md point d'arrêt, un panneau latéral mobile du côté gauche, une région d'en-tête et d'action et un repère de contenu principal. La marque, les routes, l'état actif, les étiquettes, les icônes, les badges, le pied de page, les actions et le contenu de la page restent la propriété du consommateur.

Il n'inclut pas l'authentification, l'identité de l'utilisateur, la facturation, les données du tableau de bord, les appels backend ou la navigation spécifique au produit.

Identité canoniqueLien vers la section

L'identité du registre est réservée aux futurs travaux de distribution. Ce n'est pas une méthode d'installation disponible et ce bloc ne crée pas de métadonnées de Registre ou de JSON généré.

Copier la sourceLien vers la section

Configurez le paquetage public de l'interface utilisateur et tokens, puis créer src/components/blocks/responsive-sidebar/ dans votre application. Copiez les trois fichiers ci-dessous, en conservant leurs importations relatives et leurs directives client. Dans l’onglet Source, choisissez un fichier et utilisez son bouton de copie, ou sélectionnez le code manuellement lorsque l’accès au presse-papiers n’est pas disponible.

Pour récupérer les trois fichiers à la fois, ouvrez Code à télécharger ZIP dans les Blocage du catalogue. Extrayez l'archive et déplacez son src/components/blocks/responsive-sidebar/ dossier dans votre application.

Structure du fichierLien vers la section

Importation ResponsiveSidebar et ses types à partir du répertoire index.tsx point d'entrée. Personnalisez la navigation sans modifier la disposition environnante.

L'onglet Aperçu rend le canonique réel ResponsiveSidebar avec la navigation et le contenu fictifs des consommateurs. Ses liens restent à l'intérieur du document d'aperçu et aucun réseau ou comportement de service de produit n'est ajouté. L'onglet Source inclut les fichiers canoniques complets au moment de la construction, pas une implémentation dupliquée.

Votre copie de application ne reçoit pas de mises à jour automatiques. Suivez l'exemple d'utilisation ci-dessous, connectez votre propre comportement et validez-le dans votre application. Retour à l'accueil Blocage du catalogue pour choisir un autre modèle.

Installer en copiant la sourceLien vers la section

1. Copier le texte complet responsive-sidebar un répertoire vers un chemin appartenant à l'application, tel que src/components/blocks/responsive-sidebar/.
2. Installer React 18 ou plus récent et le public @pycolors/ui paquet.
3. Charger le public @pycolors/tokens/tokens.css contrat et configure les utilitaires Tailwind sémantiques existants utilisés par votre application.
4. Importez le bloc à partir de son point d'entrée local copié.

"use client";

import { ResponsiveSidebar } from "./components/blocks/responsive-sidebar";

const items = [
  { id: "overview", label: "Overview", href: "/overview" },
  { id: "projects", label: "Projects", href: "/projects", badge: "4" },
] as const;

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <ResponsiveSidebar
      activeItemId="overview"
      brand={<strong>Acme</strong>}
      headerActions={<button type="button">Create project</button>}
      headerTitle={<h1>Overview</h1>}
      items={items}
      mobileDescription="Choose a workspace destination."
      mobileTitle="Workspace navigation"
      navigationLabel="Primary workspace navigation"
      sidebarFooter={<small>Acme workspace</small>}
    >
      {children}
    </ResponsiveSidebar>
  );
}

Les icônes sont des nœuds React appartenant au consommateur en option. Le bloc traite le contenu des icônes comme décoratif et conserve l'étiquette de l'élément visible comme nom accessible du lien.

PropsLien vers la section

La prévisualisation inclut les vues locales Vue d'ensemble, Projets et Équipe, la navigation groupée, une identité d'espace de travail et un pied de page membre. « Ajouter un projet de démonstration » ajoute une ligne fictive uniquement dans la prévisualisation. Aucun projet n'est enregistré ou envoyé à un backend. Les liens de guidage d'intégration sont des liens de navigation ordinaires. Utilisez le contrôle Réinitialiser de l'aperçu pour revenir à l'état initial.

Lorsque vous intégrez le shell dans une page existante, passez contentAs="div" pour éviter d'imbriquer les principaux repères. La valeur par défaut reste contentAs="main" pour un shell d'application complet. Le lien de saut cible toujours l'élément de contenu focalisable. La feuille mobile a un titre et une description accessibles visuellement cachés de sorte que la marque de l'espace de travail apparaît une fois. Les étiquettes de navigation et les liens de navigation à écran étroit et le déclencheur de menu ont une hauteur d'au moins 44 pixels.

Les identifiants des éléments de navigation doivent être uniques et stables items et chaque groupe. Le bloc ne dérive jamais un comportement actif des étiquettes ou des URL.

Comportement réactifLien vers la section

• Ci-dessous md, la barre latérale persistante est masquée et le déclencheur d'en-tête étiqueté ouvre un panneau latéral de gauche.
• La feuille est limitée à la largeur de la fenêtre d'affichage et répète la même marque de consommateur, la navigation, les groupes, l'état actif et le pied de page facultatif.
• La navigation par ancre native ferme le panneau latéral. Un routeur personnalisé doit invoquer le onNavigate rappel après l'activation.
• À md et au-dessus, la w-64 la barre latérale est collante, viewport-height, et indépendamment scrollable tandis que l'en-tête et le contenu principal restent flexibles avec min-w-0.
• La visibilité réactive utilise les utilitaires CSS plutôt que le JavaScript viewport.

Adaptation du routeurLien vers la section

Le moteur de rendu par défaut utilise des ancres natives. Adapter un routeur client via renderLink; préserver les classes fournies, la sémantique active, les enfants et le rappel de proximité mobile.

<ResponsiveSidebar
  {...shellProps}
  renderLink={({ active, children, className, item, onNavigate }) => (
    <RouterLink
      aria-current={active ? "page" : undefined}
      className={className}
      href={item.href}
      onClick={onNavigate}
    >
      {children}
    </RouterLink>
  )}
>
  {children}
</ResponsiveSidebar>

RouterLink est un espace réservé pour le composant routeur du consommateur ; le bloc canonique n'importe pas Next.js ou une autre bibliothèque de routage.

Accessibilité et comportement du clavierLien vers la section

• Un lien de saut visible à la focus cible le focusable unique main Un point de repère.
• La navigation sur les ordinateurs de bureau et les appareils mobiles expose l'étiquette de consommateur requise.
• Le lien natif actif utilise aria-current="page".
• Le déclencheur mobile est une étiquette Button avec un style de focus visible.
• Le public @pycolors/ui La feuille fournit le confinement de la focus, l'échappement et le rejet de l'interaction extérieure, un bouton de fermeture étiqueté et la restauration de la focus sur le déclencheur.
• SheetTitle et SheetDescription Fournissez le nom et la description du dialogue mobile.
• La navigation reste la navigation native de lien ; il n'y a pas de focus roving personnalisé ou de modèle flèche-clé.

Les consommateurs doivent garder les étiquettes des articles visibles, préserver aria-current dans un moteur de rendu personnalisé, fournir une navigation significative et des étiquettes Sheet, et éviter de placer une seconde main Point de repère à l'intérieur children. Ces garanties sont vérifiées par des tests ciblés d'interaction et de hache; elles ne sont pas une demande de certification WCAG complète.

Stylisme et personnalisationLien vers la section

Le bloc utilise des utilitaires d'arrière-plan sémantique, de premier plan, de sourdine, de bordure, d'accent et d'anneau soutenus par le contrat de tokens publics. Il hérite des valeurs de token clair ou foncé du consommateur et n'introduit aucune couleur, police, fournisseur de thème, CSS global ou copies primitives locales de l'interface utilisateur.

Après la copie, le consommateur est propriétaire de la personnalisation et de la maintenance future. Comparez délibérément les modifications canoniques futures et appliquez uniquement les mises à jour qui correspondent à l'application. La restauration est la suppression ou la réversion du répertoire copié et de son intégration locale ; aucune version de paquet ou état de bloc distant n'est impliqué.

Non-buts explicitesLien vers la section

Ce bloc ne fournit pas d'état utilisateur/de session, d'autorisations, de facturation, de mesures, de récupération de données, d'actions serveur, de navigation de produit, de tableau de bord complet, de package, d'élément de Registre, de JSON de Registre généré, d'interface de ligne de commande, de mises à jour automatiques, de version ou de déploiement. Starter Free a informé la composition mais n'est pas importé et n'est pas l'autorité source.