forked from Transparency/kgroad-frontend2
just started rewritig the project, found a lot of fails
This commit is contained in:
Alibek committed
1 parent
eeb9cc7ff8
commit
60b136effd
277 files changed
+1833
-5415
No files matched your search
@@ -0,0 +1,22 @@
|
||||
@import "../../../shared/ui/variables.scss";
|
||||
|
||||
.nav-auth-profile-lg,
|
||||
.nav-auth-signin-lg {
|
||||
width: fit-content;
|
||||
padding: 8px 16px;
|
||||
background-color: $light-blue;
|
||||
border-radius: 5px;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-auth-profile-sm,
|
||||
.nav-auth-signin-sm {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.nav-auth-profile-sm_active,
|
||||
.nav-auth-signin-sm_active {
|
||||
width: fit-content;
|
||||
color: $light-blue;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import Link from "next/link";
|
||||
import "./NavAuth.scss";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
interface INavAuthProps {
|
||||
responsible?: boolean;
|
||||
}
|
||||
|
||||
const NavAuth: React.FC<INavAuthProps> = ({
|
||||
responsible,
|
||||
}: INavAuthProps) => {
|
||||
const auth = false;
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<>
|
||||
{auth ? (
|
||||
<Link
|
||||
href="/profile"
|
||||
className={`nav-auth-profile-${
|
||||
responsible
|
||||
? `sm${pathname === "/profile" ? "_active" : ""}`
|
||||
: "lg"
|
||||
}`}
|
||||
>
|
||||
Профиль
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href="/sign-in"
|
||||
className={`nav-auth-signin-${
|
||||
responsible
|
||||
? `sm${pathname === "/sign-in" ? "_active" : ""}`
|
||||
: "lg"
|
||||
}`}
|
||||
>
|
||||
Войти
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavAuth;
|
||||
@@ -0,0 +1,33 @@
|
||||
.nav-language {
|
||||
position: relative;
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
&__select {
|
||||
min-width: 130px;
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
}
|
||||
|
||||
&__option,
|
||||
&__option_active {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-weight: 900;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__option_active {
|
||||
background-color: rgb(249, 250, 251);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__option:last-child,
|
||||
&__option_active:last-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import "./NavLanguage.scss";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import globus from "./icons/globus.svg";
|
||||
import chevron from "./icons/chevron-down.svg";
|
||||
import check from "./icons/check.svg";
|
||||
|
||||
const NavLanguage = () => {
|
||||
const [language, setLanguage] = useState<string>("ru");
|
||||
const [openMenu, setOpenMenu] = useState<boolean>(false);
|
||||
const LANGUAGES = [
|
||||
{ id: 1, language: "Русский", index: "ru" },
|
||||
{ id: 2, language: "Кыргызча", index: "kg" },
|
||||
{ id: 3, language: "English", index: "en" },
|
||||
];
|
||||
return (
|
||||
<div className="nav-language">
|
||||
<button
|
||||
onClick={() => setOpenMenu((prev) => !prev)}
|
||||
className="nav-language__btn"
|
||||
>
|
||||
<Image src={globus} alt="globus icon" />
|
||||
<Image src={chevron} alt="chevron icon" />
|
||||
</button>
|
||||
{openMenu && (
|
||||
<div className="nav-language__select">
|
||||
{LANGUAGES.map((lang) => (
|
||||
<button
|
||||
className={`nav-language__option${
|
||||
language === lang.index ? "_active" : ""
|
||||
}`}
|
||||
onClick={() => setLanguage(lang.index)}
|
||||
key={lang.id}
|
||||
>
|
||||
{lang.language}
|
||||
{lang.index === language ? (
|
||||
<Image src={check} alt="check icon" />
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavLanguage;
|
||||
@@ -0,0 +1,7 @@
|
||||
<svg width="15.007812" height="10.834961" viewBox="0 0 15.0078 10.835" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Icon" d="M14.1699 0.835938L5.00391 10.0029L0.836914 5.83594" stroke="#3695D8" stroke-opacity="1.000000" stroke-width="1.666667" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 406 B |
@@ -0,0 +1,14 @@
|
||||
<svg width="10.000000" height="6.000000" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1290_49928">
|
||||
<rect id="IMAGE" width="10.000000" height="6.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#clip1290_49928)">
|
||||
<path id="Vector" d="M0.246094 1.47363C-0.0820312 1.13672 -0.0820312 0.589844 0.246094 0.25293C0.574219 -0.0839844 1.10645 -0.0839844 1.43457 0.25293L5.59375 4.52637C5.92285 4.86328 5.92285 5.41016 5.59375 5.74707C5.26562 6.08398 4.73438 6.08398 4.40527 5.74707L0.246094 1.47363Z" fill="#66727F" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path id="Vector" d="M8.56543 0.25293C8.89355 -0.0839844 9.4248 -0.0839844 9.75293 0.25293C10.082 0.589844 10.082 1.13672 9.75293 1.47363L5.59375 5.74707C5.26562 6.08398 4.7334 6.08398 4.40527 5.74707C4.07715 5.41016 4.07715 4.86328 4.40527 4.52637L8.56543 0.25293Z" fill="#66727F" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,16 @@
|
||||
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1290_49924">
|
||||
<rect id="globe" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="globe" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip1290_49924)">
|
||||
<path id="Vector" d="M12 22C6.47705 22 2 17.5225 2 12C2 6.47754 6.47705 2 12 2C17.5229 2 22 6.47754 22 12C22 17.5225 17.5229 22 12 22Z" stroke="#66727F" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||
<path id="Vector" d="M2 12L22 12" stroke="#66727F" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M16 12C15.9229 15.708 14.5015 19.2617 12 22C9.49854 19.2617 8.07715 15.708 8 12C8.07715 8.29199 9.49854 4.73828 12 2C14.5015 4.73828 15.9229 8.29199 16 12Z" stroke="#66727F" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,25 @@
|
||||
@import "@/shared/ui/variables.scss";
|
||||
|
||||
.nav-menu {
|
||||
padding: 48px 30px 30px 30px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 500px;
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
background-color: white;
|
||||
|
||||
a {
|
||||
justify-content: flex-start;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__link_active {
|
||||
color: $light-blue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { LINKS } from "@/shared/variables/links";
|
||||
import "./NavMenu.scss";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import NavAuth from "../NavAuth/NavAuth";
|
||||
|
||||
const NavMenu = () => {
|
||||
const auth = false;
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<nav className="nav-menu">
|
||||
{LINKS.map((link) => (
|
||||
<Link
|
||||
className={`nav-menu__link${
|
||||
pathname === link.pathname ? "_active" : ""
|
||||
}`}
|
||||
href={link.pathname}
|
||||
key={link.id}
|
||||
>
|
||||
{link.pagename}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<NavAuth responsible />
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavMenu;
|
||||
@@ -0,0 +1,86 @@
|
||||
@import "../../shared/ui/variables.scss";
|
||||
|
||||
.navbar {
|
||||
padding: 0 90px;
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
&__links {
|
||||
height: 60%;
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
&__link,
|
||||
&__link_active {
|
||||
color: $black;
|
||||
opacity: 0.5;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__link_active {
|
||||
opacity: 1;
|
||||
font-weight: 900;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
&__lang-and-auth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.navbar {
|
||||
padding: 0 30px;
|
||||
|
||||
&__links {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
&__lang-and-auth {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
height: 72px;
|
||||
|
||||
&__links,
|
||||
&__lang-and-auth {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.navbar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import "./Navbar.scss";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import logo from "@/shared/assets/logo.svg";
|
||||
import { LINKS } from "@/shared/variables/links";
|
||||
import NavLanguage from "./NavLanguage/NavLanguage";
|
||||
import NavAuth from "./NavAuth/NavAuth";
|
||||
import menu from "./icons/menu.svg";
|
||||
import cross from "./icons/cross.svg";
|
||||
|
||||
import NavMenu from "./NavMenu/NavMenu";
|
||||
import { useState } from "react";
|
||||
|
||||
const Navbar = () => {
|
||||
const pathname = usePathname();
|
||||
const [openMenu, setOpenMenu] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<section className="navbar">
|
||||
<Link href="/">
|
||||
<Image src={logo} alt="Logo" />
|
||||
</Link>
|
||||
|
||||
<nav className="navbar__links">
|
||||
{LINKS.map((link) => (
|
||||
<Link
|
||||
className={`navbar__link${
|
||||
pathname === link.pathname ? "_active" : ""
|
||||
}`}
|
||||
key={link.id}
|
||||
href={link.pathname}
|
||||
>
|
||||
{link.pagename}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="navbar__lang-and-auth">
|
||||
<NavLanguage />
|
||||
<NavAuth />
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setOpenMenu((prev) => !prev)}
|
||||
className="navbar__menu"
|
||||
>
|
||||
<Image src={openMenu ? cross : menu} alt="menu icon" />
|
||||
</button>
|
||||
|
||||
{openMenu && <NavMenu />}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -0,0 +1,15 @@
|
||||
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1256_72110">
|
||||
<rect id="x" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="x" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip1256_72110)">
|
||||
<path id="Vector" d="M18 6L6 18" stroke="#32303A" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M6 6L18 18" stroke="#32303A" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 780 B |
@@ -0,0 +1,7 @@
|
||||
<svg width="20.000000" height="14.000000" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Icon" d="M1 7L19 7M1 1L19 1M1 13L19 13" stroke="#344054" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 353 B |
Reference in new issue
Block a user