diff --git a/components/BurgerMenu/BurgerMenu.jsx b/components/BurgerMenu/BurgerMenu.jsx deleted file mode 100644 index 7d312c8..0000000 --- a/components/BurgerMenu/BurgerMenu.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useState } from "react"; -import s from "./BurgerMenu.module.scss"; - -import NavBurgerMenu from "../NavBurgerMenu/NavBurgerMenu"; - -const BurgerMenu = () => { - // Состояние - навигационного бургер меню - const [nav, setNav] = useState(false); - - return ( -
setNav(!nav)}> - - - -
- ); -}; - -export default BurgerMenu; diff --git a/components/BurgerMenu/BurgerMenu.module.scss b/components/BurgerMenu/BurgerMenu.module.scss deleted file mode 100644 index f020182..0000000 --- a/components/BurgerMenu/BurgerMenu.module.scss +++ /dev/null @@ -1,87 +0,0 @@ -.burger_menu { - width: 81px; - height: 40px; - position: relative; - cursor: pointer; - - span { - width: 61px; - height: 2px; - position: absolute; - background-color: #fefefe; - transition: all 0.2s ease; - } - span:nth-of-type(1) { - bottom: 14.5px; - right: 0; - } - span:nth-of-type(2) { - top: 14.5px; - left: 0; - } - - &:hover span:nth-of-type(1) { - right: 10px; - transition: all 0.2s ease; - } - - &:hover span:nth-of-type(2) { - left: 10px; - transition: all 0.2s ease; - } - } - // burger_menu - - @media screen and (max-width: 1024px) { - .burger_menu { - width: 71px; - height: 40px; - span { - width: 51px; - } - span:nth-of-type(1) { - bottom: 14.5px; - right: 0; - } - span:nth-of-type(2) { - top: 14.5px; - left: 0; - } - - &:hover span:nth-of-type(1) { - right: 10px; - } - - &:hover span:nth-of-type(2) { - left: 10px; - } - } - // burger_menu - } - - @media screen and (max-width: 768px) { - .burger_menu { - width: 61px; - height: 40px; - span { - width: 41px; - } - span:nth-of-type(1) { - bottom: 14.5px; - right: 0; - } - span:nth-of-type(2) { - top: 14.5px; - left: 0; - } - - &:hover span:nth-of-type(1) { - right: 10px; - } - - &:hover span:nth-of-type(2) { - left: 10px; - } - } - // burger_menu - } \ No newline at end of file diff --git a/components/CustomSelect/CustomSelect.jsx b/components/CustomSelect/CustomSelect.jsx index 37bbf63..500c710 100644 --- a/components/CustomSelect/CustomSelect.jsx +++ b/components/CustomSelect/CustomSelect.jsx @@ -9,37 +9,35 @@ const CustomSelect = ({ selectedOption, onClick, }) => { - return ( -
- setIsOpen(!isOpen)} +
- {selectedOption} - - {/* select__placeholder */} + setIsOpen(!isOpen)} + > + {selectedOption} + -
    - {options.map((option) => { - return ( -
  • onClick(option.label)} - > - {option.label} -
    • - ); - })} -
