added icon for select project

src/components/Layout/Header.jsx

@@ -5,25 +5,20 @@ import { useDispatch, useSelector } from "react-redux";
 import { changeMaster, setProjectId } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useProfile } from "../../hooks/useProfile";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import { useChangePassword } from "../Context/ChangePasswordContext";
 import { useProjects } from "../../hooks/useProjects";
-import {useEffect, useState} from "react";
-
+import { useEffect, useState } from "react";
 
 const Header = () => {
-  const {profile} = useProfile();
-  //  const { projects, loading: projectLoading } = useProjects();
-  // const selectedProject = useSelector(
-  //   (store) => store.localVariables.projectId
-  // );
-  // const [selectedProjectId, setSelectedProjectId] = useState("all");
+  const { profile } = useProfile();
+  const location = useLocation();
+  const [isGlobalSelectVisible, setIsGlobalSelectVisible] = useState(true);
   const dispatch = useDispatch(changeMaster("Job Role"));
   const { data, loading } = useMaster();
   const navigate = useNavigate();
 
-
   const getRole = (roles, joRoleId) => {
     if (!Array.isArray(roles)) return "User";
     let role = roles.find((role) => role.id === joRoleId);
@@ -74,27 +69,30 @@ const Header = () => {
     (store) => store.localVariables.projectId
   );
 
-const selectedProjectName = projects?.find(
-  (p) => p?.id === selectedProject
-)?.name;
+  const selectedProjectName = projects?.find(
+    (p) => p?.id === selectedProject
+  )?.name;
 
-let displayText = "";
-if (selectedProjectName) {
-  displayText = selectedProjectName;
-} else if (projectLoading && selectedProject) {
-  displayText = selectedProject; 
-} else if (projectLoading) {
-  displayText = "Loading...";
-}
+  let displayText = "";
+  if (selectedProjectName) {
+    displayText = selectedProjectName;
+  } else if (projectLoading && selectedProject) {
+    displayText = selectedProject;
+  } else if (projectLoading) {
+    displayText = "Loading...";
+  }
 
   const { openChangePassword } = useChangePassword();
-  useEffect( () =>
-  {
-    if ( projects && selectedProject !== ' ')
-    {
-      dispatch(setProjectId(projects[0]?.id))
+  useEffect(() => {
+    if (projects && selectedProject !== " ") {
+      dispatch(setProjectId(projects[0]?.id));
     }
-},[projects])
+    setIsGlobalSelectVisible(
+      location.pathname !== `/projects/${selectedProject}`
+    );
+  }, [projects, selectedProject]);
+
+  console.log(isGlobalSelectVisible);
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -113,40 +111,18 @@ if (selectedProjectName) {
         id="navbar-collapse"
       >
         <div className=" align-items-center">
-          {/* 
-               <li className="nav-item ">
-                    <label>
-                              <select
-                                name="DataTables_Table_0_length"
-                                aria-controls="DataTables_Table_0"
-                                className="form-select form-select-sm"
-                                value={selectedProject}
-                                onChange={(e) => dispatch(setProjectId(e.target.value))}
-                                aria-label=""
-                              >
-                                {!projectLoading &&
-                                  projects?.map((project) => (
-                                      <option value={project.id} key={project.id}>
-                                        {project.name}
-                                      </option>
-                                    ))}
-                                {projectLoading && (
-                                  <option value="Loading..." disabled>
-                                    Loading...
-                                  </option>
-                                )}
-                              </select>
-                            </label>
-          </li> */}
-
+          <i
+            className="rounded-circle bx bx-building-house"
+            style={{ fontSize: "xx-large" }}
+          ></i>
           <div className="btn-group">
             <button
-              className="btn btn-sm-sm btn-xl dropdown-toggle"
+              className="btn btn-sm-sm btn-xl dropdown-toggle px-1"
               type="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-               {displayText}
+              {displayText}
             </button>
 
             <ul className="dropdown-menu">
@@ -162,6 +138,7 @@ if (selectedProjectName) {
               ))}
             </ul>
           </div>
+
           {/* <div className="nav-item navbar-search-wrapper mb-0">
             <a className="nav-item nav-link search-toggler px-0" href="#">
               <span