Merge pull request #2 from fs-jun24-team-3/feature/header-adaptive-la…

…yout

add header for main page

src/App.css

@@ -1,4 +1,4 @@
-#root {
+/* #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
@@ -39,4 +39,4 @@
 
 .read-the-docs {
   color: #888;
-}
+} */

src/App.tsx

@@ -1,28 +1,9 @@
-import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
 import './App.css';
+import { Header } from './components/Header';
 export const App = () => {
-  const [count, setCount] = useState(0);
-
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+      <Header />
     </>
   );
 };

src/components/Header/Header.scss

@@ -0,0 +1,85 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  //   padding: 18px 0;
+  border-bottom: 1px solid #e2e6e9;
+  &__menu {
+    display: flex;
+  }
+  &__logo {
+    width: 80px;
+    height: 28px;
+    margin-right: 48px;
+    margin-left: 24px;
+    @media (max-width: 1200px) {
+      width: 64px;
+      height: 20px;
+    }
+  }
+  &__icons {
+    display: flex;
+    // background-color: aqua;
+    &--like {
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/like.png);
+      display: block;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 24px;
+      @media (max-width: 1200px) {
+        margin: 16px;
+      }
+      @media (max-width: 640px) {
+        display: none;
+      }
+    }
+    &--basket {
+      width: 16px;
+      height: 16px;
+      display: block;
+      background-image: url(../../img/headerIcon/basket.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 24px;
+      @media (max-width: 1200px) {
+        margin: 16px;
+      }
+      @media (max-width: 640px) {
+        display: none;
+      }
+    }
+    &--menu {
+      display: none;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/Menu.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px;
+      @media (max-width: 640px) {
+        display: block;
+      }
+    }
+  }
+  &__icon--like {
+    display: block;
+    border-right: 1px solid #e2e6e9;
+    border-left: 1px solid #e2e6e9;
+    @media (max-width: 640px) {
+      display: none;
+    }
+  }
+  &__icon--menu {
+    display: none;
+    border-right: 1px solid #e2e6e9;
+    border-left: 1px solid #e2e6e9;
+    @media (max-width: 640px) {
+      display: block;
+    }
+  }
+}

src/components/Header/Header.tsx

@@ -1,9 +1,29 @@
 import React from 'react';
-import './Header.scss'
+import { NavHeader } from './NavHeader';
+import './Header.scss';
+import logo from '../../img/Logo.png';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const Header: React.FC<Props> = () => {
-  return <></>;
+  return (
+    <div className="header">
+      <div className="header__menu">
+        <img className="header__logo" src={logo} />
+        <NavHeader />
+      </div>
+      <div className="header__icons">
+        <div className="header__icon--like">
+          <div className="header__icons--like"></div>
+        </div>
+        <div className="header__icon--basket">
+          <div className="header__icons--basket"></div>
+        </div>
+        <div className="header__icon--menu">
+          <div className="header__icons--menu"></div>
+        </div>
+      </div>
+    </div>
+  );
 };

src/components/Header/NavHeader/NavHeader.scss

@@ -0,0 +1,49 @@
+.nav {
+  display: flex;
+  align-items: center;
+  @media (max-width: 640px) {
+    display: none;
+  }
+  &__icon {
+    text-transform: uppercase;
+    font-weight: 800;
+    font-size: 12px;
+    line-height: 11px;
+    letter-spacing: 4%;
+    color: #89939a;
+
+    &:not(:last-child) {
+      margin-right: 64px;
+    }
+    @media (max-width: 1200px) {
+      &:not(:last-child) {
+        margin-right: 36px;
+      }
+    }
+    &--active {
+      background-color: aqua;
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #000;
+      }
+    }
+  }
+}
+
+.nav__icon--active {
+  background-color: aqua;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #000;
+  }
+}

src/components/Header/NavHeader/NavHeader.tsx

@@ -4,5 +4,12 @@ import './NavHeader.scss';
 type Props = {};
 
 export const NavHeader: React.FC<Props> = () => {
-  return <></>;
+  return (
+    <div className="nav">
+      <div className="nav__icon">home</div>
+      <div className="nav__icon">phones</div>
+      <div className="nav__icon">tablets</div>
+      <div className="nav__icon">accessories</div>
+    </div>
+  );
 };

src/index.css

@@ -1,4 +1,4 @@
-:root {
+/* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -65,4 +65,13 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+} */
+
+body {
+  margin: 0;
+  font-family: 'Montserrat', sans-serif;
+  /* display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh; */
 }