diff --git a/components/Header.tsx b/components/Header.tsx index 73df296..d2620dc 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -4,10 +4,25 @@ import React, { useEffect } from 'react'; import Link from 'next/link'; import JustValidate from 'just-validate'; import { useRouter } from 'next/router'; +import {Button} from "react-bootstrap"; + + +function myFunction() { + var x = document.getElementById("myLinks"); + if (x!=null){ + if (x.style.display !== "block") { + x.style.display = "block"; + } else { + x.style.display = "none"; + } + } +} + const Header: React.FC = () => { const router = useRouter(); useEffect(() => { + const search = document.querySelector('.header__search--disabled') as HTMLElement | null; const nav = document.querySelector('.header__nav') as HTMLElement | null; const searchContent = document.querySelector('.header__search-active') as HTMLElement | null; @@ -39,8 +54,8 @@ const Header: React.FC = () => { content.classList.remove('header__controls-active'); } }); - } - + } + else { console.error('One or more elements were not found.'); } @@ -70,29 +85,29 @@ const Header: React.FC = () => { validator .addField('#name', [ { - rule: 'required', - errorMessage: 'You did not enter a login', + rule: 'required', + errorMessage: 'You did not enter a login', }, { - rule: 'minLength', - value: 3, - errorMessage: '3 symbols minimum', + rule: 'minLength', + value: 3, + errorMessage: '3 symbols minimum', }, { - rule: 'maxLength', - value: 30, - errorMessage: '30 symbols maximum', + rule: 'maxLength', + value: 30, + errorMessage: '30 symbols maximum', }, ]) .addField('#password', [ { - rule: 'required', - errorMessage: 'You did not enter a password', + rule: 'required', + errorMessage: 'You did not enter a password', }, { - rule: 'minLength', - value: 3, - errorMessage: '3 symbols minimum', + rule: 'minLength', + value: 3, + errorMessage: '3 symbols minimum', }, ]) .onSuccess((event : Event) => { @@ -100,14 +115,16 @@ const Header: React.FC = () => { const formData = new FormData(event.target as HTMLFormElement); const name = formData.get('name') as string; const password = formData.get('password') as string; - + if (name === 'admin' && password === 'admin') { - router.push('/apanel'); + router.push('/apanel'); } else { - alert('Invalid login or password'); + alert('Invalid login or password'); } - }); - }, [router]); + }); + + + }, [router]); return (
@@ -138,7 +155,7 @@ const Header: React.FC = () => {
  • - Combo + Combo
    • @@ -154,17 +171,25 @@ const Header: React.FC = () => {
    -
    + @@ -172,9 +197,12 @@ const Header: React.FC = () => {

    @@ -194,12 +224,15 @@ const Header: React.FC = () => {

    If you don't have an account yet, register here.

    - +

    + + + + + +
    + + + + + myFunction()}> + + +
    + +
    ); }; diff --git a/src/css/style.css b/src/css/style.css index 6e7d928..dfb99f5 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -97,7 +97,7 @@ a, a:focus, a:visited { } .header>.container { - padding-bottom: 42px; + padding-bottom: 60px; align-items: center; } @@ -168,7 +168,7 @@ a, a:focus, a:visited { .header__back { position: absolute; width: 100%; - height: 12px; + height: 17px; background: url(../img/line.svg) no-repeat; background-size: contain; bottom: 0; @@ -196,7 +196,7 @@ a, a:focus, a:visited { position: relative; margin-right: 18px; top: 0; - left: -2px; + left: 10px; } .header__controls-active { @@ -206,7 +206,7 @@ a, a:focus, a:visited { } .header__log-content { - left: 0; + left: 10px; width: 100%; height: 100%; z-index: 999; @@ -303,6 +303,50 @@ a, a:focus, a:visited { border-color: var(--red); } + + + + + + + +/* Hide the links inside the navigation menu (except for logo/home) */ +.topnav #myLinks { + display: none; +} + +.topnav { + display: none; +} + +/* Style navigation menu links */ +.topnav a { + color: white; + padding: 50px 50px; + text-decoration: none; + font-size: 20px; + display: block; +} + +/* Style the hamburger menu */ +.topnav a.icon { + background: black; + display: block; + position: absolute; + right: 0; + top: 15px; +} + +/* Add a grey background color on mouse-over */ +.topnav a:hover { + background-color: #ddd; + color: black; +} + +/* Style the active link (or home/logo) */ + + + /* Hero */ .hero { @@ -843,7 +887,7 @@ a, a:focus, a:visited { } #map { - width: 460px; + width: 460px; height: 460px; } @@ -883,4 +927,188 @@ a, a:focus, a:visited { background: url(../img/mexican.jpg); background-size: cover; -} \ No newline at end of file +} +.header__basket{ + position: relative; + right: 11px; +} + + + + +/* Стили для экранов шириной до 480px (очень маленькие устройства) */ +@media (max-width: 480px) { + .header { + font-size: 16px; + } + + .header__nav{ + display: none; + } + + .header>.container { + padding-bottom: 0; + align-items: center; + } + .header__logo-link { + height: 80px; + width: 110px; + } + + .header__nav { + width: 100%; + text-align: center; + } + + .header__item:not(:last-child) { + margin-right: 20px; + } + + .header__link { + font-size: 20px; + line-height: 28px; + } + + .header__controls { + width: 120%; + display: flex; + /*justify-content: space-between;*/ + margin-top: 20px; + margin-right: 40px; + + } + + .header__log { + padding: 10px 15px; + width: 120px; + margin-right: 20px; + } + + .header__log>span { + font-size: 20px; + line-height: 28px; + } + + .header__search-content { + width: 220%; + margin-right: 0; + margin-left: 0; + padding: 1px 2px 1px 2px; + } + + .header__search-button { + margin-right: 10px; + left: 0; + } + .header__search--disabled{ + width: 20px; + height: 20px; + margin-left: 5px; + margin-top: 5px; + } + + .header__controls-active { + width: 100%; + margin-left: 0; + display: flex; + justify-content: center; + } + + .header__log-content>div { + width: 90%; + top: 20px; + padding: 20px; + } + + .header__log-title { + width: 100%; + font-size: 24px; + margin-bottom: 10px; + } + + .header__log-info { + width: 100%; + font-size: 16px; + margin-bottom: 20px; + } + + .header__log-form { + margin-bottom: 20px; + } + + .header__log-input { + width: 100%; + min-height: 50px; + } + + .header__log-button { + width: 100%; + min-height: 40px; + } + + + .topnav { + display: block; + } + + .topnav a { + padding: 10px 20px; + font-size: 16px; + } + + .topnav a.icon { + top: 25px; + } + + .footer__logo-link{ + width: 100px; + height: 90px; + } + + + .hero__back{ + display: none; + } + + .hero__info{ + width: 200%; + } + + + .catalog__items-block{ + margin-top: 200px; + margin-left: 0; + + } + + + + + + .choices__inner{ + width: 120px; + } + + .choices.is-open{ + width: 120px; + } + + .choices{ + width: 120px; + } + + .newsletter__info{ + width: 100%; + } + + .about.container.flex{ + main{height: calc(100% - 50px);} + } + + + + .swiper-wrapper{ + width: 300px; + } +} +