Menu looking pogger

polsevev.dev.frontend/src/Hooks/useComponentVisible.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function useComponentVisible(initialIsVisible: boolean) {
+    const [isCompVisible, setIsCompVisible] =
+        useState<boolean>(initialIsVisible);
+
+    const ref = useRef<HTMLDivElement>(null);
+    const handleClickOutsideComp = (event: Event) => {
+        if (ref.current && !ref.current.contains(event.target as Node)) {
+            setIsCompVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutsideComp, true);
+        return () => {
+            document.removeEventListener("click", handleClickOutsideComp, true);
+        };
+    });
+
+    const openComp = () => setIsCompVisible(true);
+
+    return { ref, isCompVisible, openComp };
+}

polsevev.dev.frontend/src/components/NavigationMenu.tsx

@@ -1,6 +1,7 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { NavItem, SideBarBox } from "../styles/TopBarStyle";
 import { useNavigate } from "react-router";
+import useComponentVisible from "../Hooks/useComponentVisible";
 
 const NavigationMenu: FC = () => {
     const navigate = useNavigate();
@@ -9,11 +10,12 @@ const NavigationMenu: FC = () => {
     const [isPhone, setIsPhone] = useState(
         window.matchMedia("(min-width: 720px)").matches
     );
-    const [showNavButtonsPhone, setShowNavButtonsPhone] = useState(false);
     const locationButtons = locations.map((location) => (
         <NavItem onClick={() => handleClick(location)}>{location}</NavItem>
     ));
 
+    const { ref, isCompVisible, openComp } = useComponentVisible(false);
+
     useEffect(() => {
         const recheckIsPhone = () => {
             setIsPhone(window.matchMedia("(min-width: 720px)").matches);
@@ -28,15 +30,11 @@ const NavigationMenu: FC = () => {
                 locationButtons
             ) : (
                 <>
-                    <button
-                        onClick={() =>
-                            setShowNavButtonsPhone(!showNavButtonsPhone)
-                        }
-                    >
+                    <button onClick={() => openComp()}>
                         <span className="material-symbols-outlined">menu</span>
                     </button>
-                    {showNavButtonsPhone && (
-                        <SideBarBox>{locationButtons}</SideBarBox>
+                    {isCompVisible && (
+                        <SideBarBox ref={ref}>{locationButtons}</SideBarBox>
                     )}
                 </>
             )}

polsevev.dev.frontend/src/styles/TopBarStyle.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
 export const Wrapper = styled("div")`
     position: fixed;
@@ -34,11 +34,25 @@ export const GithubLogo = styled("img")(() => ({
     padding: "5px",
 }));
 
-export const SideBarBox = styled("div")((props) => ({
-    position: "fixed",
-    top: "5em",
-    left: "calc(100% - 10em)",
-    overflow: "overlay",
-    backgroundColor: props.theme.palette.aero,
-    textAlign: "center",
-}));
+const comeFromLeft = keyframes`
+    from{
+        left: 100%;
+    }
+    to {
+        left: calc(100% - 10em);
+    }
+`;
+
+export const SideBarBox = styled("div")`
+    position: absolute;
+    top: 0;
+    animation: ${comeFromLeft} 0.2s linear;
+    left: calc(100% - 10em);
+    overflow: overlay;
+    background-color: ${(props) => props.theme.palette.aero};
+    text-align: center;
+    border-radius: 25px;
+    border: 2px solid #ffffff;
+    padding-bottom: 5px;
+    padding-top: 5px;
+`;