Next.js 13 w Praktyce: SignOut

0:00Teraz jeżeli chodzi o tę funkcjonalność tutaj do wylogowania się użytkownika, to

0:05będziemy prawdopodobnie musieli skorzystać z zewnętrznej paczki.

0:09Jeżeli chodzi o takie elementy

0:12jak drop down, jak listy to bardzo często sięgam po paczki, które są już gotowe,

0:16które całe problemy związane z accessibility z nawigacją za pomocą kibol

0:22klawiatury tak, ale Arial label czytników wszystko mamy to rozwiązane.

0:27Jest kilka znanych bibliotek znanych paczek, z których warto korzystać.

0:32Natomiast zanim przejdę Ci do przedstawienia kilka z nich

0:35zróbmy sobie jeszcze tutaj week na full tych elementów, żeby po prostu odciągnąć

0:40od siebie ten guzik na prawą stronę, tak jak to mamy w designie naszym.

0:44Generalnie rzecz biorąc zamiast po prawej stronie i to jest po lewej stronie, czyli.

0:47Wróćmy teraz do naszego edytora kodu i tutaj sobie ustawimy jeszcze full.

0:53Zapiszę sobie te zmiany, no i już teraz mamy to tak jak powinno wyglądać.

0:56Jeżeli chodzi o ten guzik

0:58i o dodatkowe biblioteki, które sobie wykorzystamy do tego, żeby zbudować tutaj

1:03drop down menu, to mamy kilka możliwości, jeżeli chodzi o

1:07bibliotekę, która jest wykorzystywana tak naprawdę w target i przez twórców Windows.

1:12Winda to jest schedule suit.

1:14Tutaj też mamy menu Drop Down

1:16komponent, który moglibyśmy wykorzystać w naszym projekcie.

1:21O tyle jest to fajnie zrobione, że tak naprawdę całe zagadnienia związane z

1:25accessibility z nawigacją za pomocą klawiatury są tutaj za nas rozwiązane i za

1:32pomocą Skypa mogę sobie wyjść z tego guzika.

1:35Za pomocą tabulacji też przeskakuję sobie

1:37bardzo łatwo focusem, także to tutaj jest wszystko fajnie rozwiązane.

1:41Polecam. Tak naprawdę jeżeli chcesz jeszcze

1:44nie wybrałeś Twojej biblioteki komponentów to zapoznaj się z super.

1:48Kolejnym wyborem, który dosyć zyskuje ostatnio dużą popularność jest szat UI.

1:54Są to gotowe komponenty, które pozwalają nam budować

1:59różne funkcjonalności w naszych aplikacjach.

2:02Generalnie mamy tutaj karty, mamy tutaj

2:04taski, mamy tutaj playground, czyli możemy sobie coś zapisać.

2:09To jest bardziej do miłośników JA czy PTI.

2:13Jeżeli chodzi o formy to też mamy tutaj duże wsparcie prawdopodobnie w naszym

2:18projekcie może sobie wykorzystamy jakiś z tych komponentów.

2:21Natomiast jeżeli chodzi o to co ja wykorzystam jako drop down to

2:26jest biblioteka, radix radix to to jest też gotowe.

2:30Po prostu prymitywy, które są komponentami nie stylowe nimi zupełnie.

2:34Musimy zadbać o style tych komponentów.

2:36Natomiast całe accessibility,

2:38całe problemy z nawigacją za pomocą klawiatury zostaną zdjęte z naszej głowy.

2:42Dlatego skorzystamy sobie tutaj z tego komponentu drop do mniej, który po prostu

2:46tworzy takie proste menu po naciśnięciu guzika wydaje się to proste.

2:50Natomiast generalnie rzecz biorąc, jeżeli przyjdzie Ci do budowania takich

2:54komponentów samemu, to nie są one tak banalnie proste, bo całe problemy związane

3:00z accessibility, z nawigacją, z klawiaturą tutaj z czytnikami Ania Label są tutaj tak

3:05naprawdę dla Ciebie rozwiązane zaimplementowane.

3:08Dodatkowo jeżeli chodzi o plus, tutaj

