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

nav finished

This commit is contained in:
VividTruthKeeper 2022-02-03 23:45:15 +05:00
parent ad02b7fca0
commit eda592805c
12 changed files with 278 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.js
View File

@ -1,23 +1,23 @@
// IMPORT MODULES
import React from "react";
import { Routes, Route } from "react-router-dom";
// IMPORT STYLES
import "./styles/style.scss";
// IMPORT PERMANENT COMPONENTS
import Nav from "./components/global/Nav";
// IMPORT PAGES
import Main from "./pages/Main";
const App = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Nav />
<Routes>
<Route path="/" element={<Main />} />
</Routes>
</div>
);
};

85
src/components/global/Nav.js Normal file
View File

@ -0,0 +1,85 @@
// 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";
const Nav = () => {
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">
<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>
</div>
</div>
<div className="line"></div>
</nav>
);
};
export default Nav;

3
src/icons/arrow-down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4.5L7.4641 0.75H0.535898L4 4.5Z" fill="#3A3A3A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 161 B

7
src/icons/lang.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<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.6047 10 18.6047C14.7442 18.6047 18.6047 14.7442 18.6047 10C18.6047 5.25581 14.7442 1.39535 10 1.39535Z" fill="#01815E"/>
<path d="M7.20923 19.0698H6.27899C5.8976 19.0698 5.58132 18.7535 5.58132 18.3721C5.58132 17.9907 5.87899 17.6837 6.26039 17.6744C4.79992 12.6884 4.79992 7.31163 6.26039 2.32559C5.87899 2.31628 5.58132 2.00931 5.58132 1.62791C5.58132 1.24652 5.8976 0.930237 6.27899 0.930237H7.20923C7.43248 0.930237 7.64643 1.04186 7.77667 1.21861C7.9069 1.40466 7.94411 1.63721 7.86969 1.85117C6.12085 7.10698 6.12085 12.893 7.86969 18.1581C7.94411 18.3721 7.9069 18.6047 7.77667 18.7907C7.64643 18.9581 7.43248 19.0698 7.20923 19.0698Z" fill="#01815E"/>
<path d="M12.7907 19.0697C12.7163 19.0697 12.6418 19.0604 12.5674 19.0325C12.2046 18.9116 12 18.5116 12.1302 18.1488C13.8791 12.893 13.8791 7.10694 12.1302 1.84182C12.0093 1.47903 12.2046 1.07903 12.5674 0.958098C12.9395 0.837168 13.3302 1.03252 13.4511 1.39531C15.3023 6.93949 15.3023 13.0418 13.4511 18.5767C13.3581 18.8837 13.0791 19.0697 12.7907 19.0697Z" fill="#01815E"/>
<path d="M10.0004 14.8372C7.40508 14.8372 4.81904 14.4744 2.32601 13.7395C2.31671 14.1116 2.00973 14.4186 1.62834 14.4186C1.24694 14.4186 0.930664 14.1023 0.930664 13.7209V12.7907C0.930664 12.5674 1.04229 12.3535 1.21904 12.2232C1.40508 12.093 1.63764 12.0558 1.85159 12.1302C7.10741 13.8791 12.9028 13.8791 18.1586 12.1302C18.3725 12.0558 18.6051 12.093 18.7911 12.2232C18.9772 12.3535 19.0795 12.5674 19.0795 12.7907V13.7209C19.0795 14.1023 18.7632 14.4186 18.3818 14.4186C18.0004 14.4186 17.6935 14.1209 17.6842 13.7395C15.1818 14.4744 12.5958 14.8372 10.0004 14.8372Z" fill="#01815E"/>
<path d="M18.3721 7.90697C18.2976 7.90697 18.2232 7.89767 18.1488 7.86976C12.893 6.12093 7.09763 6.12093 1.84182 7.86976C1.46973 7.99069 1.07903 7.79534 0.958097 7.43255C0.846469 7.06046 1.04182 6.66976 1.40461 6.54883C6.94879 4.69767 13.0511 4.69767 18.586 6.54883C18.9488 6.66976 19.1534 7.06976 19.0232 7.43255C18.9395 7.72093 18.6604 7.90697 18.3721 7.90697Z" fill="#01815E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/images/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

5
src/index.js
View File

@ -1,10 +1,13 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);

8
src/pages/Main.js Normal file
View File

@ -0,0 +1,8 @@
// IMPORT MODULES
import React from "react";
const Main = () => {
return <h1>Main</h1>;
};
export default Main;

19
src/styles/_global.scss
View File

@ -6,3 +6,22 @@ a {
text-decoration: none;
color: $text-black;
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
li {
font-family: $font-family;
}
.container {
max-width: 150rem;
padding: 0 4rem;
margin: 0 auto;
}

132
src/styles/_nav.scss Normal file
View File

@ -0,0 +1,132 @@
.nav {
.line {
width: 100%;
border-top: 0.2rem solid $base-grey;
}
padding-bottom: 5rem;
}
.nav-inner {
margin: 3rem 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.nav__left {
justify-self: left;
display: flex;
align-items: center;
gap: 1rem;
}
.nav-logo {
display: block;
width: 12.4rem;
height: 6rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.nav-title {
display: flex;
flex-direction: column;
h1 {
font-size: 2.8rem;
color: $base-green;
}
h4 {
font-size: 1.6rem;
color: $text-black;
font-weight: normal;
}
}
.nav__right {
justify-self: right;
align-self: center;
}
.language {
position: relative;
cursor: pointer;
padding: 1rem;
border-radius: 1rem;
background: transparent;
transition: 0.4s all ease;
&.active {
background: rgba(192, 192, 192, 0.733);
transition: 0.4s all ease;
}
.lang-wrapper {
display: flex;
align-items: center;
gap: 0.8rem;
}
}
.lang-img {
width: 2rem;
height: 2rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.lang-arrow {
transform: rotateZ(0deg);
transition: 0.4s all ease;
&.active {
transform: rotateZ(180deg);
transition: 0.4s all ease;
}
}
.lang-text {
font-size: 1.6rem;
font-weight: normal;
}
.lang-el {
text-align: center;
width: 100%;
font-size: 1.6rem;
padding: 1rem 2rem;
justify-content: center;
background: transparent;
transition: 0.4s all ease;
&:hover {
background: rgba(192, 192, 192, 0.733);
transition: 0.4s all ease;
}
}
.lang-dropdown {
border-radius: 1rem;
background: $base-grey;
position: absolute;
top: calc(100% + 1rem);
left: 0;
width: 100%;
max-height: 0;
overflow: hidden;
transition: 0.4s all ease;
&.active {
max-height: 15rem;
transition: 0.4s all ease;
}
}

4
src/styles/_nullifier.scss
View File

@ -1,4 +1,6 @@
* {
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;

2
src/styles/_variables.scss
View File

@ -3,3 +3,5 @@ $base-green: rgba(1, 129, 94, 1);
$text-black: rgba(58, 58, 58, 1);
$base-grey: rgba(242, 242, 242, 1);
$font-family: "Open Sans", sans-serif; ;

1
src/styles/style.scss
View File

@ -5,3 +5,4 @@
@import "./variables";
@import "./nullifier";
@import "./global";
@import "./nav";