feat: add header

src/layouts/Header/Header.css

+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header__actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.header__actions__icon {
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.sidebar__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 999;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.sidebar {
+    width: 70%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    background: var(--background-color);
+    padding: 1rem;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+}
+
+.sidebar__content__navs {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.sidebar__content__navs a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    padding: 0.75rem 1rem;
+    color: var(--text-color);
+}
+
+.sidebar__content__navs a.active {
+    background: #e9f1ff;
+    color: var(--primary-color);
+    border-radius: 50px;
+}
+
+.sidebard__content__navs__icon {
+    font-size: 1.2rem;
+}
+
+.sidebar__logout {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+}
+
+.sidebar__logout__icon {
+    font-size: 1.2rem;
+}
\ No newline at end of file

src/layouts/Header/Header.tsx

-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import "./Header.css";
+import {
+  IoNotificationsOutline,
+  IoPhonePortraitOutline,
+  IoReload,
+  IoSettingsOutline,
+} from "react-icons/io5";
+import CSelect from "../../components/CSelect";
+import { GrMenu } from "react-icons/gr";
+import { NavLink } from "react-router-dom";
+import { MdLogout } from "react-icons/md";
+import { RiHome3Line } from "react-icons/ri";
+import { BsCreditCard } from "react-icons/bs";
+import { useTranslation } from "react-i18next";
+
+const devices = [
+  {
+    label: "iPhone 15 Pro",
+    value: "iphone-15-pro",
+    image: <IoPhonePortraitOutline />,
+  },
+  {
+    label: "iPhone 14 Pro",
+    value: "iphone-14-pro",
+    image: <IoPhonePortraitOutline />,
+  },
+  {
+    label: "iPhone 13 Pro",
+    value: "iphone-13-pro",
+    image: <IoPhonePortraitOutline />,
+  },
+];
 
 const Header: React.FC = () => {
-  return <div>Header</div>;
+  const [selectedDevice, setSelectedDevice] = useState(devices[0].value);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
+
+  const handleOutsideClick = (e: MouseEvent) => {
+    if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
+      setIsSidebarOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isSidebarOpen) {
+      document.addEventListener("mousedown", handleOutsideClick);
+    } else {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [isSidebarOpen]);
+
+  return (
+    <>
+      <div className="header wrapper">
+        <div className="header__actions">
+          <GrMenu
+            className="header__actions__icon"
+            onClick={() => setIsSidebarOpen(true)}
+          />
+
+          <IoReload
+            className="header__actions__icon"
+            onClick={() => window.location.reload()}
+          />
+        </div>
+
+        <div className="header__devices">
+          <CSelect
+            options={devices}
+            value={selectedDevice}
+            onChange={setSelectedDevice}
+            style={{ width: "250px" }}
+          />
+        </div>
+      </div>
+
+      {isSidebarOpen && (
+        <div className="sidebar__overlay">
+          <div className="sidebar" ref={sidebarRef}>
+            <div className="sidebar__content">
+              <div className="sidebar__content__navs">
+                <NavLink
+                  to={"/home"}
+                  className={({ isActive }) => (isActive ? "active" : "")}
+                  onClick={() => setIsSidebarOpen(false)}
+                >
+                  <RiHome3Line className="sidebard__content__navs__icon" />
+                  <span>{t("navs.home")}</span>
+                </NavLink>
+
+                <NavLink
+                  to={"/notifications"}
+                  className={({ isActive }) => (isActive ? "active" : "")}
+                  onClick={() => setIsSidebarOpen(false)}
+                >
+                  <IoNotificationsOutline className="sidebard__content__navs__icon" />
+                  <span>{t("navs.notifications")}</span>
+                </NavLink>
+
+                <NavLink
+                  to={"/subscription"}
+                  className={({ isActive }) => (isActive ? "active" : "")}
+                  onClick={() => setIsSidebarOpen(false)}
+                >
+                  <BsCreditCard className="sidebard__content__navs__icon" />
+                  <span>{t("navs.subscriptions")}</span>
+                </NavLink>
+
+                <NavLink
+                  to={"/settings"}
+                  className={({ isActive }) => (isActive ? "active" : "")}
+                  onClick={() => setIsSidebarOpen(false)}
+                >
+                  <IoSettingsOutline className="sidebard__content__navs__icon" />
+                  <span>{t("navs.settings")}</span>
+                </NavLink>
+              </div>
+            </div>
+
+            <div className="sidebar__logout">
+              <MdLogout className="sidebar__logout__icon" />
+              <span>{t("navs.logout")}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
 export default Header;

src/locales/en/en.json

@@ -19,6 +19,13 @@
     "terms": "terms of service",
     "privacyPolicy": "privacy policy"
   },
+  "navs": {
+    "home": "Home",
+    "notifications": "Notifications",
+    "subscriptions": "Subscriptions",
+    "settings": "Settings",
+    "logout": "Logout"
+  },
   "pincode": {
     "enterTitle": "Enter your PIN Code",
     "createTitle": "Create your PIN Code",

src/locales/ru/ru.json

@@ -19,6 +19,13 @@
     "terms": "условия использования",
     "privacyPolicy": "политику конфиденциальности"
   },
+  "navs": {
+    "home": "Главная",
+    "notifications": "Уведомления",
+    "subscriptions": "Подписки",
+    "settings": "Настройки",
+    "logout": "Выйти"
+  },
   "pincode": {
     "enterTitle": "Введите PIN-код",
     "createTitle": "Создайте PIN-код",