Next.js 13 w Praktyce: Boczna nawigacja

0:00To marketingową część naszej aplikacji

0:02mamy już za sobą, dlatego teraz skupimy się tutaj na części tej

0:07podstawowej naszej działalności działalności naszego startupu, czyli na

0:10dostarczaniu rozwiązania, które ma rozwiązać jakiś problem użytkownika.

0:15I w tym momencie skupimy się na tej bocznej nawigacji.

0:18Będzie to główna nawigacja, czyli Apple J.

0:20Wykorzystamy tutaj komponent A side tag HTML.

0:24Jeżeli chodzi o komponenty tutaj w środku na pewno.

0:27Myślę, że będziemy musieli sobie

0:29wyodrębnić tutaj link, który w zależności od tego gdzie

0:33nasz użytkownik znajduje się na stronie przyjmuje odpowiednią wartość.

0:36Dlatego powinien to być pewnie komponent

0:38po stronie klienta, żebyśmy mogli odczytać aktualny adres URL.

0:42Jeżeli chodzi o ten komponent i dodawanie nowej subskrypcji to

0:47zrobimy sobie póki co zaślepkę, żeby to wyglądało tak jak tutaj.

0:49Natomiast samą logikę dodawania subskrypcji poznamy w następnych modułach.

0:55Jeżeli chodzi o ten komponent tutaj

0:56zarządzania naszym użytkownikiem, to też sobie stworzymy go w tym momencie.

1:00I tutaj jeżeli chodzi o ten mur bottom zrobimy.

1:02Wykorzystamy komponent gotowy, który jest dostarczony nam przez Clarka

1:07przez to rozwiązanie do tego, żeby zarządzać naszym kontem.

1:10Jeżeli chodzi o ten komponent to mamy tutaj już ten guzik.

1:13To będzie działało na podobnej zasadzie co

1:15tutaj ten przycisk, kiedy jesteśmy już zalogowani.

1:17Także wróćmy teraz do naszego Worda i zacznijmy tutaj pracę nad naszym

1:22komponentem AS Site, który pozwoli nam zrobić tutaj tą nawigację.

1:27Natomiast zanim zaczniemy, spróbujemy

1:29tutaj oddzielić tego maina za pomocą background kolor, czyli.

1:34Zrobimy sobie tutaj max.

1:39Screen.

1:40Żeby to była maksymalnie wysokość naszego ekranu zostawimy sobie na krok.

1:46Jeżeli chodzi o overflow to zrobimy sobie 1.

1:49Nie chcemy mieć scroll barów i tutaj jeżeli chodzi o tło

1:54naszej głównej sekcji to będzie to BG Link 200.

1:58Zapiszemy to sobie już mamy.

2:00Naszą główną sekcję oddziela się od sidebar.

2:02Natomiast jako że to jest pod sobą, musimy troszeczkę zmienić sposób wyświetlania

2:07tutaj naszego głównego bohatera, czyli Class Name.

2:11Nie w tym momencie zrobimy sobie flex i flex kol.

2:15Zostawimy sam flex.

2:16W sumie zrobimy sobie po prostu wysokość na full w tym momencie.

2:20No i już mamy wyświetlanie tych elementów po sobie.

2:23Jeżeli chodzi o nasz site to zróbmy sobie class name.

2:27Tutaj będziemy potrzebowali jakąś określoną szerokość.

2:31Na pewno będziemy potrzebowali flex.

2:33Na pewno będziemy potrzebowali właśnie określoną szerokość wielkości 64.

2:37To jest 256 pikseli.

2:39Jeżeli chodzi o ustawienie elementów, to

2:41tutaj musimy odwrócić troszeczkę i chcemy mieć kolumny.

2:45I jeżeli chodzi o

2:48rozdział elementów tutaj na tym idzie to zrobimy sobie czas i fibre Twin.

2:53Żeby były odstępy pomiędzy tymi elementami

2:55to mamy dwie główne sekcje naszej aplikacji.

2:58Jeżeli sobie to rozszerzymy to zobacz, że

2:59aplikacja tak jakby posiada pełną szerokość tutaj.

3:05Wróćmy teraz do budowania

3:07tych podstawowych komponentów, które mamy w tym miejscu.

3:12Generalnie rzecz biorąc musimy tutaj sobie zbudować podobny

3:15komponent, jaki mieliśmy na stronie głównej naszej aplikacji.

3:18Jeżeli teraz wrócimy na stronę główną.

3:20Tak naprawdę potrzebujemy też te logo,

3:23czyli przejdźmy tutaj na dashboard i jeżeli chodzi o page marketing

3:28powinniśmy mieć tutaj to logo, layout, marketing.

