Added: Header

benfiratkaya · Sep 19, 2021 · 9f8f299 · 9f8f299
1 parent cd89583
commit 9f8f299
Show file tree

Hide file tree

Showing 18 changed files with 1,321 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-grid-system": "^7.3.1",

diff --git a/src/components/Header/Bottom/index.js b/src/components/Header/Bottom/index.js
@@ -0,0 +1,119 @@
+import {Container} from "react-grid-system";
+
+import "./style.scss";
+
+const HeaderBottom = () => {
+  return (
+    <div className="header-bottom">
+      <Container>
+        <nav className="category-nav">
+          <ul className="category-nav-items">
+            <li className="category-nav-item dropdown">
+              <a className="category-nav-link" href="#top">
+                Kadın
+              </a>
+              <div className="dropdown-menu">
+                <div className="category-subnav">
+                  <div className="category-subnav-wrapper">
+                    <div className="category-subnav-col">
+                      <a className="category-subnav-title" href="#top">Giyim</a>
+                      <ul>
+                        <li>
+                          <a href="#top">
+                            Elbise
+                          </a>
+                        </li>
+                        <li>
+                          <a href="#top">
+                            Elbise
+                          </a>
+                        </li>
+                        <li>
+                          <a href="#top">
+                            Elbise
+                          </a>
+                        </li>
+                      </ul>
+
+                    </div>
+                    <div className="category-subnav-col">
+                      <a className="category-subnav-title" href="#top">Giyim</a>
+                    </div>
+                    <div className="category-subnav-col">
+                      <a className="category-subnav-title" href="#top">Giyim</a>
+                    </div>
+                    <div className="category-subnav-col">
+                      <a className="category-subnav-title" href="#top">Giyim</a>
+                    </div>
+                    <div className="category-subnav-col">
+                      <a className="category-subnav-title" href="#top">Giyim</a>
+                    </div>
+                    <div className="category-subnav-campaign">
+                      <a href="#top">
+                        <img
+                          src="https://cdn.dsmcdn.com/mnresize/500/247/ty175/campaign/banners/original/582354/dbddf0cac5_0_detay.jpg"
+                          alt=""/>
+                      </a>
+                      <a href="#top">
+                        <img
+                          src="https://cdn.dsmcdn.com/mnresize/500/247/ty175/campaign/banners/original/582354/dbddf0cac5_0_detay.jpg"
+                          alt=""/>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Erkek
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Çocuk
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Ev & Yaşam
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Süpermarket
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Kozmetik
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Ayakkabı & Çanta
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Saat & Aksesuar
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Elektronik
+              </a>
+            </li>
+            <li className="category-nav-item">
+              <a className="category-nav-link" href="#top">
+                Spor & Outdoor
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </Container>
+    </div>
+  );
+}
+
+export default HeaderBottom;
diff --git a/src/components/Header/Bottom/style.scss b/src/components/Header/Bottom/style.scss
@@ -0,0 +1,111 @@
+.header-main {
+  .header-bottom {
+    position: relative;
+    z-index: 1001;
+    border-bottom: 1px solid #e8e8e8;
+
+    .category-nav {
+      .category-nav-items {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .category-nav-item {
+          position: initial;
+
+          .category-nav-link {
+            display: flex;
+            padding: 12px 6px;
+            border-bottom: 2px solid transparent;
+            color: #333;
+            font-size: 14px;
+            font-weight: 600;
+            text-decoration: none;
+            text-transform: uppercase;
+
+            &:hover {
+              color: #f27a1a;
+              border-color: #f27a1a;
+            }
+          }
+        }
+      }
+    }
+
+    .category-subnav {
+      position: absolute;
+      top: 40px;
+      left: 0;
+      z-index: 999;
+      display: flex;
+      justify-content: space-between;
+      width: calc(100% - 50px);
+      height: 300px;
+      padding: 25px;
+      background-color: #fff;
+      border: 1px solid #e6e6e6;
+      border-top-color: transparent;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+
+      &-wrapper {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      &-col {
+        display: flex;
+        flex-direction: column;
+
+        .category-subnav-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #333;
+          text-decoration: none;
+        }
+
+        ul {
+          margin-top: 6px;
+
+          li {
+            padding-bottom: 4px;
+
+            a {
+              font-size: 13px;
+              color: #666;
+              text-decoration: none;
+
+              &:hover {
+                color: #f27a1a;
+                text-decoration: underline;
+                transition: all linear 0.2s;
+              }
+            }
+          }
+        }
+      }
+
+      &-campaign {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        a {
+          display: flex;
+
+          img {
+            width: 265px;
+            height: 137px;
+            border-radius: 6px;
+            transition: all 1s ease;
+
+            &:hover {
+              transform: scale(1.015);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/Header/Center/FavButton/index.js b/src/components/Header/Center/FavButton/index.js
@@ -0,0 +1,15 @@
+import "./style.scss";
+
+const FavButton = () => {
+  return (
+    <a href="#top" className="account-nav-link fav-button">
+      <div className="icon-container">
+        <i className="i-heart initial-icon"></i>
+        <i className="i-heart-orange hover-icon"></i>
+      </div>
+      <span>Favorilerim</span>
+    </a>
+  );
+};
+
+export default FavButton;
diff --git a/src/components/Header/Center/FavButton/style.scss b/src/components/Header/Center/FavButton/style.scss
diff --git a/src/components/Header/Center/SearchBox/index.js b/src/components/Header/Center/SearchBox/index.js
@@ -0,0 +1,12 @@
+import "./style.scss";
+
+const SearchBox = () => {
+  return (
+    <div className="searchbox">
+      <input type="text" placeholder="Aradığınız ürün, kategori veya markayı yazınız"/>
+      <i className="search-icon"></i>
+    </div>
+  );
+};
+
+export default SearchBox;
diff --git a/src/components/Header/Center/SearchBox/style.scss b/src/components/Header/Center/SearchBox/style.scss
@@ -0,0 +1,32 @@
+.searchbox {
+  width: 100%;
+  display: flex;
+
+  input {
+    width: 100%;
+    background: #f3f3f3;
+    font-size: 14px;
+    color: #333;
+    border: 2px solid transparent;
+    border-radius: 6px;
+    padding: 10px 40px 10px 15px;
+    transition: all ease 0.3s;
+    outline: none;
+
+    &:focus {
+      background: #fff;
+      border-color: #f27a1a;
+      box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%), 0 3px 10px 0 rgb(0 0 0 / 10%);
+    }
+  }
+
+  .search-icon {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    right: 30px;
+    bottom: calc(50% - 9px);
+    cursor: pointer;
+    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%23F27A1A' d='M18.711 17.306l-4.684-4.703a7.49 7.49 0 0 0 1.864-4.932C15.891 3.441 12.327 0 7.946 0S0 3.441 0 7.671s3.565 7.671 7.946 7.671a8.056 8.056 0 0 0 4.552-1.388l4.72 4.74c.197.197.462.306.746.306.27 0 .525-.1.718-.28a.977.977 0 0 0 .03-1.414zM7.946 2.001c3.238 0 5.873 2.544 5.873 5.67 0 3.127-2.635 5.67-5.873 5.67-3.239 0-5.873-2.543-5.873-5.67 0-3.126 2.634-5.67 5.873-5.67z'/%3E%3C/svg%3E");
+  }
+}
diff --git a/src/components/Header/Center/index.js b/src/components/Header/Center/index.js
@@ -0,0 +1,44 @@
+import {Col, Container, Row} from "react-grid-system";
+import {Link} from "react-router-dom";
+import SearchBox from "./SearchBox";
+import Auth from "./Auth";
+import FavButton from "./FavButton";
+import ShoppingCart from "./ShoppingCart";
+
+import "./style.scss";
+
+const HeaderCenter = () => {
+  return (
+    <div className="header-center">
+      <Container>
+        <Row>
+          <Col xs={2} className="header-col">
+            <div className="logo">
+              <Link to="/">
+                <img src="https://cdn.dsmcdn.com/web/logo/ty-logo.svg" alt="Trendyol Logo" width="110px"/>
+              </Link>
+            </div>
+          </Col>
+          <Col xs={6} className="header-col">
+            <SearchBox/>
+          </Col>
+          <Col xs={4} className="header-col">
+            <div className="account-nav">
+              <div className="account-nav-item dropdown">
+                <Auth/>
+              </div>
+              <div className="account-nav-item">
+                <FavButton/>
+              </div>
+              <div className="account-nav-item dropdown">
+                <ShoppingCart/>
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  );
+}
+
+export default HeaderCenter;
diff --git a/src/components/Header/Center/style.scss b/src/components/Header/Center/style.scss
@@ -0,0 +1,38 @@
+.header-main {
+  .header-center {
+    padding: 10px 0;
+
+    .header-col {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .account-nav {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+
+        &-item {
+          margin-left: 20px;
+        }
+
+        &-link {
+          display: flex;
+          align-items: center;
+          color: #333;
+          font-weight: 600;
+          font-size: 13px;
+          text-decoration: none;
+
+          &:hover {
+            color: #f27a1a;
+          }
+
+          span {
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+  }
+}