From d6c6504d1f558dab04aae04e7f147d4abcfe90c6 Mon Sep 17 00:00:00 2001 From: Alibek Date: Tue, 13 Feb 2024 19:18:07 +0600 Subject: [PATCH] made all pages --- src/App/create-report/CreateReport.scss | 15 ++ src/App/create-report/page.tsx | 10 +- src/App/profile/AuthGuard.tsx | 35 +++ src/App/profile/Profile.scss | 8 + src/App/profile/layout.tsx | 21 ++ src/App/profile/my-reports/page.tsx | 34 +++ src/App/profile/page.tsx | 20 +- src/App/profile/personal/page.tsx | 48 ++++ src/App/report/[id]/ReportDetails.scss | 180 +++++++++++++ src/App/report/[id]/icons/calendar.svg | 17 ++ src/App/report/[id]/icons/def_image.svg | 8 + src/App/report/[id]/icons/map-pin.svg | 17 ++ src/App/report/[id]/page.tsx | 126 +++++++++ src/Shared/types/author-type.ts | 6 + src/Shared/types/list-type.ts | 4 +- src/Shared/types/location-type.ts | 6 + src/Shared/types/my-reports.ts | 18 ++ src/Shared/types/profile-type.ts | 9 + src/Shared/types/report-image-type.ts | 4 + src/Shared/types/report-type.ts | 21 +- src/Shared/variables/report-status.ts | 11 + src/Widgets/MapSection/HomeMap/HomeMap.tsx | 3 +- src/Widgets/Navbar/NavAuth/NavAuth.tsx | 2 +- .../Navbar/NavLanguage/NavLanguage.scss | 5 +- src/Widgets/Navbar/NavMenu/NavMenu.tsx | 1 - .../ChangePassword/ChangePassword.scss | 80 ++++++ .../ChangePassword/ChangePassword.tsx | 154 +++++++++++ .../ChangePasswordInput.scss | 43 +++ .../ChangePasswordInput.tsx | 51 ++++ .../ChangePasswordInput/icons/eye-off.svg | 15 ++ .../ChangePasswordInput/icons/eye-on.svg | 15 ++ src/Widgets/ProfileForm/ProfileForm.scss | 79 ++++++ src/Widgets/ProfileForm/ProfileForm.tsx | 166 ++++++++++++ src/Widgets/ProfileForm/icons/pen.svg | 8 + src/Widgets/ProfileNav/ProfileNav.scss | 72 +++++ src/Widgets/ProfileNav/ProfileNav.tsx | 47 ++++ src/Widgets/ProfileTable/ProfileTable.scss | 134 ++++++++++ src/Widgets/ProfileTable/ProfileTable.tsx | 94 +++++++ .../CreateReportMap/CreateReportMap.scss | 0 .../CreateReportMap/CreateReportMap.tsx | 7 + src/Widgets/ReportForm/ReportForm.scss | 251 ++++++++++++++++++ src/Widgets/ReportForm/ReportForm.tsx | 195 ++++++++++++++ src/Widgets/ReportForm/icons/arrow-right.svg | 15 ++ src/Widgets/ReportForm/icons/clip.svg | 14 + src/Widgets/ReportForm/icons/pin-image.svg | 17 ++ src/Widgets/ReportForm/icons/pin_icon.svg | 14 + src/Widgets/ReviewSection/ReviewSection.scss | 1 + src/Widgets/SignInForm/SignInForm.tsx | 2 +- src/features/LogoutButton/LogoutButton.scss | 15 ++ src/features/LogoutButton/LogoutButton.tsx | 26 ++ src/features/ProfileAvatar/ProfileAvatar.scss | 37 +++ src/features/ProfileAvatar/ProfileAvatar.tsx | 61 +++++ src/features/ProfileAvatar/icons/pen.svg | 8 + src/features/ReportLike/ReportLike.scss | 13 + src/features/ReportLike/ReportLike.tsx | 24 ++ src/features/ReportLike/icons/like.svg | 8 + src/middleware.ts | 8 +- 57 files changed, 2260 insertions(+), 43 deletions(-) create mode 100644 src/App/profile/AuthGuard.tsx create mode 100644 src/App/profile/Profile.scss create mode 100644 src/App/profile/layout.tsx create mode 100644 src/App/profile/my-reports/page.tsx create mode 100644 src/App/profile/personal/page.tsx create mode 100644 src/App/report/[id]/ReportDetails.scss create mode 100644 src/App/report/[id]/icons/calendar.svg create mode 100644 src/App/report/[id]/icons/def_image.svg create mode 100644 src/App/report/[id]/icons/map-pin.svg create mode 100644 src/App/report/[id]/page.tsx create mode 100644 src/Shared/types/author-type.ts create mode 100644 src/Shared/types/location-type.ts create mode 100644 src/Shared/types/my-reports.ts create mode 100644 src/Shared/types/profile-type.ts create mode 100644 src/Shared/types/report-image-type.ts create mode 100644 src/Shared/variables/report-status.ts create mode 100644 src/Widgets/ProfileForm/ChangePassword/ChangePassword.scss create mode 100644 src/Widgets/ProfileForm/ChangePassword/ChangePassword.tsx create mode 100644 src/Widgets/ProfileForm/ChangePassword/ChangePasswordInput/ChangePasswordInput.scss create mode 100644 src/Widgets/ProfileForm/ChangePassword/ChangePasswordInput/ChangePasswordInput.tsx create mode 100644 src/Widgets/ProfileForm/ChangePassword/ChangePasswordInput/icons/eye-off.svg create mode 100644 src/Widgets/ProfileForm/ChangePassword/ChangePasswordInput/icons/eye-on.svg create mode 100644 src/Widgets/ProfileForm/ProfileForm.scss create mode 100644 src/Widgets/ProfileForm/ProfileForm.tsx create mode 100644 src/Widgets/ProfileForm/icons/pen.svg create mode 100644 src/Widgets/ProfileNav/ProfileNav.scss create mode 100644 src/Widgets/ProfileNav/ProfileNav.tsx create mode 100644 src/Widgets/ProfileTable/ProfileTable.scss create mode 100644 src/Widgets/ProfileTable/ProfileTable.tsx create mode 100644 src/Widgets/ReportForm/CreateReportMap/CreateReportMap.scss create mode 100644 src/Widgets/ReportForm/CreateReportMap/CreateReportMap.tsx create mode 100644 src/Widgets/ReportForm/ReportForm.scss create mode 100644 src/Widgets/ReportForm/ReportForm.tsx create mode 100644 src/Widgets/ReportForm/icons/arrow-right.svg create mode 100644 src/Widgets/ReportForm/icons/clip.svg create mode 100644 src/Widgets/ReportForm/icons/pin-image.svg create mode 100644 src/Widgets/ReportForm/icons/pin_icon.svg create mode 100644 src/features/LogoutButton/LogoutButton.scss create mode 100644 src/features/LogoutButton/LogoutButton.tsx create mode 100644 src/features/ProfileAvatar/ProfileAvatar.scss create mode 100644 src/features/ProfileAvatar/ProfileAvatar.tsx create mode 100644 src/features/ProfileAvatar/icons/pen.svg create mode 100644 src/features/ReportLike/ReportLike.scss create mode 100644 src/features/ReportLike/ReportLike.tsx create mode 100644 src/features/ReportLike/icons/like.svg diff --git a/src/App/create-report/CreateReport.scss b/src/App/create-report/CreateReport.scss index b39459a..b5fdf82 100644 --- a/src/App/create-report/CreateReport.scss +++ b/src/App/create-report/CreateReport.scss @@ -1,5 +1,20 @@ .create-report { + display: flex; + flex-direction: column; + gap: 40px; h2 { text-align: start; } } + +@media screen and (max-width: 768px) { + .create-report { + gap: 30px; + } +} + +@media screen and (max-width: 550px) { + .create-report { + gap: 20px; + } +} diff --git a/src/App/create-report/page.tsx b/src/App/create-report/page.tsx index 37868c6..ad5c67e 100644 --- a/src/App/create-report/page.tsx +++ b/src/App/create-report/page.tsx @@ -1,12 +1,20 @@ import Typography from "@/shared/ui/components/Typography/Typography"; import "./CreateReport.scss"; +import dynamic from "next/dynamic"; + +const DynamicForm = dynamic( + () => import("@/widgets/ReportForm/ReportForm"), + { + ssr: false, + } +); const CreateReport = () => { return (
Написать обращение -
+
); }; diff --git a/src/App/profile/AuthGuard.tsx b/src/App/profile/AuthGuard.tsx new file mode 100644 index 0000000..9cafb69 --- /dev/null +++ b/src/App/profile/AuthGuard.tsx @@ -0,0 +1,35 @@ +"use client"; + +import { apiInstance } from "@/shared/config/apiConfig"; +import { AxiosError } from "axios"; +import { signOut, useSession } from "next-auth/react"; +import { useEffect } from "react"; + +const AuthGuard = ({ children }: { children: React.ReactNode }) => { + const session = useSession(); + const verifyToken = async () => { + try { + const data = { + token: session.data?.access_token, + }; + await apiInstance.post("/token/verify/", data); + } catch (error: unknown) { + if (error instanceof AxiosError) { + if (error.response?.data.code === "token_not_valid") { + signOut({ + callbackUrl: "/", + }); + } + } + } + }; + + useEffect(() => { + if (session.status === "loading") return; + + verifyToken(); + }, [session.status]); + return <>{children}; +}; + +export default AuthGuard; diff --git a/src/App/profile/Profile.scss b/src/App/profile/Profile.scss new file mode 100644 index 0000000..26ae9a7 --- /dev/null +++ b/src/App/profile/Profile.scss @@ -0,0 +1,8 @@ +.profile { + display: flex; + flex-direction: column; + + h2 { + margin-bottom: 50px; + } +} diff --git a/src/App/profile/layout.tsx b/src/App/profile/layout.tsx new file mode 100644 index 0000000..f0d7568 --- /dev/null +++ b/src/App/profile/layout.tsx @@ -0,0 +1,21 @@ +import Typography from "@/shared/ui/components/Typography/Typography"; +import "./Profile.scss"; +import ProfileNav from "@/widgets/ProfileNav/ProfileNav"; +import AuthGuard from "./AuthGuard"; + +const Profile = ({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) => { + return ( +
+ Личный кабинет + + + {children} +
+ ); +}; + +export default Profile; diff --git a/src/App/profile/my-reports/page.tsx b/src/App/profile/my-reports/page.tsx new file mode 100644 index 0000000..501fa0a --- /dev/null +++ b/src/App/profile/my-reports/page.tsx @@ -0,0 +1,34 @@ +import { apiInstance } from "@/shared/config/apiConfig"; +import { authConfig } from "@/shared/config/authConfig"; +import { IMyReportsList } from "@/shared/types/my-reports"; +import ProfileTable from "@/widgets/ProfileTable/ProfileTable"; +import { getServerSession } from "next-auth"; +import React from "react"; + +const MyReports = async () => { + const session = await getServerSession(authConfig); + + const getMyReports = async () => { + const Authorization = `Bearer ${session?.access_token}`; + const config = { + headers: { + Authorization, + }, + }; + const res = await apiInstance.get( + "/users/reports/", + config + ); + + return res.data; + }; + + const data: IMyReportsList = await getMyReports(); + return ( +
+ +
+ ); +}; + +export default MyReports; diff --git a/src/App/profile/page.tsx b/src/App/profile/page.tsx index 166d4e2..a54c709 100644 --- a/src/App/profile/page.tsx +++ b/src/App/profile/page.tsx @@ -1,19 +1,7 @@ -"use client"; +import React from "react"; -import { signOut } from "next-auth/react"; -import Link from "next/link"; - -const Profile = () => { - return ( -
- signOut({ callbackUrl: "/sign-in" })} - > - Выйти в окно - -
- ); +const page = () => { + return
page
; }; -export default Profile; +export default page; diff --git a/src/App/profile/personal/page.tsx b/src/App/profile/personal/page.tsx new file mode 100644 index 0000000..28e4526 --- /dev/null +++ b/src/App/profile/personal/page.tsx @@ -0,0 +1,48 @@ +"use server"; + +import ProfileAvatar from "@/features/ProfileAvatar/ProfileAvatar"; +import { apiInstance } from "@/shared/config/apiConfig"; +import { authConfig } from "@/shared/config/authConfig"; +import { IProfile } from "@/shared/types/profile-type"; +import ProfileForm from "@/widgets/ProfileForm/ProfileForm"; +import { AxiosError } from "axios"; +import { getServerSession } from "next-auth"; +import React from "react"; + +const Personal = async () => { + const session = await getServerSession(authConfig); + const getProfile = async () => { + const Authorization = `Bearer ${session?.access_token}`; + const config = { + headers: { + Authorization, + }, + }; + try { + const response = await apiInstance.get( + "/users/profile/", + config + ); + + return response.data; + } catch (error: unknown) { + if (error instanceof AxiosError) console.log(error.message); + } + }; + + const data = await getProfile(); + + return ( +
+ + +
+ ); +}; + +export default Personal; diff --git a/src/App/report/[id]/ReportDetails.scss b/src/App/report/[id]/ReportDetails.scss new file mode 100644 index 0000000..8cdc697 --- /dev/null +++ b/src/App/report/[id]/ReportDetails.scss @@ -0,0 +1,180 @@ +.report-details { + display: flex; + flex-direction: column; + gap: 75px; + &__container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 70px; + } +} + +.report-information { + max-width: 646px; + display: flex; + flex-direction: column; + gap: 24px; + + h2 { + margin-bottom: 4px; + text-align: start; + font-size: 42px; + font-weight: 500; + line-height: 50px; + color: rgb(0, 0, 0); + } + + &__date-and-like { + display: flex; + align-items: center; + gap: 80px; + } + + &__date { + display: flex; + align-items: center; + gap: 10px; + + p { + font-size: 15px; + font-weight: 500; + line-height: 20px; + color: rgba(62, 50, 50, 0.75); + } + } + + &__description { + margin-bottom: 4px; + font-size: 20px; + font-weight: 400; + line-height: 34px; + color: rgb(62, 50, 50); + } + + &__author { + margin-bottom: 40px; + font-size: 20px; + font-weight: 400; + line-height: 34px; + color: rgb(102, 102, 102); + + span { + color: rgb(72, 159, 225); + text-decoration: underline; + } + } + + &__show-map { + width: fit-content; + display: flex; + align-items: center; + gap: 6px; + font-size: 20px; + font-weight: 400; + line-height: 34px; + text-decoration: underline; + color: rgb(102, 102, 102); + } +} + +.report-images { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 20px; + + &__exist { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + } + + &__default { + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + background-color: rgb(209, 217, 226); + } + + &__item1 { + grid-column: 1 / 5; + height: 441px; + } + + &__item2, + &__item3, + &__item4, + &__item5 { + height: 102px; + } +} + +@media screen and (max-width: 1024px) { + .report-details { + &__container { + grid-template-columns: 1fr; + gap: 45px; + } + } + + .report-information { + max-width: 100%; + + h2 { + font-size: 36px; + line-height: 43px; + } + + &__description { + font-size: 18px; + } + } +} + +@media screen and (max-width: 550px) { + .report-details { + &__container { + gap: 40px; + } + } + + .report-information { + h2 { + font-size: 24px; + line-height: 29px; + } + + &__description { + font-size: 16px; + line-height: 140%; + } + + &__author { + margin-bottom: 0px; + font-size: 16px; + line-height: 34px; + } + + &__show-map { + font-size: 16px; + line-height: 34px; + } + } + + .report-images { + grid-template-columns: 1fr 1fr; + + &__item1 { + grid-column: 1 / 2; + } + + &__item1, + &__item2, + &__item3, + &__item4, + &__item5 { + height: 162px; + } + } +} diff --git a/src/App/report/[id]/icons/calendar.svg b/src/App/report/[id]/icons/calendar.svg new file mode 100644 index 0000000..e318ec7 --- /dev/null +++ b/src/App/report/[id]/icons/calendar.svg @@ -0,0 +1,17 @@ + + + Created with Pixso. + + + + + + + + + + + + + + diff --git a/src/App/report/[id]/icons/def_image.svg b/src/App/report/[id]/icons/def_image.svg new file mode 100644 index 0000000..138a9f6 --- /dev/null +++ b/src/App/report/[id]/icons/def_image.svg @@ -0,0 +1,8 @@ + + + Created with Pixso. + + + + + diff --git a/src/App/report/[id]/icons/map-pin.svg b/src/App/report/[id]/icons/map-pin.svg new file mode 100644 index 0000000..6d85845 --- /dev/null +++ b/src/App/report/[id]/icons/map-pin.svg @@ -0,0 +1,17 @@ + + + Created with Pixso. + + + + + + + + + + + + + + diff --git a/src/App/report/[id]/page.tsx b/src/App/report/[id]/page.tsx new file mode 100644 index 0000000..35d72da --- /dev/null +++ b/src/App/report/[id]/page.tsx @@ -0,0 +1,126 @@ +import "./ReportDetails.scss"; +import Image from "next/image"; +import RoadType from "@/entities/RoadType/RoadType"; +import ReportLike from "@/features/ReportLike/ReportLike"; +import { apiInstance } from "@/shared/config/apiConfig"; +import { IReport } from "@/shared/types/report-type"; +import { + ROAD_TYPES, + ROAD_TYPES_COLORS, +} from "@/shared/variables/road-types"; +import calendar from "./icons/calendar.svg"; +import map_pin from "./icons/map-pin.svg"; +import def_image from "./icons/def_image.svg"; +import ReviewSection from "@/widgets/ReviewSection/ReviewSection"; + +const ReportDetails = async ({ + params, +}: { + params: { id: string }; +}) => { + const getReportDetails = async () => { + const res = await apiInstance.get( + `/report/${params.id}/` + ); + + return res.data; + }; + const report: IReport = await getReportDetails(); + + const months: Record = { + "01": "Январь", + "02": "Февраль", + "03": "Март", + "04": "Апрель", + "05": "Май", + "06": "Июнь", + "07": "Июль", + "08": "Август", + "09": "Сентябрь", + "10": "Октябрь", + "11": "Ноябрь", + "12": "Декабрь", + }; + + const showImages = () => { + const images = []; + + for (let i = 0; i < 5; i++) { + if (report.image[i]) { + const image = ( + Report Image + ); + images.push(image); + } else { + const defImage = ( +
+ Default Image +
+ ); + images.push(defImage); + } + } + + return images; + }; + return ( +
+
+
+ + {ROAD_TYPES[report.category]} + +

{report.location[0].address}

+
+
+ Calendar Icon +

+ {months[report.created_at.slice(5, 7)]}{" "} + {report.created_at.slice(5, 7).slice(0, 1) === "0" + ? report.created_at.slice(6, 7) + : report.created_at.slice(5, 7)} + , {report.created_at.slice(0, 4)} +

+
+ +
+ +

+ {report.description} +

+ +

+ Автор обращения:{" "} + + {report.author.first_name}{" "} + {report.author.last_name.slice(0, 1)}. + +

+ +
+
+ {showImages().map((image) => image)} +
+
+ + +
+ ); +}; + +export default ReportDetails; diff --git a/src/Shared/types/author-type.ts b/src/Shared/types/author-type.ts new file mode 100644 index 0000000..a4e913c --- /dev/null +++ b/src/Shared/types/author-type.ts @@ -0,0 +1,6 @@ +export interface IAuthor { + id: number; + first_name: string; + last_name: string; + govern_status: unknown; +} diff --git a/src/Shared/types/list-type.ts b/src/Shared/types/list-type.ts index bfa1599..5676a34 100644 --- a/src/Shared/types/list-type.ts +++ b/src/Shared/types/list-type.ts @@ -1,5 +1,5 @@ export interface IList { count: number | null; - previous: number | null; - next: number | null; + previous: string | null; + next: string | null; } diff --git a/src/Shared/types/location-type.ts b/src/Shared/types/location-type.ts new file mode 100644 index 0000000..0522ff3 --- /dev/null +++ b/src/Shared/types/location-type.ts @@ -0,0 +1,6 @@ +export interface ILocation { + id: 4; + latitude: number; + longitude: number; + address: string; +} diff --git a/src/Shared/types/my-reports.ts b/src/Shared/types/my-reports.ts new file mode 100644 index 0000000..82efd30 --- /dev/null +++ b/src/Shared/types/my-reports.ts @@ -0,0 +1,18 @@ +import { IList } from "./list-type"; +import { ILocation } from "./location-type"; +import { IReportImage } from "./report-image-type"; + +export interface IMyReports { + id: number; + location: ILocation[]; + image: IReportImage[]; + status: number; + total_likes: number; + count_reviews: number; + created_at: string; + updated_at: string; +} + +export interface IMyReportsList extends IList { + results: IMyReports[]; +} diff --git a/src/Shared/types/profile-type.ts b/src/Shared/types/profile-type.ts new file mode 100644 index 0000000..f4dbfdf --- /dev/null +++ b/src/Shared/types/profile-type.ts @@ -0,0 +1,9 @@ +export interface IProfile { + id: number; + email: string; + first_name: string; + last_name: string; + image: string; + role: number; + govern_status: null; +} diff --git a/src/Shared/types/report-image-type.ts b/src/Shared/types/report-image-type.ts new file mode 100644 index 0000000..761e292 --- /dev/null +++ b/src/Shared/types/report-image-type.ts @@ -0,0 +1,4 @@ +export interface IReportImage { + id: number; + image: string; +} diff --git a/src/Shared/types/report-type.ts b/src/Shared/types/report-type.ts index 784c202..e561382 100644 --- a/src/Shared/types/report-type.ts +++ b/src/Shared/types/report-type.ts @@ -1,21 +1,6 @@ -export interface IAuthor { - id: number; - first_name: string; - last_name: string; - govern_status: unknown; -} - -export interface ILocation { - id: 4; - latitude: number; - longitude: number; - address: string; -} - -export interface IReportImage { - id: number; - image: string; -} +import { IAuthor } from "./author-type"; +import { ILocation } from "./location-type"; +import { IReportImage } from "./report-image-type"; export interface IReport { results: any; diff --git a/src/Shared/variables/report-status.ts b/src/Shared/variables/report-status.ts new file mode 100644 index 0000000..cff839b --- /dev/null +++ b/src/Shared/variables/report-status.ts @@ -0,0 +1,11 @@ +export const REPORT_STATUS: Record = { + 1: "В обработке", + 2: "Одобрен", + 3: "Запрещен", +}; + +export const REPORT_STATUS_COLORS: Record = { + 1: "rgb(255, 172, 51)", + 2: "rgb(20, 186, 109)", + 3: "rgb(230, 68, 82)", +}; diff --git a/src/Widgets/MapSection/HomeMap/HomeMap.tsx b/src/Widgets/MapSection/HomeMap/HomeMap.tsx index 6f903b3..791632b 100644 --- a/src/Widgets/MapSection/HomeMap/HomeMap.tsx +++ b/src/Widgets/MapSection/HomeMap/HomeMap.tsx @@ -18,9 +18,9 @@ import geo_yellow_icon from "./icons/geo-yellow.svg"; import { DivIcon, Icon, LatLngTuple } from "leaflet"; import { StaticImageData } from "next/image"; import Link from "next/link"; -import { ILocation } from "@/shared/types/report-type"; import { useEffect, useState } from "react"; import L from "leaflet"; +import { ILocation } from "@/shared/types/location-type"; interface IData { id: number; @@ -72,6 +72,7 @@ const HomeMap: React.FC = ({ useEffect(() => { setPosition(latLng); }, [latLng]); + return null; }; diff --git a/src/Widgets/Navbar/NavAuth/NavAuth.tsx b/src/Widgets/Navbar/NavAuth/NavAuth.tsx index 45a977e..0fccd43 100644 --- a/src/Widgets/Navbar/NavAuth/NavAuth.tsx +++ b/src/Widgets/Navbar/NavAuth/NavAuth.tsx @@ -20,7 +20,7 @@ const NavAuth: React.FC = ({ {auth ? ( setOpenMenu(false)} - href="/profile" + href="/profile/personal" className={`nav-auth-profile-${ responsible ? `sm${pathname === "/profile" ? "_active" : ""}` diff --git a/src/Widgets/Navbar/NavLanguage/NavLanguage.scss b/src/Widgets/Navbar/NavLanguage/NavLanguage.scss index 5af1b1e..b9a8891 100644 --- a/src/Widgets/Navbar/NavLanguage/NavLanguage.scss +++ b/src/Widgets/Navbar/NavLanguage/NavLanguage.scss @@ -14,14 +14,17 @@ &__option, &__option_active { - width: 100%; padding: 10px 14px; + width: 100%; + display: flex; font-weight: 900; justify-content: flex-start; + background-color: #fff; } &__option_active { background-color: rgb(249, 250, 251); + align-items: center; justify-content: space-between; } diff --git a/src/Widgets/Navbar/NavMenu/NavMenu.tsx b/src/Widgets/Navbar/NavMenu/NavMenu.tsx index a074973..1c3a415 100644 --- a/src/Widgets/Navbar/NavMenu/NavMenu.tsx +++ b/src/Widgets/Navbar/NavMenu/NavMenu.tsx @@ -11,7 +11,6 @@ interface INavMenuProps { const NavMenu: React.FC = ({ setOpenMenu, }: INavMenuProps) => { - const auth = false; const pathname = usePathname(); return (