- {/* select__list */} -
- // customized_select, is_open + +
); }; diff --git a/components/CustomSelect/CustomSelect.module.scss b/components/CustomSelect/CustomSelect.module.scss index 8c130b7..f5a2531 100644 --- a/components/CustomSelect/CustomSelect.module.scss +++ b/components/CustomSelect/CustomSelect.module.scss @@ -1,190 +1,70 @@ .customized_select { position: relative; + max-width: 200px; + font-family: "Stolzl", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; color: #ffffff; &.is_open { .select__placeholder::after { content: "\f077"; - color: #33b7bc; } .select__list { display: block; } } - // is_open - - .select__placeholder { - user-select: none; - cursor: pointer; - font-family: "Stolzl", sans-serif; - font-style: normal; - font-weight: 700; - font-size: 15px; - - &::after { - content: "\f078"; - display: inline-block; - vertical-align: middle; - transform: translateY(-50%); - font-family: "FontAwesome"; - margin-left: 30px; - margin-top: 15px; - } - } - // select__placeholder - - .select__list { - width: 188px; - display: none; - z-index: 100; - position: absolute; - top: 35px; - right: 40px; - background: rgba(32, 32, 32, 0.4); - border: 1px solid #313131; - border-radius: 14px; - user-select: none; - list-style: none; - color: #fff; - margin: 0; - padding: 0 25px; - box-sizing: border-box; - .select__list__item { - border-bottom: 1px solid #323232; - font-family: "Stolzl", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 14px; - cursor: pointer; - padding: 15px 0; - &:hover { - transition: 0.3s; - color: #33b7bc !important; - } - &:last-child { - border: none; - } - } - // select__list__item - } - // select__list } -// customized_select -@media screen and (max-width: 1250px) { - .customized_select { - .select__placeholder { - font-size: 14px; - - &::after { - margin-left: 30px; - margin-top: 15px; - } - } - // select__placeholder - - .select__list { - width: 180px; - top: 35px; - right: 40px; - padding: 0 25px; - .select__list__item { - font-size: 13px; - padding: 15px 0; - } - // select__list__item - } - // select__list +.select__placeholder { + user-select: none; + cursor: pointer; + + &::after { + content: "\f078"; + display: inline-block; + vertical-align: middle; + transform: translateY(-50%); + font-family: "FontAwesome"; + color: #33b7bc; + margin-left: 30px; + margin-top: 15px; } - // customized_select } -@media screen and (max-width: 1024px) { - .customized_select { - .select__placeholder { - font-size: 13px; - - &::after { - margin-left: 20px; - margin-top: 10px; - } - } - // select__placeholder - - .select__list { - width: 130px; - top: 35px; - right: 40px; - padding: 0 20px; - .select__list__item { - font-size: 12px; - padding: 10px 0; - } - // select__list__item - } - // select__list - } - // customized_select -} - -@media screen and (max-width: 768px) { - .customized_select { - .select__placeholder { - font-size: 13px; - - &::after { - margin-left: 20px; - margin-top: 10px; - } +.select__list { + width: 188px; + height: 203px; + display: none; + z-index: 100; + position: absolute; + top: 35px; + right: 40px; + background: rgba(32, 32, 32, 0.4); + border: 1px solid #313131; + border-radius: 14px; + list-style: none; + color: #fff; + margin: 0; + padding: 25px 25px; + box-sizing: border-box; + .select__list__item { + font-family: "Stolzl", sans-serif; + font-style: normal; + font-weight: 500; + font-size: 15px; + cursor: pointer; + &:last-child { + margin: 0; } - // select__placeholder - - .select__list { - width: 120px; - top: 35px; - right: 40px; - padding: 0 20px; - .select__list__item { - font-size: 11px; - padding: 9px 0; - } - // select__list__item + &:hover { + transition: 0.3s; + color: #33b7bc !important; } - // select__list } - // customized_select - - .customized_select:nth-child(2) { - display: none; - } -} - - -@media screen and (max-width: 425px) { - .customized_select { - .select__placeholder { - font-size: 13px; - - &::after { - margin-left: 10px; - margin-top: 9px; - } - } - // select__placeholder - - .select__list { - width: 90px; - top: 35px; - right: 40px; - padding: 0 15px; - .select__list__item { - font-size: 9px; - padding: 7px 0; - } - // select__list__item - } - // select__list + hr { + margin: 15px 0 15px; } - // customized_select } diff --git a/components/Header/Header.jsx b/components/Header/Header.jsx index c7094c3..14b1b25 100644 --- a/components/Header/Header.jsx +++ b/components/Header/Header.jsx @@ -2,54 +2,41 @@ import s from "./Header.module.scss"; import CustomSelect from "../CustomSelect/CustomSelect"; -import BurgerMenu from "../BurgerMenu/BurgerMenu"; -import Logo from "../Logo/Logo"; const optionsCity = [ - { id: 1, value: "one", label: "Dubai" }, - { id: 2, value: "two", label: "Moscow" }, - { id: 3, value: "three", label: "Budapest" }, - { id: 4, value: "four", label: "Wiesbaden" }, + { value: "one", label: "Dubai" }, + { value: "two", label: "Moscow" }, + { value: "three", label: "Budapest" }, + { value: "four", label: "Wiesbaden" }, ]; const optionsLanguage = [ - { id: 5, value: "five", label: "ENG" }, - { id: 6, value: "six", label: "RUS" }, - { id: 7, value: "seven", label: "KGZ" }, - { id: 8, value: "eigth", label: "XZ" }, + { value: "one", label: "ENG" }, + { value: "two", label: "RUS" }, + { value: "three", label: "KGZ" }, + { value: "four", label: "XZ" }, ]; const Header = () => { - // dubai - const [optionsCityState, setOptionsCityState] = useState( - optionsCity[0].label - ); - + const [optionsCityState, setOptionsCityState] = useState(optionsCity[0].label); const [cityOpen, setCityOpen] = useState(false); - + const handleOptionClickCity = (value) => { - console.log("City", cityOpen); setCityOpen(!cityOpen); setOptionsCityState(value); }; - - // Eng - const [optionsLanguageState, setOptionsLanguageState] = useState( - optionsLanguage[0].label - ); + + const [optionsLanguageState, setOptionsLanguageState] = useState(optionsLanguage[0].label); const [languageOpen, setLanguageOpen] = useState(false); const handleOptionClickLanguage = (value) => { - console.log("language", languageOpen); setLanguageOpen(!languageOpen); setOptionsLanguageState(value); }; - return (