Next.js 13 w Praktyce: Link w nawigacji

0:01Teraz przejdźmy do stworzenia komponentu z linkiem w naszym barze tutaj.

0:08Jeżeli spojrzymy na design dostarczony

0:10nam, to widzimy, że każdy link ma jakąś ikonę.

0:13Jeżeli jest on aktywny, to ta ikonka generalnie rzecz biorąc inny

0:18kolor też ma inny kolor, bo ekran ma inny kolor.

0:21Tutaj po prawej stronie mamy jakiś border.

0:23Można powiedzieć o takim kolorze.

0:25Jeżeli ta ikonka nie jest aktywna, to widzimy, że to jest typ ikonki field.

0:31Także możemy przypuszczać, że musimy sobie

0:33znaleźć jakieś ikonki, które mają filter regular.

0:37Ja tak się składa, że generalnie do

0:39większości swoich projektów wykorzystuję remiks A Icons.

0:43To jest platforma z open source owymi

0:46ikonkami, dlatego w tym momencie możemy ją wykorzystać I

0:51jeżeli chodzi o instalację, to tak naprawdę instaluje się to bardzo prosto.

0:56Wystarczy, że zrobimy npm Install Remix Icon w naszym w naszym projekcie.

1:03Przejdźmy teraz do naszego terminala U.

1:07Pijemy tą aplikację, zrobimy sobie clear

1:09i w tym momencie npm Install Remix Icon minus Save.

1:15Zapisujemy sobie te ikony w naszym projekcie.

1:19PM Randy Restartujemy nasz projekt.

1:22Wróćmy do edytora kodu.

1:25W tym momencie będziemy potrzebowali

1:27wyodrębnić jednak ten link i przekazywać jako propsy.

1:31Myślę, że najlepiej byłoby przekazywać nazwę, ikonka nazwy, ikonki

1:37i tak naprawdę tekst, który musimy użyć tutaj jako jako tekst w naszej nawigacji.

1:43Przejdźmy teraz do

1:46stworzenia takiego komponentu lub wejdźmy sobie tutaj do komponent i

1:50zrobimy sobie komponent o nazwie App na link Test X i w tym momencie eksport.

2:01I fold function na link i standardowo zrobimy funkcję function.

2:12Jeżeli chodzi o logikę samej funkcji, to kilka rzeczy będzie tutaj potrzebnych.

2:17Generalnie musimy odczytać na którym aktualnie użytkownik się

2:22znajduje, żeby móc zastosować odpowiednie style, tzn.

2:25żeby móc powiedzieć czy akurat ten endpoint jest aktywny czy nie.

2:30Dlatego teraz zróbmy sobie tutaj const name.

2:38I jako paw nam weźmiemy sobie z ust huk.

2:43To jest huk.

2:44Wystarczy nam next navigation.

2:47Już widzimy, że używamy huku.

2:49Dlatego też prawdopodobnie musimy zrobić ten komponent jako klient.

2:53Klient Komponent, czyli klient.

2:57Zapisujemy to sobie i tutaj jeżeli chodzi o to czy

3:01dany komponent jest aktywny to będziemy musieli sprawdzić aktualny PA name

3:07z tym co podane jest w naszym propsie jako href.

3:11Generalnie rzecz biorąc ten app na link.

3:13Jeżeli spojrzymy na typ props, które będziemy tutaj przekazywać no

3:18to będziemy mieli nasz interfejs, rozszerzymy sobie i app na link props.

3:25To są propsy, które będziemy przekazywać w naszym przypadku.

3:28Chcieliśmy tutaj przekazywać icon name

3:32w postaci string i chcieliśmy przekazywać też tekst w postaci string.

3:39Do czego będzie to przydatne?

3:40Otóż text to jest to co będzie wyświetlane jako text.

3:44A jeżeli chodzi o ikonę to to

3:46nazwa ikonki, która będzie użyta w danym w danej pozycji w menu.

3:50Natomiast jeszcze zanim to zrobimy wróćmy

3:52do naszego layoutu i sprawmy, żeby te te menu było zaraz pod tym elementem u góry.

3:59Wróćmy do naszego layoutu.

