modified intro display; mostly CSS changes

Author: JS-GitRepo

src/components/HomeViewHeader.tsx

@@ -16,11 +16,14 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => {
   const [isIntro, setIsIntro] = useState<boolean>(false);
 
   useEffect(() => {
+    console.log(allParams[1]);
+
     if (allParams[1] === "introduction") {
       setIsIntro(true);
     } else {
       setIsIntro(false);
     }
+    console.log(isIntro);
   }, [allParams]);
 
   // Some elements in the return will be hidden by media query CSS, to allow UI elements in the header or footer depending on mobile / Desktop. This is why there are some "redundant" elements
@@ -85,8 +88,7 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => {
           </ul>
         </div>
       </div>
-
-      <div className='nav-category-ctr'>
+      <div className={isIntro ? "hidden" : "nav-category-ctr"}>
         <ul>
           <li>
             <NavLink

src/components/styles/HomeViewFooter.css

@@ -15,6 +15,7 @@
   position: absolute;
   bottom: 5%;
   width: 65vw;
+  min-width: 225px;
   max-width: 350px;
   height: 110px;
   border-radius: 20px;

src/components/styles/HomeViewHeader.css

@@ -54,12 +54,17 @@
   align-items: center;
   list-style: none;
   padding: 0px;
+  width: 181px;
 }
 
 .HomeViewHeader .nav-category-ctr ul li {
   margin: 0px 10px;
 }
 
+.HomeViewHeader .hidden {
+  display: none;
+}
+
 /* - - - MEDIA QUERIES - - -*/
 @media only screen and (min-width: 768px) {
   .HomeViewHeader {
@@ -105,4 +110,10 @@
     margin: 0px 10px;
     height: 30px;
   }
+
+  .HomeViewHeader .hidden {
+    display: flex;
+    visibility: hidden;
+    width: 181px;
+  }
 }