TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Side unfinished

This commit is contained in:
VividTruthKeeper 2022-02-09 17:01:57 +05:00
parent 06e13aae69
commit a9fe62638d
12 changed files with 266 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -22,7 +22,7 @@ const App = () => {
<Route path="/" element={<Main />} />
<Route path="/sign-in" element={<SignIn />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="/home" element={<Home />} />
<Route path="/home" element={<Home ChildEl={Footer} />} />
</Routes>
</div>
);

0
src/components/global/Breadcrumb.js Normal file
View File

99
src/components/global/LoggedNav.js Normal file
View File

@ -0,0 +1,99 @@
// IMPORT MODULES
import React, { useState } from "react";
import { Link } from "react-router-dom";
// IMPORT IMAGES
import hb from "../../images/logo.jpg";
import lang from "../../icons/lang.svg";
import arrow from "../../icons/arrow-down.svg";
import menu from "../../icons/menu.svg";
import user from "../../icons/user.svg";
const LoggedNav = () => {
const handleLanguage = (lang) => {
setLanguage(lang);
};
const [langOpen, setLangOpen] = useState(false);
const [language, setLanguage] = useState("РУС");
return (
<nav className="nav">
<div className="container">
<div className="nav-inner">
<div className="nav__left">
<div className="nav-menu">
<img src={menu} alt="menu" />
</div>
<Link to="/" className="nav-logo">
<img src={hb} alt="Halk Bank" />
</Link>
<div className="nav-title">
<h1>Халкбанк</h1>
<h4>"Главная ценность Банка-наши Клиенты"</h4>
</div>
</div>
<div className="nav__right">
<ul
className={langOpen ? "language active" : "language"}
onClick={() => {
setLangOpen(!langOpen);
}}
>
<li className="lang-wrapper">
<div className="lang-img">
<img src={lang} alt="language" />
</div>
<h4 className="lang-text">{language}</h4>
<div className={langOpen ? "lang-arrow active" : "lang-arrow"}>
<img src={arrow} alt={arrow} />
</div>
</li>
<li
className={langOpen ? "lang-dropdown active" : "lang-dropdown"}
>
<ul>
<li
className="lang-el"
onClick={(e) => {
handleLanguage(e.target.innerText);
}}
>
РУС
</li>
<li
className="lang-el"
onClick={(e) => {
handleLanguage(e.target.innerText);
}}
>
ENG
</li>
<li
className="lang-el"
onClick={(e) => {
handleLanguage(e.target.innerText);
}}
>
TUK
</li>
</ul>
</li>
</ul>
<div className="user">
<div className="user-img">
<img src={user} alt="user" />
</div>
<h4>Аман Аманов</h4>
<div className="user-arrow">
<img src={arrow} alt="arrow" />
</div>
</div>
</div>
</div>
</div>
<div className="line"></div>
</nav>
);
};
export default LoggedNav;

42
src/components/global/Side.js Normal file
View File

@ -0,0 +1,42 @@
// IMPORT MODULES
import React from "react";
import { Link } from "react-router-dom";
const Side = () => {
return (
<section className="side">
<div className="side-inner">
<ul>
<li>
<h2 className="side-title">Разделы</h2>
</li>
<li>
<Link to="">Пластиковые карты</Link>
</li>
<li>
<Link to="">Пластиковые карты</Link>
</li>
<li>
<Link to="">Пластиковые карты</Link>
</li>
</ul>
<ul>
<li>
<h2 className="side-title">Разделы</h2>
</li>
<li>
<Link to="">Пластиковые карты</Link>
</li>
<li>
<Link to="">Пластиковые карты</Link>
</li>
<li>
<Link to="">Пластиковые карты</Link>
</li>
</ul>
</div>
</section>
);
};
export default Side;

4
src/icons/home.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3088 16H3.69116C1.65209 16 0 14.3387 0 12.2974V6.77691C0 5.76371 0.625116 4.48976 1.42884 3.86397L5.44 0.734969C6.64558 -0.20373 8.57302 -0.24843 9.82326 0.630669L14.4223 3.85652C15.3079 4.47486 16 5.80096 16 6.88121V12.3048C16 14.3387 14.3479 16 12.3088 16ZM6.12465 1.61407L2.11349 4.74306C1.58512 5.16026 1.11628 6.10641 1.11628 6.77691V12.2974C1.11628 13.7203 2.26977 14.8825 3.69116 14.8825H12.3088C13.7302 14.8825 14.8837 13.7278 14.8837 12.3048V6.88121C14.8837 6.16601 14.3702 5.17516 13.7823 4.77286L9.18326 1.54702C8.33488 0.951019 6.93581 0.980819 6.12465 1.61407Z" fill="#3A3A3A"/>
<path d="M7.99991 13.02C7.6948 13.02 7.44177 12.7667 7.44177 12.4613V9.22629C7.44177 8.92084 7.6948 8.66754 7.99991 8.66754C8.30503 8.66754 8.55805 8.92084 8.55805 9.22629V12.4613C8.55805 12.7667 8.30503 13.02 7.99991 13.02Z" fill="#3A3A3A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 951 B

5
src/icons/menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.8462 2.6087H1.15385C0.523077 2.6087 0 2.01739 0 1.30435C0 0.591304 0.523077 0 1.15385 0H28.8462C29.4769 0 30 0.591304 30 1.30435C30 2.01739 29.4769 2.6087 28.8462 2.6087Z" fill="#01815E"/>
<path d="M19.2308 11.3044H0.769231C0.348718 11.3044 0 10.7131 0 10C0 9.28698 0.348718 8.69568 0.769231 8.69568H19.2308C19.6513 8.69568 20 9.28698 20 10C20 10.7131 19.6513 11.3044 19.2308 11.3044Z" fill="#01815E"/>
<path d="M28.8462 20H1.15385C0.523077 20 0 19.4087 0 18.6956C0 17.9826 0.523077 17.3913 1.15385 17.3913H28.8462C29.4769 17.3913 30 17.9826 30 18.6956C30 19.4087 29.4769 20 28.8462 20Z" fill="#01815E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 721 B

5
src/icons/user.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1117 11.4232C10.0931 11.4232 10.0651 11.4232 10.0465 11.4232C10.0186 11.4232 9.98143 11.4232 9.95352 11.4232C7.84189 11.3581 6.2605 9.71162 6.2605 7.68371C6.2605 5.6186 7.94422 3.93488 10.0093 3.93488C12.0744 3.93488 13.7582 5.6186 13.7582 7.68371C13.7489 9.72092 12.1582 11.3581 10.1396 11.4232C10.121 11.4232 10.121 11.4232 10.1117 11.4232ZM10 5.32092C8.69771 5.32092 7.64654 6.38139 7.64654 7.67441C7.64654 8.94883 8.64189 9.98139 9.90701 10.0279C9.93492 10.0186 10.0279 10.0186 10.121 10.0279C11.3675 9.96278 12.3442 8.93953 12.3535 7.67441C12.3535 6.38139 11.3024 5.32092 10 5.32092Z" fill="#01815E"/>
<path d="M10 20C7.49769 20 5.10699 19.0697 3.25583 17.3767C3.08839 17.2279 3.01397 17.0046 3.03258 16.7907C3.15351 15.6837 3.84188 14.6511 4.98606 13.8884C7.75816 12.0465 12.2512 12.0465 15.014 13.8884C16.1582 14.6604 16.8465 15.6837 16.9675 16.7907C16.9954 17.0139 16.9116 17.2279 16.7442 17.3767C14.893 19.0697 12.5023 20 10 20ZM4.49304 16.6046C6.03723 17.8977 7.98141 18.6046 10 18.6046C12.0186 18.6046 13.9628 17.8977 15.507 16.6046C15.3395 16.0372 14.893 15.4884 14.2326 15.0418C11.9442 13.5163 8.06513 13.5163 5.75816 15.0418C5.09769 15.4884 4.66048 16.0372 4.49304 16.6046Z" fill="#01815E"/>
<path d="M10 20C4.48372 20 0 15.5163 0 10C0 4.48372 4.48372 0 10 0C15.5163 0 20 4.48372 20 10C20 15.5163 15.5163 20 10 20ZM10 1.39535C5.25581 1.39535 1.39535 5.25581 1.39535 10C1.39535 14.7442 5.25581 18.6046 10 18.6046C14.7442 18.6046 18.6046 14.7442 18.6046 10C18.6046 5.25581 14.7442 1.39535 10 1.39535Z" fill="#01815E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

18
src/pages/Home.js
View File

@ -1,8 +1,22 @@
// IMPORT MODULES
import React from "react";
const Home = () => {
return <h1>Home</h1>;
// IMPORT COMPONENTS
import LoggedNav from "../components/global/LoggedNav";
import Footer from "../components/global/Footer";
import Side from "../components/global/Side";
const Home = ({ ChildEl }) => {
return (
<section className="home">
<Side />
<div className="home-content">
<LoggedNav />
<ChildEl />
<Footer />
</div>
</section>
);
};
export default Home;

38
src/styles/_nav.scss
View File

@ -7,7 +7,7 @@
}
.nav-inner {
margin: 3rem 0;
padding: 3rem 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
@ -51,6 +51,9 @@
.nav__right {
justify-self: right;
align-self: center;
display: flex;
align-items: center;
gap: 3rem;
}
.language {
@ -131,3 +134,36 @@
transition: 0.4s all ease;
}
}
// LOGGED ON
.nav-menu {
cursor: pointer;
margin-right: 1rem;
}
.user {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.4rem 2.6rem;
border: 0.1rem solid rgba(229, 229, 229, 1);
border-radius: 0.5rem;
h4 {
font-size: 1.6rem;
font-weight: normal;
}
}
.user-img {
width: 2rem;
height: 2rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}

54
src/styles/_side.scss Normal file
View File

@ -0,0 +1,54 @@
.side {
position: fixed;
height: 100vh;
left: 0;
top: 0;
max-width: 40rem;
width: 100%;
background: $base-green;
}
.home {
margin-left: 40rem;
}
.side-title {
background: $dark-green;
}
.side-inner {
ul {
display: flex;
flex-direction: column;
li {
position: relative;
border-bottom: 0.1rem solid $dark-green;
&::before {
width: 0.6rem;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: "";
background: rgba(255, 255, 255, 0);
transition: 0.4s all ease;
}
&.active {
&::before {
background: rgba(255, 255, 255, 1);
transition: 0.4s all ease;
}
}
}
h2,
a {
display: block;
font-size: 1.6rem;
color: #fff;
padding: 2.9rem 5rem;
font-weight: normal;
}
}
}

2
src/styles/_variables.scss
View File

@ -1,5 +1,7 @@
$base-green: rgba(1, 129, 94, 1);
$dark-green: #006a4d;
$text-black: rgba(58, 58, 58, 1);
$base-grey: rgba(242, 242, 242, 1);

1
src/styles/style.scss
View File

@ -12,3 +12,4 @@
@import "./sing-in";
@import "./sign-up";
@import "./custom-select";
@import "./side";