4:01Jeżeli chodzi o App Marketing, tu możemy już zamknąć.

4:06I tutaj ten link i ten nasz musimy opakować w jednego diva.

4:10Tak sprawimy, że generalnie te dwie rzeczy

4:12będą tak naprawdę leżały koło siebie w naszej hierarchii.

4:17No i zapiszemy to sobie.

4:18Sprawdźmy, czy mamy naszą aplikację wysportowaną.

4:21Nasza aplikacja jest wystartowała na.

4:23Wróćmy do Visual Studio.

4:24Kod jeszcze raz mamy div na link jak najbardziej jest ok.

4:34I to musimy jeszcze zrobić.

4:36Oczywiście klasę.

4:39Flex i flex Cool.

4:44Zapisujemy to sobie, odświeżamy naszą stronę.

4:46No i już.

4:47Jak widzisz mamy tutaj nawigację zaraz po tym.

4:50Teraz możemy zająć się sterowaniem tego poszczególnego elementu.

4:53Ja sobie wezmę taki podstawowy element przekopuje tutaj return.

5:00Mamy ten link.

5:01Oczywiście musimy to sobie zaimportować tutaj z biblioteki Next.

5:05I teraz tak w tym miejscu będziemy

5:08wykorzystywać proxy, które będziemy podawać do tego linku.

5:11Czyli to będzie nasz tekst.

5:17Props.

5:18Tekst.

5:21W tym momencie przekazujemy props i to jest o typie app na link props.

5:28Jeżeli chodzi o href no to props.

5:31Chcielibyśmy tutaj przekazać.

5:33Natomiast jest jednym problem.

5:34Nie chcielibyśmy tutaj kopiować procesów, które natywnie dostaje

5:39komponent Link, dlatego też możemy sobie zaimportować link.

5:44Props tutaj z next link.

5:49Jest to eksportowana wartość i tutaj

5:51możemy rozszerzyć nasz interfejs extends link proxy.

5:57Tak sprawimy, że generalnie rzecz biorąc

6:00będziemy mieli już do czynienia z tym, że będziemy mogli

6:04sobie użyć tutaj w naszym href jako props href.

6:12Zapisujemy to sobie.

6:17Tutaj, jako że jest wymagany typ generyczny, dlatego możemy dodać anon.

6:25I w tym momencie już mamy statystycznie o typowany nasze propsy.

6:29Jeżeli chodzi o dalszą część to na pewno href mamy za sobą.

6:34Będziemy potrzebowali.

6:35Teraz po props text będziemy potrzebowali wyświetlić naszą ikonkę.

6:41Czyli prawdopodobnie musimy sobie tutaj owinąć nasz props text w tak.

6:49Łatwo zamienimy na wartość.

6:52Jeżeli chodzi o przed tym podziałem powoli

6:54miejsce na ikonkę to będzie tak i na razie zostawimy sobie to w taki sposób.

6:59Bo jeżeli chodzi o remix Icons to wszystkie to one przychodzą.

7:03Jeżeli chcielibyśmy użyć np.

7:04Arrow Ride App, no to musimy użyć

7:07i o odpowiedniej klasie i to jest stałe dla komponentów właśnie z Remix Icons.

7:14I tutaj generalnie jest nazwa.

7:17Naszej ikonki.

7:18Tutaj jest typ naszej ikonki czyli lin albo filtr.

7:23Jeżeli chodzi o ikonki typu filtr.

7:27Możemy sobie sprawdzić nasze wariacje.

7:29Tutaj mamy fill, jest fill, czyli jest line albo fill.

7:33I w tym momencie jeżeli chodzi o naszą

7:35ikonkę, no to będziemy musieli tak naprawdę popracować nad klasą, żeby

7:41dynamicznie wbudowany został tutaj dla nas klasy i co będziemy potrzebować.

7:45Generalnie otwieramy sobie dynamiczny

7:47string i to co mówiliśmy R i jest stałe dla wszystkich ikonek w paczce Remix Icons

7:54i tutaj potrzebujemy wyciągnąć Icon name Jeżeli będziemy mieli już ten icon.

8:01No to tutaj teraz w zależności od tego czy link jest aktywny czy nie, będziemy

