From c7e0de4f8297ae3945a4916b5404366f79991829 Mon Sep 17 00:00:00 2001
From: Uzhastin-Nikita <fosfor20@mail.ru>
Date: Mon, 23 May 2022 14:37:53 +0300
Subject: [PATCH] feat: relocate HamburgerMenu atom from WEB

---
 .../HamburgerMenu.styles.module.scss          | 54 +++++++++++++++++++
 .../atoms/HamburgerMenu/HamburgerMenu.tsx     | 26 +++++++++
 .../HamburgerMenu/HamburgerMenu.utils.ts      |  0
 src/components/atoms/HamburgerMenu/index.ts   |  1 +
 4 files changed, 81 insertions(+)
 create mode 100644 src/components/atoms/HamburgerMenu/HamburgerMenu.styles.module.scss
 create mode 100644 src/components/atoms/HamburgerMenu/HamburgerMenu.tsx
 create mode 100644 src/components/atoms/HamburgerMenu/HamburgerMenu.utils.ts
 create mode 100644 src/components/atoms/HamburgerMenu/index.ts

diff --git a/src/components/atoms/HamburgerMenu/HamburgerMenu.styles.module.scss b/src/components/atoms/HamburgerMenu/HamburgerMenu.styles.module.scss
new file mode 100644
index 0000000..c86f793
--- /dev/null
+++ b/src/components/atoms/HamburgerMenu/HamburgerMenu.styles.module.scss
@@ -0,0 +1,54 @@
+@import 'src/scss/mixins';
+
+.hamburger-menu {
+  height: 25px;
+  width: 25px;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+
+  &:hover {
+    color: $color-light;
+  }
+}
+
+.line {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 5px;
+  background-color: $color-base;
+
+  &:nth-of-type(2) {
+    top: calc(44% - 6px);
+  }
+
+  &:nth-of-type(3) {
+    top: calc(63% + 5px);
+  }
+}
+
+.transition {
+  @include devices {
+    .line {
+      transition: all 1s;
+
+      &:nth-of-type(1) {
+        top: 50%;
+        transform: rotate(45deg);
+      }
+
+      &:nth-of-type(2) {
+        display: none;
+      }
+
+      &:nth-of-type(3) {
+        top: 50%;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
diff --git a/src/components/atoms/HamburgerMenu/HamburgerMenu.tsx b/src/components/atoms/HamburgerMenu/HamburgerMenu.tsx
new file mode 100644
index 0000000..dd34958
--- /dev/null
+++ b/src/components/atoms/HamburgerMenu/HamburgerMenu.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import css from './HamburgerMenu.styles.module.scss'
+
+export type HamburgerMenuProps = {
+  isHamburger: boolean
+  className?: string
+  onClick: () => void
+}
+
+export const HamburgerMenu = ({ className, onClick, isHamburger }: HamburgerMenuProps) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cx(css.hamburgerMenu, className, {
+        [css.transition]: isHamburger
+      })}
+    >
+      <div className={css.line} />
+      <div className={css.line} />
+      <div className={css.line} />
+    </div>
+  )
+}
diff --git a/src/components/atoms/HamburgerMenu/HamburgerMenu.utils.ts b/src/components/atoms/HamburgerMenu/HamburgerMenu.utils.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/atoms/HamburgerMenu/index.ts b/src/components/atoms/HamburgerMenu/index.ts
new file mode 100644
index 0000000..ce7fdc2
--- /dev/null
+++ b/src/components/atoms/HamburgerMenu/index.ts
@@ -0,0 +1 @@
+export * from './HamburgerMenu'