React: Osadzanie sidebara w aplikacji

16.8.x

0:00Cześć, jestem mega ciekaw jak udało ci się ostylować twój sidebar, mój

0:04wygląda niemalże identycznie jak w naszym designie, więc wszystko

0:08poszło, okej, podobnie jak uruchamianie zresztą aktywnej klasy

0:12na odpowiednim route'cie. Jeśli pamiętasz z poprzedniego kursu to

0:16musiałem tutaj w sidebarze użyć nie linka jak wcześniej to zrobiłem tylko nav link'a,

0:21który może dostać innego props'a, którego link nie może dostawać

0:25Active Class i to Active Class włącza się wtedy kiedy, podobnie

0:30jak switch w routerze jakiś po prostu, jakaś

0:35ścieżka pasuje do tej, którą mamy w adresie przeglądarki, więc jeśli mamy

0:39tu i teraz to aktywną klasę dostaje nav-link odpowiedzialny

0:43za przekierowanie właśnie do twitters. Musiałem tylko zmienić trochę

0:47kod button icon, który w tej chwili po prostu przyjmuje

0:51tutaj Active. Jeśli to Active się włącza właśnie poprzez

0:55uruchomienie odpowiedniej ścieżki wtedy backgrount kolor

0:59zmienia się na white, czyli biały. Ponadto zaimportowałem

1:04logo, które ostylowałem w taki sposób nadając

1:08mu odpowiednią wysokość, szerokość, importując ikonkę

1:12logo jako właśnie background image nadając mu odpowiednią pozycję,

1:17wielkość tego background'u i dodatkowo jeszcze oplotłem

1:21linki w listę. Cały sidebar dostał oczywiście

1:25Display Flex, Flex ustawiony jest w kolumnę, między

1:30poszczególnymi elementami jest przestrzeń, ponieważ te elementy się

1:34odpychają, a dodatkowo jeszcze dolny przycisk logout ma

1:38margin-top auto, co sprawia, że te

1:43trzy przyciski, które są zamknięte w listę są maksymalnie

1:47odpychane od tego button'a. Jeśli chcesz oczywiście możesz

1:51zerknąć w mój kod i porównać ze swoim. Mam nadzieję, że tobie poszło

1:55równie dobrze. Teraz pora, żeby wsadzić ten sidebar

2:00do naszej aplikacji i tutaj zaczną się schody, ponieważ

2:04chcemy tutaj zrobić kilka dość istotnych zmian, ale zanim

2:08pokażę ci poprawne rozwiązanie, chcę z tobą przejść przez wszystkie takie kroki,

2:13które mogą nam pokazać gdzie można popełnić błąd, więc

2:17pierwsze co zrobimy to wejdziemy sobie do naszego main template. Tutaj

2:23zaimportujemy sidebar i osadzimy go

2:27wewnątrz naszego main template'a i

2:31pierwsze za co dostajemy po głowie od React Router'a

2:36to fakt, że używam linków poza router'em, więc

2:40jak sobie wejdziemy teraz do naszego root'owego widoku to zobaczymy, że template jest poza

2:45routerem faktycznie. Nie może tak być skoro to template zawiera sidebar,

2:49więc musimy zamienić kolejnością te komponenty. Teraz

2:55jak widzisz pojawił się nasz sidebar, z

2:59tym, że nie ma koloru. Dlaczego nie ma koloru? A no dlatego, że

3:04themeprovider jest poza sidebar'em, więc

3:08sidebar teoretycznie powinien znajdować się na

3:13równi z children, a dodatkowo z racji, że theme provider może mieć tylko

3:17jedno dziecko, musimy to opakować we fragment. Już

3:25prawie jesteśmy gotowi, musimy jeszcze tylko w globalstyle uwzględnić

3:34jedną rzecz, szerokość naszego sidebar'a to 150

3:38pikseli nasz sidebar ma position fixed, więc

3:42wszystkie elementy, które byłyby pod nim wskakiwały

3:47bezpośrednio pod niego, ponieważ jestem wyjęty poza taki ogólny

3:51layout, czyli nie wpływają na niego żadne inne elementy, on zawsze będzie tutaj przyklejony

3:55do naszej lewej strony. Nawet jak będziemy mieć jakiegoś scrolla, dlatego tutaj

4:00stąd ten padding 150 pikseli dla body naszej

4:04aplikacji i mogłoby się wydawać, że to dobry pomysł, że

4:08to co zrobiliśmy już ma sens. Natomiast nie wszystkie widoki w naszej

4:12aplikacji mają sidebar, przejść na przykład ekranu logowania, którego nie mają,

4:16więc osadzenie go w tym miejscu nie do końca ma sens. Jest

4:21jeszcze trzecia droga, która moim zdaniem jest najbardziej racjonalna,

4:25czyli stworzenie nowego template'u, który będzie template'm

4:30właśnie z sidebar'em. Możemy

4:35go nazwać na przykład user page template. Czemu

4:40user page? Ponieważ to użytkownik będzie korzystał z tych stron po

4:44zalogowaniu, więc stąd takie nazewnictwo. Wydaje

4:49mi się, że ono jest dość fajne. Zaimportujemy

4:55sobie React'a oczywiście i z

5:02tak przygotowanym template'm możemy sobie teraz przejść do naszych widoków, artykułów,

5:08notatek i twitterów. Zaimportujemy tam sobie nasz user page

5:14template i w

5:25ten sposób po poprawnym zaimportowaniu mamy nasz sidebar

5:30tam gdzie potrzebujemy. Jak się wylogujemy jak

5:34przyjdziemy sobie do route'a login, którego właściwie nie ma, ale to nic,

5:38po prostu widzimy, że jeśli ten warunek nie jest spełniony,

5:42jeśli te trzy widoki się nie wyświetlają to wtedy nasz sidebar znika. Dodatkowo

5:49musimy jeszcze ostylować nasz sidebar tak żeby zmienił swój kolor w zależności od

5:53tego na jakiej stronie się znajdujemy, więc podobnie jak mieliśmy w karcie card type

5:58i mieliśmy tutaj takiego props'a. Jest w tym miejscu, tak

6:02samo tutaj będziemy mieli Page Type. Jak

6:06widzisz dodałem też weryfikację prop types, która jest dokładnie taka sama jak w

6:11moim template, więc po prostu można ją skopiować i teraz na podstawie tego

6:15Page Type będziemy

6:19sobie stylowa znasz sidebar. Możemy sobie z zdestrukturyzować

6:24page type w tym miejscu i podobnie

6:29jak w przypadku karty możemy zrobić coś

6:33takiego. Tylko,

6:39że tutaj zamiast domyślnego białego damy sobie domyślny

6:43żółty w razie gdyby coś się zepsuło. Lepsze to niż nic. Teraz

6:53w style wrapper musimy zrobić Active Color Page

6:57Type i skoro

7:04tutaj już to wszystko dodaliśmy to teraz nie pozostaje nam nic innego jak podać konkretne

7:09props'y w każdym z widoków. Tutaj

7:15to będzie article, w twitterach to będzie twitter i w

7:19notatkach to będzie note i podobnie

7:24jak w komponencie karty możemy tutaj zrobić taką walidację, która pozwoli

7:29nam uniknąć błędów w razie gdybyśmy zrobili gdzieś literówkę, okej

7:40w ten sposób stworzony prop types uchroni nas przed jakimiś tam literówkami, a nasz

7:44sidebar. Jak miał się stylować, tak się styluje, więc

7:50wszystko mamy gotowe z tej strony, możemy ruszać dalej.