8:07musieli odpowiednio dodawać fill albo line.

8:10Czyli w przypadku kiedy jest is active i z active musimy sobie dopiero stworzyć.

8:17Natomiast tutaj

8:19jeżeli jest aktywny zrobimy sobie fill, a jeżeli jest link nieaktywny.

8:22Zrobiłem sobie line i to pozwoli nam już dynamicznie budować sobie te ikonki.

8:26Natomiast jeżeli chodzi o logikę i active to tutaj wykorzystamy.

8:30Paw name is active to się równa i to sprawdzamy.

8:35Jeżeli name jest równy props.

8:40Chlew lub paw prawny.

8:45Możemy sobie zmienić na camel case

8:47i to w drugim przypadku jest równe propsy i kropka pewny.

8:53Tutaj będziemy mieli problem, bo oczywiście nie istnieje.

8:57Natomiast możemy sobie tutaj zmapować ten typ, zrobić to jako urlop i już.

9:02W tym momencie mamy prop is active,

9:05który powinien nam wyświetlać nasze odpowiednie ikonki.

9:09Teraz jak przejdziemy sobie tutaj do

9:10naszego layoutu, no to spróbujmy wykorzystać nasz nowy komponenty.

9:14Zobaczymy w jaki sposób jest to tutaj wyświetlane.

9:17Jeżeli chodzi o ikonki to nazwy tych ikonek już się podaję.

9:22Ja sobie sprawdziłem wcześniej, żeby też nie tracić dużo czasu.

9:25Tutaj sobie tylko zamienimy te nazwy na nasz app na link to jest nasz app link.

9:32No i oczywiście potrzebuję kilku jeszcze dodatkowych rzeczy.

9:36Generalnie potrzebujemy icon name i w przypadku Dashboard będzie dashboard.

9:41Jeżeli potrzebujemy text tak jak w przypadku Dashboard text to będzie to co

9:46mamy tutaj, czyli możemy sobie to po prostu wyciąć, wkleić to miejsce i tutaj

9:51zrobić self clothing tak żeby nie musieć przekazywać żadnego children do środka.

9:56Zrobimy sobie na tej samej zasadzie tutaj, czyli tutaj.

9:59Najpierw icon name.

10:00Potrzebujemy.

10:03W przypadku subskrypcji będzie File Text.

10:08Jeżeli chodzi o tekst to oczywiście

10:11są w skrypcie tak zapiszemy self close tak zamkniemy z kasujemy to co mamy.

10:17Tutaj zapiszemy sobie naszą logikę.

10:19Sprawdźmy teraz naszą stronę jak to wszystko wygląda.

10:21Odświeżyłam ją i póki co jeszcze nie widzimy za bardzo tutaj żadnych zmian.

10:28Jeżeli chodzi o bazowe style to na pewno będzie flex, na pewno będzie WiFi.

10:34Zapiszemy to sobie Już na pewno będzie tutaj Items Center.

10:41I na pewno potrzebujemy jakiś klub zrobić.

10:45Jeżeli chodzi w naszym przypadku niech to

10:46będzie GAP na 2 x ustawiony na 8 i p y na 4.

10:54Już odsunęły się te dwa elementy.

10:55Sprawdźmy, czy nasze i tak naprawdę są tutaj.

10:59Jest coś renderowane, natomiast tak

11:01naprawdę nie widzimy tutaj jeszcze naszej ikonki.

11:05Zanim sobie jednak naprawimy sytuację z

11:07naszymi ikonkami, zmieńmy tutaj klasę na font i pod.

11:14Tutaj symbol powinno się pojawić.

11:16Sprawdźmy teraz te ikonki dlaczego nam się nie wyświetlają.

11:19Póki co

11:21sprawdziłem jeszcze instalację Remix Icon i oczywiście musimy sobie jeszcze dodać w

11:25naszym głównym layoucie import styli, żeby one były dostępne w naszej aplikacji.

11:29Dlatego przejdźmy teraz do głównego layoutu naszej aplikacji

11:33i tutaj, gdzie importujemy globalne style CSS, możemy też zaimportować remix Icon.

