Elaman/kgroad-frontend2
1
0
Fork 0
forked from Transparency/kgroad-frontend2
Code Pull Requests Activity

updated navbar, fixed map

Browse Source
This commit is contained in:
ariari04 2024-06-13 17:36:48 +06:00
parent 981c5863ee
commit 6508bc0258
11 changed files with 80 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/[locale]/layout.tsx
View File

@ -17,10 +17,7 @@ export default function LocaleLayout({
return (
<html lang={params.locale}>
<body>
<NextIntlClientProvider
locale={params.locale}
messages={messages}
>
<NextIntlClientProvider locale={params.locale} messages={messages}>
<Providers>
<Navbar />
<div className="app">{children}</div>

9
src/features/SearchForm/SearchForm.tsx
View File

@ -5,8 +5,7 @@ import Image from "next/image";
import search from "./icons/search.svg";
import { useTranslations } from "next-intl";
interface ISearchFormProps
extends React.InputHTMLAttributes<HTMLInputElement> {
interface ISearchFormProps extends React.InputHTMLAttributes<HTMLInputElement> {
handleSubmit: (e: React.MouseEvent<HTMLFormElement>) => void;
}
@ -20,11 +19,7 @@ const SearchForm: React.FC<ISearchFormProps> = ({
}: ISearchFormProps) => {
const t = useTranslations("general");
return (
<form
style={style}
className="search-form"
onSubmit={handleSubmit}
>
<form style={style} className="search-form" onSubmit={handleSubmit}>
<div className="search-form__input">
<Image src={search} alt="Search Icon" />
<input

4
src/widgets/Footer/Footer.tsx
View File

@ -18,9 +18,9 @@ const Footer = () => {
return (
<footer className="footer">
<div className="footer__logo">
<Link href="/">
{/* <Link href="/">
<Image src={logo} alt="Logo" />
</Link>
</Link> */}
<p>© {tRights("text")}</p>
<p>{tDisclaimer("text")}</p>
</div>

43
src/widgets/Navbar/NavAuth/NavAuth.scss
View File

@ -2,12 +2,30 @@
.nav-auth-profile-lg,
.nav-auth-signin-lg {
width: fit-content;
padding: 8px 16px;
background-color: $light-blue;
border-radius: 5px;
font-weight: 900;
// width: fit-content;
// padding: 8px 16px;
// background-color: $light-blue;
// border-radius: 5px;
// font-weight: 900;
// color: white;
background-color: white;
color: #3695d8;
border-color: #3695d8;
border: 3px solid #3695d8;
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s, color 0.3s;
&:hover{
background-color: #3695d8;
color: white;
}
}
.nav-auth-profile-sm,
@ -20,3 +38,18 @@
width: fit-content;
color: $light-blue;
}
.appeal-btn {
background-color: white;
color: #3695d8;
border-color: #3695d8;
border: 3px solid #3695d8;
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s, color 0.3s;
}

17
src/widgets/Navbar/NavLanguage/NavLanguage.tsx
View File

@ -1,9 +1,6 @@
"use client";
import "./NavLanguage.scss";
import Image from "next/image";
import { useEffect, useRef, useState, useTransition } from "react";
import globus from "./icons/globus.svg";
import chevron from "./icons/chevron-down.svg";
import check from "./icons/check.svg";
import { useParams, useRouter } from "next/navigation";
@ -32,10 +29,7 @@ const NavLanguage = () => {
useEffect(() => {
function handleClickOutside(event: any) {
if (
menuRef.current &&
!menuRef.current.contains(event.target)
) {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setOpenMenu(false);
}
}
@ -47,11 +41,18 @@ const NavLanguage = () => {
return (
<div ref={menuRef} className="nav-language">
{/* <button
onClick={() => setOpenMenu((prev) => !prev)}
className="nav-language__btn"
> */}
{/* <Image src={globus} alt="globus icon" /> */}
<button
onClick={() => setOpenMenu((prev) => !prev)}
className="nav-language__btn"
>
<Image src={globus} alt="globus icon" />
{language === "ru" && <span>Рус</span>}
{language === "kg" && <span>Кырг</span>}
{language === "en" && <span>Eng</span>}
<Image src={chevron} alt="chevron icon" />
</button>
{openMenu && (

26
src/widgets/Navbar/Navbar.scss
View File

@ -1,15 +1,18 @@
@import "../../shared/ui/variables.scss";
.navbar {
padding: 0 90px;
padding: 15px 90px;
// padding: 15px;
width: 100%;
height: 78px;
// height: 78px;
position: fixed;
z-index: 10005;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow: 0 4px 6px #0000001a;
margin-bottom: 40px;
&__logo {
display: flex;
@ -17,9 +20,16 @@
gap: 10px;
&_last {
min-width: 78px;
max-width: 78px;
height: 100%;
// min-width: 78px;
// max-width: 78px;
// height: 100%;
margin-top: 30px;
height: 120px;
width: 120px;
display: inline-block;
margin-right: 10px;
object-fit: cover;
}
}
@ -39,8 +49,8 @@
&__link_active {
opacity: 1;
font-weight: 900;
border-bottom: 2px solid black;
font-weight: 800;
// border-bottom: 2px solid black;
}
&__lang-and-auth {
@ -60,7 +70,7 @@
@media screen and (max-width: 1220px) {
.navbar {
padding: 0 60px;
// padding: 0 60px;
&__links {
gap: 40px;

4
src/widgets/Navbar/Navbar.tsx
View File

@ -32,13 +32,14 @@ const Navbar = () => {
<section className="navbar">
<div className="navbar__logo">
<Link href="/">
<Image src={logo} alt="Logo" />
<Image src={logo} alt="Logo" className="navbar__logo-ti" />
</Link>
<Image
className="navbar__logo_last"
src={FOUNDED[locale as string]}
alt="Founded by EU Image"
/>
<NavLanguage />
</div>
<nav className="navbar__links">
@ -56,7 +57,6 @@ const Navbar = () => {
</nav>
<div className="navbar__lang-and-auth">
<NavLanguage />
<NavAuth setOpenMenu={setOpenMenu} />
</div>

1
src/widgets/forms/ReportForm/ReportForm.tsx
View File

@ -21,7 +21,6 @@ import { apiInstance } from "@/shared/config/apiConfig";
import { useSession } from "next-auth/react";
import { IDisplayMap } from "@/shared/types/map-type";
import Loader from "@/shared/ui/components/Loader/Loader";
import { useRouter } from "@/shared/config/navigation";
import ReportMessage from "@/features/ReportMessage/ReportMessage";
interface ILatLng {

2
src/widgets/home/Header/Header.scss
View File

@ -1,6 +1,6 @@
.header {
position: relative;
height: 386px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;

2
src/widgets/home/MapSection/HomeMap/HomeMap.scss
View File

@ -1,5 +1,5 @@
.home-map {
width: 100%;
width: 88%;
height: 580px;
border-radius: 8px;

19
src/widgets/home/MapSection/HomeMap/HomeMap.tsx
View File

@ -40,9 +40,7 @@ interface IHomeMapProps {
reports: IData[];
}
const HomeMap: React.FC<IHomeMapProps> = ({
reports,
}: IHomeMapProps) => {
const HomeMap: React.FC<IHomeMapProps> = ({ reports }: IHomeMapProps) => {
const { display_location, latLng } = useMapStore();
const [position, setPosition] = useState<ILatLng>({
lat: 42.8746,
@ -95,10 +93,7 @@ const HomeMap: React.FC<IHomeMapProps> = ({
lng: 74.606,
};
if (
latLng.lat === defPosition.lat &&
latLng.lng === defPosition.lng
)
if (latLng.lat === defPosition.lat && latLng.lng === defPosition.lng)
return null;
return (
@ -112,7 +107,7 @@ const HomeMap: React.FC<IHomeMapProps> = ({
<MapContainer
center={position}
zoom={14}
scrollWheelZoom={false}
scrollWheelZoom={true}
className="home-map"
>
<TileLayer
@ -144,14 +139,10 @@ const HomeMap: React.FC<IHomeMapProps> = ({
<Marker
key={marker.id}
icon={icons[report.category]}
position={
[+marker.latitude, +marker.longitude] as LatLngTuple
}
position={[+marker.latitude, +marker.longitude] as LatLngTuple}
>
<Popup>
<Link href={`/report/${report?.id}`}>
{marker.address}
</Link>
<Link href={`/report/${report?.id}`}>{marker.address}</Link>
</Popup>
</Marker>
))