Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

[Insight extractor] Feature: Collapsible Sidebar with Expand Icon

Ouverte
  • Quelque chose ne va pas ?
#372 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
typescript
Domaine
frontend

Piste de recherche

L’issue ne nomme ni fichiers ni tests. Commencez par localiser les composants de la barre latérale et de la navigation supérieure, puis suivez leur état de réduction et leur comportement de mise en page. Le travail est terminé lorsque la barre latérale se masque et se restaure complètement, que la navigation affiche l’icône d’extension uniquement lorsqu’elle est réduite, que le contenu se redimensionne sans chevauchement et que le comportement fonctionne quelle que soit la taille de l’écran.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Bug
Image Image

Description
When the user clicks the collapse button on the sidebar, the entire sidebar should be hidden. Currently, only part of the sidebar is hidden. Once collapsed, an expand icon should appear in the top navigation bar to allow the user to restore the sidebar.

Requirements

Collapse Behavior

Clicking the collapse button hides the sidebar completely (not partially).

The main content area should automatically expand to use the freed space.

Expand Behavior

When the sidebar is collapsed, an expand icon appears in the top navigation bar.

Clicking this expand icon restores the sidebar to its full width.

UI/UX

Collapse button: positioned inside the sidebar (top-left-corner).

Expand button: positioned inside the top navigation bar (left side).

Image

Use consistent icons (e.g., left/right chevrons) to indicate collapse/expand actions.

Smooth transition animation (e.g., slide in/out or width transition) preferred.

Acceptance Criteria

✅ Sidebar fully disappears when collapse button is clicked.

✅ Top navigation bar shows expand icon when sidebar is collapsed.

✅ Clicking expand icon restores sidebar to full width.

✅ No layout overlap — main content expands/shrinks correctly.

✅ Behavior works across all screen sizes.

Langage dominant
TypeScript
Étoiles
21
Forks
18
Aucune PR mergée en 30 j

Préparer son environnement

  • Fournit un Dockerfile ou un fichier Docker Compose
  • Propose un modèle de pull request
  • Aucun guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de CodeForPhilly/balancer-main

Toutes les issues de CodeForPhilly/balancer-main

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.