diff --git a/src/App.js b/src/App.js index b11082a..3dfd1f4 100644 --- a/src/App.js +++ b/src/App.js @@ -22,7 +22,7 @@ const App = () => { } /> } /> } /> - } /> + } /> ); diff --git a/src/components/global/Breadcrumb.js b/src/components/global/Breadcrumb.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/global/LoggedNav.js b/src/components/global/LoggedNav.js new file mode 100644 index 0000000..15043df --- /dev/null +++ b/src/components/global/LoggedNav.js @@ -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 ( + + ); +}; + +export default LoggedNav; diff --git a/src/components/global/Side.js b/src/components/global/Side.js new file mode 100644 index 0000000..302b206 --- /dev/null +++ b/src/components/global/Side.js @@ -0,0 +1,42 @@ +// IMPORT MODULES +import React from "react"; +import { Link } from "react-router-dom"; + +const Side = () => { + return ( +
+
+
    +
  • +

    Разделы

    +
    • +
  • + Пластиковые карты +
    • +
  • + Пластиковые карты +
    • +
  • + Пластиковые карты +
    • +
+
    +
  • +

    Разделы

    +
    • +
  • + Пластиковые карты +
    • +
  • + Пластиковые карты +
    • +
  • + Пластиковые карты +
    • +
+
+
+ ); +}; + +export default Side; diff --git a/src/icons/home.svg b/src/icons/home.svg new file mode 100644 index 0000000..9b822df --- /dev/null +++ b/src/icons/home.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/menu.svg b/src/icons/menu.svg new file mode 100644 index 0000000..eae6576 --- /dev/null +++ b/src/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/icons/user.svg b/src/icons/user.svg new file mode 100644 index 0000000..de2e5c1 --- /dev/null +++ b/src/icons/user.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/pages/Home.js b/src/pages/Home.js index ff2419d..9b22d71 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,8 +1,22 @@ // IMPORT MODULES import React from "react"; -const Home = () => { - return

Home

; +// IMPORT COMPONENTS +import LoggedNav from "../components/global/LoggedNav"; +import Footer from "../components/global/Footer"; +import Side from "../components/global/Side"; + +const Home = ({ ChildEl }) => { + return ( +
+ +
+ + +
+
+ ); }; export default Home; diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss index f0bb80b..ddbf726 100644 --- a/src/styles/_nav.scss +++ b/src/styles/_nav.scss @@ -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; + } +} diff --git a/src/styles/_side.scss b/src/styles/_side.scss new file mode 100644 index 0000000..f59d972 --- /dev/null +++ b/src/styles/_side.scss @@ -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; + } + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index c0aaa10..19c05c9 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -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); diff --git a/src/styles/style.scss b/src/styles/style.scss index 8a60b73..72ee366 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -12,3 +12,4 @@ @import "./sing-in"; @import "./sign-up"; @import "./custom-select"; +@import "./side";