fix: fix css component MenuNavigation and fix conflic

src/components/icons/ArrowLeftSmall.tsx

@@ -0,0 +1,18 @@
+const ArrowLeft = ({ ...props }) => {
+  return (
+    <svg
+      width="8"
+      height="12"
+      viewBox="0 0 8 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.28982 6.00019L6.82982 2.46019C7.01607 2.27283 7.12061 2.01938 7.12061 1.75519C7.12061 1.49101 7.01607 1.23756 6.82982 1.05019C6.73686 0.956464 6.62626 0.88207 6.5044 0.831301C6.38254 0.780533 6.25183 0.754395 6.11982 0.754395C5.98781 0.754395 5.8571 0.780533 5.73524 0.831301C5.61339 0.88207 5.50278 0.956464 5.40982 1.05019L1.16982 5.29019C1.07609 5.38316 1.0017 5.49376 0.950931 5.61562C0.900162 5.73747 0.874023 5.86818 0.874023 6.00019C0.874023 6.1322 0.900162 6.26291 0.950931 6.38477C1.0017 6.50663 1.07609 6.61723 1.16982 6.71019L5.40982 11.0002C5.50326 11.0929 5.61408 11.1662 5.73592 11.216C5.85775 11.2657 5.98821 11.291 6.11982 11.2902C6.25143 11.291 6.38189 11.2657 6.50373 11.216C6.62557 11.1662 6.73638 11.0929 6.82982 11.0002C7.01607 10.8128 7.12061 10.5594 7.12061 10.2952C7.12061 10.031 7.01607 9.77756 6.82982 9.59019L3.28982 6.00019Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default ArrowLeft

src/components/icons/ArrowRightSmall.tsx

@@ -0,0 +1,18 @@
+const ArrowRight = ({ ...props }) => {
+  return (
+    <svg
+      width="8"
+      height="12"
+      viewBox="0 0 8 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.8297 5.29019L2.5897 1.05019C2.49674 0.956464 2.38613 0.88207 2.26428 0.831301C2.14242 0.780533 2.01171 0.754395 1.8797 0.754395C1.74769 0.754395 1.61698 0.780533 1.49512 0.831301C1.37326 0.88207 1.26266 0.956464 1.1697 1.05019C0.983448 1.23756 0.878906 1.49101 0.878906 1.75519C0.878906 2.01938 0.983448 2.27283 1.1697 2.46019L4.7097 6.00019L1.1697 9.54019C0.983448 9.72756 0.878906 9.98101 0.878906 10.2452C0.878906 10.5094 0.983448 10.7628 1.1697 10.9502C1.26314 11.0429 1.37395 11.1162 1.49579 11.166C1.61763 11.2157 1.74809 11.241 1.8797 11.2402C2.01131 11.241 2.14177 11.2157 2.26361 11.166C2.38544 11.1162 2.49626 11.0429 2.5897 10.9502L6.8297 6.71019C6.92343 6.61723 6.99782 6.50663 7.04859 6.38477C7.09936 6.26291 7.1255 6.1322 7.1255 6.00019C7.1255 5.86818 7.09936 5.73747 7.04859 5.61562C6.99782 5.49376 6.92343 5.38316 6.8297 5.29019Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default ArrowRight

src/components/icons/IconHide.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const IconHide = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18 6L6 18" stroke="#2F2F2F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M6 6L18 18" stroke="#2F2F2F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    )
+}
+
+export default IconHide

src/components/icons/index.ts

@@ -9,3 +9,6 @@ export { default as IconHome } from './IconHome'
 export { default as IconShopping } from './IconShopping'
 export { default as IconHeart } from './IconHeart'
 export { default as IconVector } from './IconVector'
+export { default as IconHide } from './IconHide'
+export { default as ArrowLeftSmall } from './ArrowLeftSmall'
+export { default as ArrowRightSmall } from './ArrowRightSmall'