3:10radix podpowiada w jaki sposób trzeba skonfigurować Cal Window, żeby móc

3:14korzystać tak naprawdę z tych samych animacji, które mamy tutaj już widoczne.

3:19Dlatego skorzystamy tutaj z tego gotowego komponentu.

3:23Pierwsza rzecz, którą sobie zrobimy, to zainstalujemy sobie ten komponent.

3:26Musimy go sobie zainstalować w naszym

3:28projekcie, czyli npm Install radix build drop to menu.

3:32Zaczniemy od tego.

3:34Przejdziemy do naszego terminalu.

3:37Tu sobie zainstalujemy naszą naszą bibliotekę Radix Mini.

3:43Poczekamy chwilkę się zainstaluje, teraz przejdziemy do naszej konfiguracji.

3:48Tak więc tutaj, bo musimy generalnie skonfigurować sobie windę, żebyśmy mieli

3:53podobne czyli friends podobne animacje, czyli wystarczy nam ta sekcja tutaj.

3:58Jeżeli chodzi o frames i animation to na pewno będziemy potrzebować, bo tak

4:03naprawdę będziemy chcieli zaaplikować jakieś animacje na nasz dom.

4:07Możemy to również zrobić pluginem Timeline

4:09Animation, natomiast ja tutaj pójdę tą drogą, którą proponują nam twórcy Radix.

4:14A jeżeli chodzi o tą konfigurację to sobie to skopiuję.

4:18Musimy sobie przejść teraz do konfiguracji Timeline w naszym projekcie.

4:22Poszukajmy tutaj team i tutaj musimy sobie otworzyć extended.

4:26No i tutaj mamy obiekt tak naprawdę, który przyjmie wartości, które sobie skopiowali.

4:32Nie wykorzystujemy tutaj żadnych wartości jeżeli chodzi o te kolory.

4:35Tych kolorów nie będziemy potrzebować.

4:36W naszym przypadku zapiszemy sobie naszą konfigurację.

4:40I teraz przejdźmy sobie do naszego edytora kodu tutaj i zaczniemy używać tych właśnie

4:45prymitywnych obiektów, które są dostarczane nam z tą biblioteką.

4:49Do tego, żeby stworzyć sobie taki drop potrzebujemy jakiegoś triggera.

4:54Jest to bardzo fajnie tutaj opisane.

4:56To API jest dosyć czytelne i to co jest portalem to tak naprawdę to jest.

4:59To, co zostanie wyświetlone jako portal w

5:01naszej aplikacji, czyli te całe menu, które tutaj mamy poniżej.

5:05Przejdźmy sobie tutaj do implementacji tego.

5:08Jesteśmy w naszym komponencie po stronie klienta, czyli jak najbardziej możemy

5:12sobie myślę zaimportować nasz drop down menu z naszego zainstalowanego komponentu.

5:19Możemy zrobić tak samo jak tutaj jak

5:21twórcy, czyli import gwiazdka z drop do menu.

5:25Możemy to teraz zapisać tutaj.

5:27Jeżeli chodzi o drop do menu to otworzymy

5:30tutaj naszego roota w naszym betonie i to jest nasz lutowy komponent.

5:34Co teraz będziemy potrzebować?

5:35Na pewno będziemy potrzebować jakiś

5:37trigger komponent regulujący, czyli nasze tak naprawdę naszym naszą ikonkę.

5:43To będzie nasz trigger, natomiast to musimy sobie opakować drop down trigger.

5:50I tutaj wsadzimy naszą ikonkę.

5:53Zapiszemy to sobie jeszcze.

5:54Tak naprawdę funkcjonalność tutaj nasza nie będzie w ogóle miała miejsca tak

5:58naprawdę, bo póki co nie otwieram, nie otwiera nam się.

6:01Na razie tutaj nic nie funkcjonuje, dlatego musimy się zająć tutaj drop downem

6:05naszymi contentem, który będzie wyświetlany.

6:08Do tego musimy sobie tutaj pod trigger na

6:10pewno otworzyć drogę on Portal, czyli drop on, menu i portal.

6:15To jest coś, co jest wyświetlane tak

