update header

hexlet-rus · Jan 9, 2024 · ba28aa6 · ba28aa6
1 parent 0ef3a73
commit ba28aa6
Showing 1 changed file with 64 additions and 21 deletions.
diff --git a/frontend/src/landing/Header.jsx b/frontend/src/landing/Header.jsx
@@ -29,25 +29,23 @@ function Header() {
   return (
     <header>
       <Navbar expand="lg">
-        <Container className="justify-content-between">
-          <Row>
-            <Col className="d-flex flex-nowrap">
-              <Navbar.Brand className="d-flex pb-lg-4 me-auto">
-                <Image fluid src={logo} width="80%" />
-              </Navbar.Brand>
-              <Navbar.Toggle
-                aria-controls="navbar-responsive"
-                className="border-0 ms-auto"
-                data-bs-toogle="collapse"
-              >
-                <Image src={Burger} />
-              </Navbar.Toggle>
-            </Col>
-          </Row>
-          <Row className="mx-auto mt-5">
+        <Container>
+          <Row className="justify-content-between gap-5">
             <Col>
-              <Navbar.Collapse className="mb-3 mb-lg-0" id="navbar-responsive">
-                <Nav as="ul" className="gap-2 text-center">
+              <div className="d-flex flex-nowrap justify-content-between gap-5">
+                <Navbar.Brand className="m-0">
+                  <Image fluid src={logo} />
+                </Navbar.Brand>
+                <Navbar.Toggle
+                  aria-controls="navbar-responsive"
+                  className="border-0 ms-auto"
+                  data-bs-toogle="collapse"
+                >
+                  <Image src={Burger} />
+                </Navbar.Toggle>
+              </div>
+              <Navbar.Collapse className="my-3 mb-lg-0" id="navbar-responsive">
+                <Nav as="ul" className="gap-2 text-center d-lg-none mb-3">
                   <li>
                     <Navbar.Brand className="header-link" href="#aboutProject">
                       <span>{t('landing.header.advantages')}</span>
@@ -69,9 +67,7 @@ function Header() {
                     </Navbar.Brand>
                   </li>
                 </Nav>
-              </Navbar.Collapse>
-              <Navbar.Collapse className="mb-3 mb-lg-0" id="navbar-responsive">
-                <Nav className="gap-3 ms-auto">
+                <Nav className=" mb-3 mb-lg-0 gap-3 ms-auto d-lg-none">
                   <Button
                     as={Link}
                     className="rounded-5 d-flex px-5 justify-content-center btn-signin"
@@ -91,6 +87,53 @@ function Header() {
                 </Nav>
               </Navbar.Collapse>
             </Col>
+            <Col className="mt-5 mt-lg-0 d-none d-lg-block">
+              <Nav
+                as="ul"
+                className="h-100 gap-2 text-center align-items-center"
+              >
+                <li>
+                  <Navbar.Brand className="header-link" href="#aboutProject">
+                    <span>{t('landing.header.advantages')}</span>
+                  </Navbar.Brand>
+                </li>
+                <li>
+                  <Navbar.Brand className="header-link" href="#advantages">
+                    <span>Преимущества</span>
+                  </Navbar.Brand>
+                </li>
+                <li>
+                  <Navbar.Brand className="header-link" href="#possibilities">
+                    <span>{t('landing.header.opportunities')}</span>
+                  </Navbar.Brand>
+                </li>
+                <li>
+                  <Navbar.Brand className="header-link" href="#faq">
+                    <span>{t('faq.faq')}</span>
+                  </Navbar.Brand>
+                </li>
+              </Nav>
+            </Col>
+            <Col className="d-none d-lg-block">
+              <Nav className="gap-3 ms-auto h-100 align-items-center">
+                <Button
+                  as={Link}
+                  className="rounded-5 d-flex px-5 justify-content-center btn-signin"
+                  to={routes.signInPagePath()}
+                  variant="primary"
+                >
+                  <span>sdfsd</span>
+                </Button>
+                <Button
+                  as={Link}
+                  className="rounded-5 d-flex px-5 justify-content-center btn-signup"
+                  to={routes.signUpPagePath()}
+                  variant="secondary"
+                >
+                  <span>{t('profileActions.signUp')}</span>
+                </Button>
+              </Nav>
+            </Col>
           </Row>
         </Container>
       </Navbar>