3:30Tak, to jest dokładnie

3:33to logo i tak naprawdę myślę, że możemy sobie wykorzystać tutaj ten sam komponent.

3:39Zmodyfikujemy go sobie tylko na potrzeby naszego layoutu, czyli wklejamy sobie

3:45i tutaj trzeba zaimportować link, zaimportować image.

3:50Moje serce logo jest oczywiście póki co niedostępne, dlatego musimy zrobić tutaj

3:55import i w naszym przypadku będzie to podwójna kropka podwójna kropka w kropkę.

4:01Musimy sobie przejść do katalogu public images i logo pieczęci zatrzymamy.

4:07Zachowamy sobie to teraz.

4:09Jeżeli chodzi o tutaj dostajemy, że nie mamy, tzn.

4:14w Class Props Properties.

4:17Oczywiście dlatego, że nie zaimportować

4:19byśmy sobie jeszcze tego elementu tutaj z naszej biblioteki next.

4:23No i mamy już tutaj pierwszy jakby element, który jest u góry mamy te logo.

4:27Natomiast widzimy tutaj wyraźnie, że CAB

4:30jest z małej litery i jest to dużo mniejsze niż u nas na stronie.

4:33Przejdźmy na naszą stronę.

4:35Teraz zamieńmy sobie ten napis na Pocket SAP.

4:38Jeżeli chodzi o font to jest semi bold i już nam się ten napis zmniejszył.

4:43Potrzebujemy zdecydowanie tutaj Flex Items Center jest jak najbardziej ok.

4:49Chcemy czas i fit start i musimy ustawić GAP pomiędzy naszymi elementami.

4:55Niech będzie to samo na dwójkę, żeby

4:57odsunąć się od siebie, no i padding na ósemkę.

5:02W tym przypadku żeby to się troszeczkę usunęło jest wszystko jak najbardziej ok.

5:06Natomiast pierwsza rzecz, która mi się tutaj rzuca w oczy to

5:10nasz tekst Tutaj jest za duży, powinien być na LG ustawiony.

5:15Zostawimy to sobie teraz.

5:18I co jeszcze możemy poprawić.

5:20To tak naprawdę już wszystko Font bold.

5:23Sprawdźmy sobie jeszcze raz.

5:25Design jest jak najbardziej myślę ok na chwilę obecną.

5:29Dobrze, przejdźmy teraz do budowania tych elementów poniżej.

5:33Najpierw zrobimy sobie jakieś zaślepki.

5:35Prawdopodobnie tak jak mówiłem wcześniej,

5:36będziemy musieli sobie wyodrębnić tutaj ten link jako klient komponent.

5:43Natomiast zbudujmy taką podstawową strukturę na chwilę obecną.

5:48Jak to będzie wyglądało?

5:49Zacznijmy od tego, że to będzie nawigacja.

5:51Możemy użyć tagu nawet.

5:53No i tutaj link z naszego

5:57z naszej biblioteki next możemy wykorzystać ten sam komponent.

6:01Jeżeli chodzi o pierwszy link to będzie dashboard.

6:05Jeżeli chodzi o drugi link tutaj to będzie mamy subskrypcję.

6:13No i oczywiście musimy tutaj wykorzystać odpowiednie href.

6:18Tutaj będzie dashboard.

6:19I w tym drugim przypadku jeżeli chodzi o href będziemy mieli subskrypcję.

6:24Zapisujemy to sobie.

6:26Wszystko jest ok.

6:27Odświeżamy naszą stronę.

6:29Mamy Pojawiłeś się na dole przez to, że mamy czas i łatwiej.

6:33Oczywiście linki po prostu są na samym końcu naszej nawigacji.

6:38Jeżeli chodzi o tą ostatnią część z tym betonem to też będziemy to potrzebować.

6:44Natomiast możemy to na razie zrobić tutaj za pomocą pustego drzewa i

6:49sprawdźmy jak to wygląda w widmie subskrypcji.

6:53Później mamy button.

6:55Przejdźmy więc do naszego kodu.

7:01I w tym momencie zrobimy z subskrybcji znak zapytania.

7:09I tutaj zrobimy sobie po prostu na chwilę obecną button, który będzie miał tekst.

7:14Jaki mamy tekst niusa? 1.

7:17Na chwilę obecną nie.

7:19Mięso w sklepie zapiszemy, to przejdźmy do naszej strony.

7:22No już mamy podzieloną nawigację oddzielony od minusa minusa.

7:28Jeszcze tu na końcu będzie ten przycisk z użytkownikiem.

7:31Natomiast przejdźmy teraz do

7:33wyodrębnienia i stylizacji tych linków, które tutaj potrzebujemy.