6:18naprawdę po naciśnięciu guzika tworzy się portal w naszej aplikacji.

6:22Jeżeli dobrze znasz jak to, to nie powinno być to pojęcie być obce.

6:25Tak naprawdę jeżeli chodzi o content to też owijamy to tak naprawdę menu content.

6:32No i tutaj możemy sobie już wrzucić nasz

6:34właściwy content, który będziemy potrzebowali.

6:37W naszym przypadku będziemy tak naprawdę

6:40potrzebowali tylko jeden drop do menu Item.

6:43Który będzie nam przydatny.

6:45I tutaj jako item możemy skorzystać z gotowego komponentu, który dostarcza nam

6:50kleryk, mianowicie sa sign out button czyli Sign.

6:55Out button od Clarka.

6:57Jeśli zaznaczymy, że Signal od Callback.

7:02Zrobimy sobie, żeby przeniósł nas na stronę źródłową naszej aplikacji.

7:08Czyli tak naprawdę możemy sobie zrobić router i podajemy stronę, do której chcemy

7:13się przenieść po naciśnięciu przycisku Sign.

7:17To będzie po prostu nasza lutowa strona marketingowa.

7:21Jeżeli chodzi o router to musimy

7:23wykorzystać Suka czyli const Router juz router next navigation.

7:31Zapisujemy to sobie i już.

7:33W tym momencie jak nacisnę ten guzik to mam sign out.

7:36Jeżeli nacisnę signal

7:38to powinienem na chwilkę zostać przeniesiony na stronę marketingową.

7:41Mamy wylogowanie i już gotowe.

7:43Czyli zaloguj się znowu naszym użytkownikiem.

7:47Teraz zajmiemy się troszeczkę sterowaniem

7:49tego wszystkiego, bo nie wygląda to przyznaję jakoś zachęcająco.

7:52Na chwilę obecną także.

7:54Wróćmy do sterowania naszego naszego contentu, bo to jest najważniejsza

7:59rzecz, która jest wyświetlana po naciśnięciu guzika.

8:02To jest wrapper content, czyli class.

8:05No i zaczniemy.

8:07Zróbmy sobie menu w.

8:10Na 220 pikseli.

8:12Jeżeli chodzi o zaokrąglanie, to drugą rundę zrobimy.

8:18Jeżeli chodzi o ekran to zróbmy sobie piegi.

8:22Niech będzie z 50.

8:25Padding zróbmy na 4.

8:29Generalnie jeżeli chcemy 5 pikseli padding to ustawmy sobie

8:32na razie na 2 i jeżeli chodzi o shadow to ja mam przygotowany style z boku.

8:38No i tutaj ustaliliśmy sobie shadow

8:40naszego elementu, który jest wyświetlany to sobie po prostu wziąłem z jakiegoś

8:44generatora w internecie do cieni w ten weekend.

8:47Jeżeli chodzi o weekend to zaznaczam

8:49tutaj, że opasce tej transfer będzie zmieniony.

8:52Zobaczę jak to wygląda tutaj.

8:54Jeżeli chodzi o data to to to sobie wziąłem z dokumentacji.

8:58Generalnie rzecz biorąc jeżeli przekazujemy side bottom to generalnie

9:03to będzie wyświetlany, to animacja będzie przychodził z góry na dół.

9:09Taki malutki efekt animacji.

9:11I tutaj mamy animacja, która ma być.

9:14Ma być slide, open fade.

9:16Czyli jeżeli ja zamknę to, to to jest do góry Troszeczkę przesunięte jest White.

9:22I to sobie możemy już tutaj zapisać.

9:24Jeżeli chodzi o menu item no to nie wiem czy musimy to jakoś oscylować.

9:29Myślę, że to co mamy tutaj jest jak najbardziej wystarczające.

9:34Czyli tutaj zostawimy sobie mamy już

9:35funkcjonalność wylogowania naszego użytkownika.

9:38Teraz przejdziemy do budowania kolejnych części w naszej aplikacji.

9:42Mianowicie zajmiemy się

9:44już stroną z portem i tym tutaj całą zawartością, którą mamy po prawej stronie.