Powered by
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
index 1b6008d..9fee71a 100644
--- a/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
@@ -14,7 +14,7 @@ const FooterLinksAccordion = ({ title, content }: Title) => {
setIsActive(!isActive)}>
{title}
- {isActive ? - : +}
+ {isActive ? _ : +}
{isActive && <>{content}}
diff --git a/react-ts/src/components/MenuMobile/Component.module.scss b/react-ts/src/components/MenuMobile/Component.module.scss
index 646eccd..2d54740 100644
--- a/react-ts/src/components/MenuMobile/Component.module.scss
+++ b/react-ts/src/components/MenuMobile/Component.module.scss
@@ -2,8 +2,8 @@
.container-components {
width: 100%;
- height: 168.5%;
- position: absolute;
+ height: 100%;
+ position: fixed;
top: 0;
left: 0;
background: rgba(69, 69, 69, 0.7);
@@ -15,6 +15,7 @@
position: absolute;
width: 96.48%;
height: 585px;
+ transition: all .5s ease-in-out;
&__logon {
width: 100%;
display: flex;
@@ -28,7 +29,7 @@
}
&__ul {
width: 100%;
- height: 100%;
+ height: 548px;
position: absolute;
display: flex;
flex-direction: column;
@@ -49,3 +50,11 @@
}
}
}
+
+@media only screen and (min-width: 375px) {
+ .container-components {
+ &__wrapper {
+ width: 90.4%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/MenuMobile/ComponentMobile.tsx b/react-ts/src/components/MenuMobile/ComponentMobile.tsx
index e5a17b7..8274b9c 100644
--- a/react-ts/src/components/MenuMobile/ComponentMobile.tsx
+++ b/react-ts/src/components/MenuMobile/ComponentMobile.tsx
@@ -1,18 +1,24 @@
+import { useRef } from 'react';
+
import styles from './Component.module.scss';
import UserAccount from '../UserAccount/UseAccount';
import CloseMobile from '../../assets/images/CloseMobile.svg';
-
+import useOnClickOutside from './UseClickOutSide';
interface MenuComponentProps {
closeMenu: () => void;
}
const MenuComponent = ({closeMenu}: MenuComponentProps) => {
-
+
+ const mobileRef = useRef
(null)
+
+ useOnClickOutside(mobileRef, closeMenu)
+
return (
-
+
diff --git a/react-ts/src/components/MenuMobile/MenuMobile.tsx b/react-ts/src/components/MenuMobile/MenuMobile.tsx
index 22d0415..1e3722c 100644
--- a/react-ts/src/components/MenuMobile/MenuMobile.tsx
+++ b/react-ts/src/components/MenuMobile/MenuMobile.tsx
@@ -19,7 +19,7 @@ const MenuMobile = () => {
return (
- {IsOpen ?
:
}
+ {IsOpen ?
:
}
)
}
diff --git a/react-ts/src/components/MenuMobile/useClickOutSide.tsx b/react-ts/src/components/MenuMobile/useClickOutSide.tsx
new file mode 100644
index 0000000..e49c8cd
--- /dev/null
+++ b/react-ts/src/components/MenuMobile/useClickOutSide.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+
+type AnyEvent = MouseEvent | TouchEvent;
+
+function useOnClickOutside
(
+ ref: RefObject,
+ handler: (event: AnyEvent) => void,
+): void {
+ useEffect(() => {
+ const listener = (event: AnyEvent) => {
+ const el = ref?.current;
+
+ // Do nothing if clicking ref's element or descendent elements
+ if (!el || el.contains(event.target as Node)) {
+ return;
+ }
+
+ handler(event);
+ };
+
+ document.addEventListener('mousedown', listener);
+ document.addEventListener('touchstart', listener);
+
+ return () => {
+ document.removeEventListener('mousedown', listener);
+ document.removeEventListener('touchstart', listener);
+ };
+ }, [ref, handler]);
+}
+
+export default useOnClickOutside;
\ No newline at end of file
diff --git a/react-ts/src/components/SocialMedia/SocialMedia.module.scss b/react-ts/src/components/SocialMedia/SocialMedia.module.scss
index 10d71e7..ac11893 100644
--- a/react-ts/src/components/SocialMedia/SocialMedia.module.scss
+++ b/react-ts/src/components/SocialMedia/SocialMedia.module.scss
@@ -19,14 +19,6 @@
}
}
-@media only screen and (max-width: 1025px ) {
- .container {
- a {
- display: none;
- }
- }
-}
-
@media only screen and (min-width: 2500px) {
.container {
&__picture {
diff --git a/react-ts/src/main.tsx b/react-ts/src/main.tsx
index 202e68a..13bed00 100644
--- a/react-ts/src/main.tsx
+++ b/react-ts/src/main.tsx
@@ -5,6 +5,6 @@ import './index.scss'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
,
)