Header

package-lock.json

@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "sass": "^1.69.5",
         "web-vitals": "^2.1.4"
       }
     },
@@ -9231,6 +9232,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -15282,6 +15288,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -24451,6 +24473,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
       "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
     },
+    "immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -28629,6 +28656,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.69.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,23 +1,11 @@
-import logo from './logo.svg';
+import Header from "./components/Header/Header";
-import './App.css';
+import Home from "./pages/Home/Home";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+        <Header />
-        <img src={logo} className="App-logo" alt="logo" />
+        <Home />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }

src/assets/images/select.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.5L5 4.5L9 0.5" stroke="#5B6871"/>
+</svg>

src/components/Header/Header.js

@@ -0,0 +1,57 @@
+import React from "react";
+
+import NavigationItem from "../../pages/NavigationItem/NavigationItem";
+import SocialItem from "../../pages/SocialItem/SocialItem";
+
+import instagram from "../../assets/images/socials/instagram.png";
+import whatsapp from "../../assets/images/socials/whatsapp.png";
+import faceBook from "../../assets/images/socials/facebook.png";
+import profile from "../../assets/images/profile-user.png";
+
+import "./header.scss";
+
+const Header = () => {
+    const navigationItems = ["Аукционы", "Поставщики", "Одобрение заявок"]
+    const socials = [
+        {
+          name: "faceBook",
+          img: faceBook,
+          href: "#"
+        },
+        {
+            name: "instagram",
+            img: instagram,
+            href: "#"
+        },
+        {
+            name: "whatsapp",
+            img: whatsapp,
+            href: "#"
+        },
+        ]
+    return (
+        <header className="header">
+            <div className="container">
+                <h1 className="header__logo">Logo</h1>
+                <nav className="header__nav">
+                    {navigationItems.map((item) => {
+                      return <NavigationItem title={item} key={item} />
+                    })}
+                </nav>
+                <div className="header__info">
+                    <span className="header__infoPhone">+7 (861) 111-11-11</span>
+                    <div className="header__infoSocials">
+                        {socials.map((social) => {
+                            return <SocialItem href={social.href} img={social.img} key={social.name} />
+                        })}
+                    </div>
+                    <div className="header__infoProfile">
+                        <img src={profile} alt="profile" />
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+};
+
+export default Header;

src/components/Header/header.scss

@@ -0,0 +1,55 @@
+.container {
+  display: flex;
+  align-items: center;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.header {
+  padding: 10px;
+  background: gray;
+
+  &__logo {
+    font-size: 30px;
+    font-weight: 700;
+  }
+
+  &__nav {
+    display: flex;
+    column-gap: 15px;
+    margin-left: 50px;
+  }
+
+  &__info {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    column-gap: 15px;
+
+    &Phone {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    &Socials {
+      display: flex;
+      column-gap: 8px;
+    }
+
+    &Profile {
+      display: flex;
+      cursor: pointer;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50px;
+      width: 30px;
+      height: 30px;
+      background-color: #b0aeae;
+
+      img {
+        width: 28px;
+        height: 28px;
+      }
+    }
+  }
+}

src/index.css

@@ -1,5 +1,7 @@
 body {
   margin: 0;
+  padding: 0;
+  box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
   'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
   sans-serif;
@@ -7,6 +9,34 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html, div, span,
+h1, h2, h3, h4, h5, h6, p,
+a, table, caption, tbody, tfoot, thead, tr, th, td,
+footer, header, menu, nav {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+}
+
+footer, header, menu, nav, section {
+  display: block;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/pages/Home/Home.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Home = () => {
+    return (
+        <div>
+            1234Holo
+        </div>
+    );
+};
+
+export default Home;

src/pages/NavigationItem/NavigationItem.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import arrow from "../../assets/images/select.svg"
+
+import "./navigationItem.scss";
+
+const NavigationItem = ({title}) => {
+    return (
+        <div className="navigationItem">
+            <h5>{title}</h5>
+            <img src={arrow} alt="arrow" />
+        </div>
+    );
+};
+
+export default NavigationItem;

src/pages/NavigationItem/navigationItem.scss

@@ -0,0 +1,11 @@
+.navigationItem {
+  display: flex;
+  cursor: pointer;
+  column-gap: 8px;
+  align-items: center;
+
+  h5 {
+    font-size: 15px;
+    font-weight: 500;
+  }
+}

src/pages/SocialItem/SocialItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+import "./socialItem.scss";
+
+const SocialItem = ({img, href}) => {
+    return (
+        <a className="socialItem" href={href}>
+            <img src={img} alt='socialIcon' />
+        </a>
+    );
+};
+
+export default SocialItem;

src/pages/SocialItem/socialItem.scss

@@ -0,0 +1,14 @@
+.socialItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  background-color: #b6b6b6;
+  width: 30px;
+  height: 30px;
+
+  img {
+    width: 15px;
+    height: 15px;
+  }
+}