Wątek przeniesiony 2023-09-27 10:43 z JavaScript przez Riddle.

Jak zrobić zakładki?

0

Hej, jestem nowy w swiecie NextJS. Chcialbym stworzyc podstrone profil uzytkownika. Na tym forum profil wyglada tak:
screenshot-20230922182330.png

Czyli sa zakladki "Moje konto", "Ustawienia" i "Profil". Po kliknieciu w zakladke, aktualizuje sie tylko zawartosc zakladki (nizej) a cala reszta pozostaje bez zmian (w sensie header, footer itp). W swoim projekcie chcialbym zrobic cos identycznego ale nie wiem jak ulozyc strukture. Powinienem do Layout.tsx dodac Header, 3 przyciski i footer i dla kazdego z przyciskow zrobic podfolder i tam w page.tsx dac to co ma sie wyswietlac po kliknieciu na zakladke? Bo nie chce 3 razy powtarzac kodu skoro jedyne co sie zmienia to zawartosc zakladki. Bede wdzieczny za krotka instrukcje jak to zrobic

EDIT
Zamierzam zrobic jak w tym filmie:
Jesli ktos ma lepszy pomysl to prosze dajcie znac :)

1

Jak masz strukturę

<html>
  <header>
  <sidebar>
  <router>
  <footer>
</html>

To jak klikniesz w jakiś element link, <a href i przekierowuje na /user, to router zwraca ci w tym miejscu component user, który zbindowałeś.
Nie wiem gdzie tu ci się kod powtarza?

Czyli główna strona się nie zmienia, a tylko element router jest podstawiany w zaleźności od adresu na dany Component User, Component Home itp

A co do tego zdjęcia, to musisz ustawić klasę active na elemencie, który został ostatnio kliknięty, żeby style dodać, żeby się wyróżniał od reszty.
A na reszcie usunąć lub po prostu poszukać samych z active i usunąć na nich.

React, akurat routingiem sam podstawia dane componenty, ale mógłbyś mieć listę i w zaleźności od tego co jest zaznaczone to dany obiekt wyrenderować.

https://stackblitz.com/edit/nydp65?file=index.html

1 użytkowników online, w tym zalogowanych: 0, gości: 1