Added: Header

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+/.idea
 .DS_Store
 .env.local
 .env.development.local

src/components/Header/Center/Auth/Button/index.js

@@ -0,0 +1,13 @@
+const AuthButton = () => {
+  return (
+    <a href="#top" className="account-nav-link auth-button">
+      <div className="icon-container">
+        <i className="i-user initial-icon"></i>
+        <i className="i-user-orange hover-icon"></i>
+      </div>
+      <span>Giriş Yap</span>
+    </a>
+  );
+};
+
+export default AuthButton;

src/components/Header/Center/Auth/Dropdown/index.js

@@ -0,0 +1,19 @@
+import {Link} from "react-router-dom";
+import Button from "../../../../Button";
+
+import "./style.scss";
+
+const AuthDropdown = () => {
+  return (
+    <div className="auth-dropdown dropdown-menu">
+      <Button width="100%" height="34px" size="sm" as={Link} to="/">
+        Giriş Yap
+      </Button>
+      <Button variant="secondary" size="sm" width="100%" height="34px" as={Link} to="/">
+        Üye Ol
+      </Button>
+    </div>
+  );
+};
+
+export default AuthDropdown; 

src/components/Header/Center/Auth/Dropdown/style.scss

@@ -0,0 +1,46 @@
+.auth-dropdown.dropdown-menu {
+  position: absolute;
+  top: 40px;
+  left: -67px;
+  z-index: 1002;
+  width: 196px;
+  height: auto;
+  padding: 15px;
+  background-color: #fff;
+  border: 1px solid #e6e6e6;
+  border-radius: 6px;
+  box-shadow: 0 3px 10px 0 rgb(0 0 0 / 7%);
+
+  .btn:first-child {
+    margin-bottom: 10px;
+  }
+
+  &:before, &:after {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    display: inline-block;
+    content: "";
+    border-top: 0;
+  }
+
+  &:before {
+    color: #e6e6e6;
+    margin-left: -9px;
+    vertical-align: 9px;
+    border-bottom: 9px solid;
+    border-right: 9px solid transparent;
+    border-left: 9px solid transparent;
+  }
+
+  &:after {
+    color: #fff;
+    margin-left: -8px;
+    vertical-align: 8px;
+    border-bottom: 8px solid;
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent;
+  }
+}

src/components/Header/Center/Auth/index.js

@@ -0,0 +1,13 @@
+import AuthButton from "./Button";
+import AuthDropdown from "./Dropdown";
+
+const Auth = () => {
+  return (
+    <div>
+      <AuthButton/>
+      <AuthDropdown/>
+    </div>
+  );
+};
+
+export default Auth;

src/components/Header/Center/ShoppingCart/Button/index.js

@@ -0,0 +1,16 @@
+import "./style.scss";
+
+const ShoppingCartButton = () => {
+  return (
+    <a href="#top" className="account-nav-link shopping-cart-button">
+      <div className="icon-container">
+        <i className="i-bagg initial-icon"></i>
+        <i className="i-bagg-orange hover-icon"></i>
+      </div>
+      <span>Sepetim</span>
+      <span className="shopping-cart-item-count">1</span>
+    </a>
+  );
+};
+
+export default ShoppingCartButton;

src/components/Header/Center/ShoppingCart/Button/style.scss

@@ -0,0 +1,14 @@
+.shopping-cart {
+  &-item-count {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    width: 16px;
+    height: 16px;
+    color: #fff;
+    background-color: #f27a1a;
+    border-radius: 50%;
+    margin-left: 3px !important;
+  }
+}

src/components/Header/Center/ShoppingCart/Preview/index.js

@@ -0,0 +1,36 @@
+import "./style.scss";
+import Button from "../../../../Button";
+import {Link} from "react-router-dom";
+
+const ShoppingCartPreview = () => {
+  return (
+    <div className="shopping-cart-preview dropdown-menu">
+      <div className="shopping-cart-title">Sepetim (1 Ürün)</div>
+      <ul className="shopping-cart-items">
+        <li className="shopping-cart-item">
+          <a className="shopping-cart-item-wrapper" href="#top">
+            <div className="shopping-cart-item-image">
+              <img src="https://cdn.dsmcdn.com/ty68/product/media/images/20210211/6/61991577/58041185/1/1_org_zoom.jpg"
+                   alt="" width={55}/>
+            </div>
+            <div className="shopping-cart-item-content">
+              <div className="shopping-cart-item-title">Deneme Test Ürünü Deneme Test Ürünü Deneme Test Ürünü</div>
+              <div className="shopping-cart-item-details">Beden: Tek Ebat Adet: 1</div>
+              <div className="shopping-cart-item-price">64,90 TL</div>
+            </div>
+          </a>
+        </li>
+      </ul>
+      <div className="shopping-cart-footer">
+        <Button variant="secondary" width="48%" height="34px" size="sm" fontSize="15px" as={Link} to="/">
+          Sepete Git
+        </Button>
+        <Button size="sm" width="48%" height="34px" fontSize="15px" as={Link} to="/">
+          Siparişi Tamamla
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ShoppingCartPreview;

src/components/Header/Center/ShoppingCart/Preview/style.scss

@@ -0,0 +1,67 @@
+.shopping-cart-preview.dropdown-menu {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  z-index: 1002;
+  width: 300px;
+  height: auto;
+  background-color: #fff;
+  border: solid 1px #e6e6e6;
+  border-radius: 6px;
+  box-shadow: 0 3px 10px 0 rgb(0 0 0 / 7%);
+}
+
+.shopping-cart-preview {
+  .shopping-cart-title {
+    font-weight: 600;
+    font-size: 14px;
+    color: #333;
+    padding: 15px;
+  }
+
+  .shopping-cart-items {
+    padding: 15px;
+    padding-top: 0;
+
+    .shopping-cart-item {
+      &-wrapper {
+        display: flex;
+        color: #333;
+        text-decoration: none;
+      }
+
+      &-image {
+        margin-right: 15px;
+
+        img {
+          width: 55px;
+          height: 82px;
+          border-radius: 6px;
+        }
+      }
+
+      &-title {
+        font-size: 14px;
+        margin-bottom: 10px;
+      }
+
+      &-details {
+        color: #999;
+        font-size: 11px;
+        margin-bottom: 10px;
+      }
+
+      &-price {
+        font-size: 14px;
+        color: #f27a1a;
+      }
+    }
+  }
+
+  .shopping-cart-footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 15px;
+    border-top: 1px solid #e6e6e6;
+  }
+}

src/components/Header/Center/ShoppingCart/index.js

@@ -0,0 +1,13 @@
+import ShoppingCartButton from "./Button";
+import ShoppingCartPreview from "./Preview";
+
+const ShoppingCart = () => {
+  return (
+    <div>
+      <ShoppingCartButton/>
+      <ShoppingCartPreview/>
+    </div>
+  );
+};
+
+export default ShoppingCart;