11:39Już w tym momencie ikonki są jak widzisz dostępne.

11:43Przejdźmy teraz dalej do sterowania

11:46tego komponentu, szczególnie związanego z naszym z naszym linkiem.

11:51Bo generalnie rzecz biorąc, jeżeli ten

11:53link jest aktywny, potrzebujemy widzimy, że już File Line się zmienia.

11:57No bo jeżeli przejdziemy na subskrypcję,

11:59to już ikonki się zmieniają, to znaczy, że ten list active jest poprawny.

12:02Natomiast musimy to jeszcze wykorzystać

12:04tutaj w logice związanej z naszymi stylami i żeby móc budować style.

12:13Jeżeli chodzi o kondycje, czyli jeżeli coś jest prawdziwe to aplikujemy taki styl.

12:18Mamy bardzo fajną paczkę, która się nazywa Cell X.

12:22Teraz sobie zainstalujemy tą paczkę w naszym w naszym projekcie npm Install

12:30Cells X Zainstalujemy paczkę, znowu odpalimy nasz serwer.

12:35Wróćmy teraz do naszego edytora kodu

12:39i tutaj w tym momencie będziemy potrzebowali nowej wartości.

12:42Musimy to rapować.

12:44Musimy tutaj wywołać funkcję Cells X i funkcja.

12:48Cel Ethics jest funkcja, którą możemy sobie zaimportować bezpośrednio Select X w

12:54naszym projekcie, czyli tutaj Import select x x.

12:58Mamy taką funkcję i teraz tutaj jako

13:00style, które będą kondycyjnie nadawane w razie kiedy będzie

13:05tutaj is active to musimy odpowiednio zmienić style tego buttona.

13:10Czyli sprawdźmy teraz is active

13:14end I tutaj teraz zrobimy sobie tak potrzebujemy border.

13:21Prawą stronę.

13:224.

13:23Potrzebujemy jak najbardziej

13:26zmienić kolor tego kolorowego border border z img i zróbmy na razie na 400.

13:33Zapiszemy sobie te zmiany.

13:36Na razie nie widać nic.

13:38Sprawdźmy dalej.

13:41Zróbmy sobie BG link, bo jeżeli to jest link aktywny, to tak

13:47naprawdę chcemy mieć tło całkowicie czarne.

13:52I dodatkowo jeżeli chodzi o

13:56kolejną rzecz to chcemy sobie zrobić text z ING i ustawić ten tekst na 50.

14:03Zapiszemy to sobie, odświeżamy naszą

14:05stronę i już mamy odpowiednio aplikowane style kondycyjne w zależności od tego

14:11gdzie jesteśmy w naszej aplikacji aplikacji.

14:14Przepraszam, style aplikują się kondycyjnie.

14:16Jeszcze raz wyjaśnię tę logikę.

14:18Wykorzystujemy bibliotekę CSS X, która

14:20melduje nam style w zależności od tego czy is activ jest true lub false, czyli tutaj

14:25odczytujemy sobie pas, na którym nasz użytkownik się znajduje.

14:29Jeżeli path name jest taki sam jak nazwa,

14:32którą podajemy tutaj prop się czyli ten tekst.

14:36No to sprawdzamy sobie to i aplikujemy w

14:38zależności od tego, czy to jest aktywny paw.

14:40No i jeżeli to jest równe paw z użytego hooka znaczy że jest to tutaj.

14:46W tym przypadku aplikujemy sobie aktywne style dla całego linka.

14:51Natomiast tutaj w tym przypadku style aplikowane są.

14:56Tutaj jest także oś tego czy jest is active czy nie.

14:59Style aplikowane są na ikonkę, czyli tu mamy ikonkę Filtr, tu mamy linię.

15:02Jeżeli przełączy się to już teraz jest Field, a tutaj jest Lime.

15:06Tak wygląda logika komponentu linków w naszej nawigacji.

15:11Teraz przejdźmy tutaj do

15:13tej niższej części, czyli do dodawania nowej subskrypcji i do tego batona z

15:17naszym userem, który jest który widzimy tutaj na naszym designie.

15:20Przejdziemy do budowania tej części i do budowania tej części tutaj poniżej.