conditional display of Home/Burger/Close button, or NavIcon component

Author: Nika Kolesnikova

frontend/frontside/src/components/NavBar&Footer/NavBar.css

@@ -55,22 +55,6 @@
         display: none;
     }
 
-    .close-icon {
-        font-size: 6rem;
-        align-self: flex-end;
-        position: absolute;
-        right: 5%;
-        top: 5%;
-
-    }
-
-    .burger-icon {
-        z-index: 3;
-        display: none;
-        font-size: unset;
-        transition: all smooth;
-    }
-
 
     nav {
         position: relative;
@@ -117,23 +101,6 @@
         display: flex;
     }
 
-    .close-icon {
-        font-size: 6rem;
-        align-self: flex-end;
-        position: absolute;
-        right: 10%;
-        top: 50%;
-
-    }
-
-    .burger-icon {
-        z-index: 3;
-        display: flex;
-        font-size: 2.5rem;
-        transition: all smooth;
-    }
-
-
         nav {
         position: relative;
         background: linear-gradient(146deg, rgba(255,255,255,0) 0%, rgba(51,51,51,0.25) 51%, rgba(239,244,255,0) 100%);
@@ -181,23 +148,6 @@
         display: flex;
     }
 
-    .close-icon {
-        font-size: 6rem;
-        align-self: flex-end;
-        position: absolute;
-        right: 5%;
-        top: 5%;
-
-    }
-
-    .burger-icon {
-        z-index: 3;
-        display: flex;
-        font-size: 2rem;
-        transition: all smooth;
-    }
-
-
     nav {
         position: relative;
     background: linear-gradient(146deg, rgba(255,255,255,0) 0%, rgba(51,51,51,0.25) 51%, rgba(239,244,255,0) 100%);

frontend/frontside/src/components/NavIcon/NavIcon.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { IoMenu, IoCloseOutline, IoCaretBackCircle } from "react-icons/io5";
+import { useLocation } from 'react-router-dom';
 import './NavIconStyle.css';
 
 const NavIcon = ({type, isVisible, handleBurgerIconClick}) => {
 
+    // check current path
+    const location = useLocation();
+
     // on click of to top button
     const handleClick = () => {
         //scroll to top
@@ -40,7 +44,23 @@ const NavIcon = ({type, isVisible, handleBurgerIconClick}) => {
         )
     }
 
-  return  type === 'burger' ? burgerIcon() : toTopIcon();
+    // 
+    const getIcon = () => {
+        // list of paths where no footer icon is needed
+        const noHomeIconPaths = ['/log-in', '/sign-up', 'profile'];
+
+        // if burger icon is specified
+        if(type) {
+            // display burger icon
+            return burgerIcon();
+        } else {
+            // if burger icon isnt specified, check path, display Home button accordingly
+            return noHomeIconPaths.includes(location.pathname) ? null : toTopIcon();
+        }
+     } 
+
+    // main function ----------------------------
+  return getIcon();
 }
 
 export default NavIcon;