The click way of drop down

MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx

@@ -5,6 +5,9 @@ import SignInUp from "./components/login-logout/signInup";
 import LandingPage from "./components/landing-page/homePage.jsx";
 import SignUp from "./components/login-logout/signUp.jsx";
 import LogIn from "./components/login-logout/logIn.jsx";
+import EndPoints from "./components/operations/endPoint.jsx";
+import Features from "./components/operations/features.jsx";
+import EditProfile from "./components/profile/editProfile.jsx";
 
 import "./App.css";
 
@@ -12,7 +15,15 @@ import "./App.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 const router = createBrowserRouter([
-  { path: "/", element: <LandingPage /> },
+  {
+    path: "/",
+    element: <LandingPage />,
+    children: [
+      { path: "/end-points", element: <EndPoints /> },
+      { path: "/features", element: <Features /> },
+      { path: "/edit-profile", element: <EditProfile /> },
+    ],
+  },
   {
     path: "/",
     element: <SignInUp />,
@@ -24,10 +35,20 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
-  const [count, setCount] = useState(0);
+  const [resetNave, navResetFunction] = useState(false);
+
+  const outerUpdate = () => {
+    console.log("Update");
+    navResetFunction((val) => (val = false));
+  };
 
   return (
-    <div className="containment">
+    <div
+      className="containment"
+      onClick={() => {
+        outerUpdate();
+      }}
+    >
       <RouterProvider router={router} />
       {/* <SignInUp /> */}
     </div>

MySQL_conf_pbx/test1/reactcezenpbx/src/components/Lift/reset-cont.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ResetNavFromHomeScreen = createContext();

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx

@@ -1,10 +1,13 @@
 import NavBar from "./navBar";
 import "./home-page.css";
 
+import { Outlet } from "react-router-dom";
+
 export default function LandingPage() {
   return (
     <>
       <NavBar />
+      <Outlet />
       <article className="landing_screen">
         <p>Welcome to the landing page !</p>
       </article>

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navBar.jsx

@@ -5,47 +5,85 @@ import profileLogo from "../../assets/profile-circle-svgrepo-com.svg";
 import NavBarDropDown from "./drop_down/navBarDropDown";
 
 import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 
 export default function NavBar() {
   const navTo = useNavigate();
 
+  // useState for boolean trigger... when inverted
+  // it should display the associated drop down message
+  const [operations, operationsInverter] = useState(false);
+  const [profile, profileInverter] = useState(false);
+
+  const truthInverter = () => {
+    profileInverter((prev) => (prev = false));
+    operationsInverter((prev) => (prev = !prev));
+  };
+
+  const profInverter = () => {
+    operationsInverter((prev) => (prev = false));
+    profileInverter((prev) => (prev = !prev));
+  };
+
   return (
     <nav className="navigation">
       <div>
         <CezenBanner className="cezen_banner_top" />
       </div>
       <div className="RHS_nav">
-        <div className="RHS_nav_pill">
+        <div className="RHS_nav_pill" onClick={truthInverter}>
           <img src={operationsLogo} />
           operations
         </div>
-        <div className="drop-down pos_operations">
+        {operations && (
-          <NavBarDropDown>
+          <div className="drop-down pos_operations">
-            {/* css is defined in the NavBarDropDown.css folder*/}
+            <NavBarDropDown>
-            <li>End-Points</li>
+              {/* css is defined in the NavBarDropDown.css folder*/}
-            <li>Features</li>
+              <li
-            <li>Groups</li>
+                onClick={() => {
-          </NavBarDropDown>
+                  navTo("/end-points");
-        </div>
+                }}
-        <div className="RHS_nav_pill">
+              >
+                End-Points
+              </li>
+              <li
+                onClick={() => {
+                  navTo("/features");
+                }}
+              >
+                Features
+              </li>
+              <li>Groups</li>
+            </NavBarDropDown>
+          </div>
+        )}
+        <div className="RHS_nav_pill" onClick={profInverter}>
           <img src={profileLogo} />
           profile
         </div>
-        <div className="drop-down pos_profile">
+        {profile && (
-          <NavBarDropDown>
+          <div className="drop-down pos_profile">
-            {/* css is defined in the NavBarDropDown.css folder*/}
+            <NavBarDropDown>
-            <li>Edit Profile</li>
+              {/* css is defined in the NavBarDropDown.css folder*/}
-            <li
+              <li
-              className="log-out"
+                onClick={() => {
-              onClick={() => {
+                  navTo("/edit-profile");
-                console.log("logout");
+                }}
-                navTo("/log-in");
+              >
-              }}
+                Edit Profile
-            >
+              </li>
-              Log-Out
+              <li
-            </li>
+                className="log-out"
-          </NavBarDropDown>
+                onClick={() => {
-        </div>
+                  console.log("logout");
+                  navTo("/log-in");
+                }}
+              >
+                Log-Out
+              </li>
+            </NavBarDropDown>
+          </div>
+        )}
       </div>
     </nav>
   );

MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx

@@ -0,0 +1,3 @@
+export default function EndPoints() {
+  return <div>Welcome to the End-Point page !</div>;
+}

MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/features.jsx

@@ -0,0 +1,3 @@
+export default function Features() {
+  return <div>Welcome to the Features page !</div>;
+}

MySQL_conf_pbx/test1/reactcezenpbx/src/components/profile/editProfile.jsx

@@ -0,0 +1,3 @@
+export default function EditProfile() {
+  return <div>Welcome to the Edit Profile page !</div>;
+}