Semantic-Org/Semantic-UI-React

Make website reponsive for mobile devices

Open

#4.150 geöffnet am 6. Feb. 2021

Auf GitHub ansehen
 (4 Kommentare) (2 Reaktionen) (0 zugewiesene Personen)JavaScript (13.136 Stars) (4.065 Forks)batch import
help wantedneeds engineering

Beschreibung

Feature Request

Add responsiveness for mobile devices.

Problem description

When a user accesses the website via a mobile device, it becomes very difficult for them to even access the content as the side menubar cover up the whole screen.

Proposed solution

Allowing the side menu bar to hide automatically when the screen size reduces to a certain dimension.

Screenshot (Mobile view)

semanticuiissue

Contributor Guide

Tech Stack
reactjavascriptcss
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
half day
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Basic knowledge of ReactCSS media queries
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75
Research-Richtung
Investigate the current sidebar component implementation in Semantic UI React (likely the Sidebar or Menu component). Use CSS media queries to hide the sidebar on mobile viewports. Alternatively, consider using React state to toggle sidebar visibility. Since the issue is about the side menubar covering the screen, focus on applying a hidden class or display: none on smaller screens. The repository's documentation may provide guidance on responsive design patterns.