4 files changed, 32 insertions, 39 deletions
diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/icons/hamburger.module.scss
index 09e7e30..4fba4df 100644
--- a/src/components/atoms/icons/hamburger.module.scss
+++ b/src/components/atoms/icons/hamburger.module.scss
@@ -1,16 +1,21 @@
 @use "@styles/abstracts/functions" as fun;
 
-.icon {
-  display: block;
+.wrapper {
+  display: flex;
+  align-items: center;
   width: var(--icon-size, #{fun.convert-px(50)});
   height: var(--icon-size, #{fun.convert-px(50)});
   position: relative;
+}
 
+.icon {
   &,
   &::before,
   &::after {
     display: block;
     height: fun.convert-px(7);
+    width: 100%;
+    position: absolute;
     background: var(--color-primary-lighter);
     background-image: linear-gradient(
       to right,
@@ -25,33 +30,13 @@
   &::before,
   &::after {
     content: "";
-    position: absolute;
-    left: fun.convert-px(-1);
-    right: fun.convert-px(-1);
   }
 
   &::before {
-    bottom: fun.convert-px(15);
+    top: fun.convert-px(-15);
   }
 
   &::after {
-    top: fun.convert-px(15);
-  }
-
-  &--active {
-    background: transparent;
-    border: transparent;
-
-    &::before {
-      bottom: 0;
-      transform-origin: 50% 50%;
-      transform: rotate(45deg);
-    }
-
-    &::after {
-      top: 0;
-      transform-origin: 50% 50%;
-      transform: rotate(-45deg);
-    }
+    bottom: fun.convert-px(-15);
   }
 }
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
index 062d3ee..c753e69 100644
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ b/src/components/atoms/icons/hamburger.stories.tsx
@@ -9,7 +9,7 @@ export default {
       control: {
         type: 'text',
       },
-      description: 'Set additional classnames.',
+      description: 'Set additional classnames to the icon wrapper.',
       table: {
         category: 'Styles',
       },
@@ -18,14 +18,17 @@ export default {
         required: false,
       },
     },
-    isActive: {
+    iconClassName: {
       control: {
-        type: 'boolean',
+        type: 'text',
+      },
+      description: 'Set additional classnames to the icon.',
+      table: {
+        category: 'Styles',
       },
-      description: 'Transform hamburger into a cross when state is active.',
       type: {
-        name: 'boolean',
-        required: true,
+        name: 'string',
+        required: false,
       },
     },
   },
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
index f8a3c04..7173a23 100644
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ b/src/components/atoms/icons/hamburger.test.tsx
@@ -3,7 +3,7 @@ import Hamburger from './hamburger';
 
 describe('Hamburger', () => {
   it('renders a Hamburger icon', () => {
-    const { container } = render(<Hamburger isActive={false} />);
+    const { container } = render(<Hamburger />);
     expect(container).toBeDefined();
   });
 });
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
index 6716b26..7e7c2c9 100644
--- a/src/components/atoms/icons/hamburger.tsx
+++ b/src/components/atoms/icons/hamburger.tsx
@@ -3,13 +3,14 @@ import styles from './hamburger.module.scss';
 
 type HamburgerProps = {
   /**
-   * Set additional classnames to the icon.
+   * Set additional classnames to the icon wrapper.
    */
   className?: string;
+
   /**
-   * Transform hamburger to a close icon when active.
+   * Set additional classnames to the icon.
    */
-  isActive: boolean;
+  iconClassName?: string;
 };
 
 /**
@@ -17,11 +18,15 @@ type HamburgerProps = {
  *
  * Render a Hamburger icon.
  */
-const Hamburger: FC<HamburgerProps> = ({ className = '', isActive }) => {
-  const stateClass = isActive ? `${styles['icon--active']}` : '';
-  const iconClasses = `${styles.icon} ${stateClass} ${className}`;
-
-  return <span className={iconClasses}></span>;
+const Hamburger: FC<HamburgerProps> = ({
+  className = '',
+  iconClassName = '',
+}) => {
+  return (
+    <span className={`${styles.wrapper} ${className}`}>
+      <span className={`${styles.icon} ${iconClassName}`}></span>
+    </span>
+  );
 };
 
 export default Hamburger;