feat: SRS-794 : Refactor side nav bar to maintain the space when user hover

cats-frontend/src/App.css

@@ -43,7 +43,7 @@
 }
 
 * {
-  font-family: "BCSans" !important;
+  font-family: "Noto Sans" !important;
 }
 
 @media screen and (max-width: 768px) {
@@ -52,6 +52,66 @@
   }
 }
 
+
+/* Ensure the parent container takes up the full height of the screen */
+.container {
+  display: flex;
+  width: 100%;
+  height: 100vh; /* Make sure the container takes full viewport height */
+  max-width: none; /* Remove any max-width constraints */
+  padding: 0;    /* Remove padding */
+  margin: 0;     /* Remove margin */
+}
+
+/* Sidebar styles */
+.sidebar-container {
+  width: 128px; /* Initial width */
+  transition: width 0.3s ease; /* Smooth transition for width */
+  height: 100%; /* Ensure full height of the sidebar */
+  cursor: pointer;
+  background: var(--side-bar-background-color);
+  box-shadow: var(--side-bar-shadow);
+  border-right: 1px solid var(--surface-border-light, #d8d8d8);
+  /* min-width: 84px; */
+  max-width: 240px;
+}
+
+.sidebar-container.expanded {
+  width: 240px; /* Expanded width on hover/click */
+}
+
+/* Main content styles */
+.main-content-container {
+  flex-grow: 1;
+  transition: margin-left 0.3s ease; /* Smooth transition for margin */
+  height: 100%; /* Ensure full height of the main content */
+}
+
+/* Ensure the layout is responsive */
+@media (max-width: 768px) {
+  .sidebar-container {
+    width: 80px; /* Smaller sidebar on mobile */
+  }
+
+  .sidebar-container.expanded {
+    width: 160px; /* Expanded sidebar on mobile */
+  }
+
+  .main-content-container {
+    margin-left: 0;
+  }
+
+  .main-content-container.shifted {
+    margin-left: 160px; /* Adjust shift for mobile */
+  }
+}
+
+@media (max-width: 1024px) {
+  .sidebar-container.expanded {
+    width: 240px;
+  }
+}
+
 :root {
   --layout-margin-xsmall: 4px;
   --layout-margin-small: 8px;
@@ -117,3 +177,5 @@
   --map-button-font-size-large: 18px;
   --map-button-font-size-medium: 16px;
 }
+
+

cats-frontend/src/App.tsx

@@ -1,31 +1,37 @@
 import "./App.css";
 import Header from "./app/components/navigation/Header";
 import { Outlet } from "react-router-dom";
-import "@bcgov/bc-sans/css/BCSans.css";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import SideBar from "./app/components/navigation/SideBar";
-import "@bcgov/bc-sans/css/BCSans.css";
+import '@bcgov/bc-sans/css/BC_Sans.css'
+import { useState } from "react";
 
 function App() {
-  // const routes:RouteObject[] = [
+  const [isSidebarExpanded, setIsSidebarExpanded] = useState(false);
+
+  // Handle mouse enter and leave to control sidebar expansion
+  const handleMouseEnter = () => setIsSidebarExpanded(true);
+  const handleMouseLeave = () => setIsSidebarExpanded(false);
+
+
+
+  // Toggle sidebar expand/collapse on hover or click
+  const handleSidebarToggle = () => {
+    setIsSidebarExpanded((prevState) => !prevState);
+  };
 
-  // ];
-  // const bBrowser = createBrowserRouter(routes)
   return (
     <div className="container-fluid p-0">
       <Header />
-      <div className="row m-0 p-0">
-        <div className="col-md-1 p-0 display-from-medium">
-          <SideBar />
+      <div className="container m-0 p-0">
+        <div className={`sidebar-container display-from-medium ${isSidebarExpanded ? "expanded" : ""}`} onMouseEnter={handleSidebarToggle} onMouseLeave={handleSidebarToggle}>
+            <SideBar />
         </div>
-        <div className="col-md-11  p-0">
-          {/* */}
+        <div className={`p-0 main-content-container ${isSidebarExpanded ? "shifted" : ""}`}>
           <Outlet />
         </div>
       </div>
-      {/* <Footer/>  */}
-
       <ToastContainer />
     </div>
   );

cats-frontend/src/app/components/navigation/SideBar.css

@@ -11,23 +11,10 @@
 .side-bar {
   display: flex;
   flex-direction: column;
-  background: var(--side-bar-background-color);
-  box-shadow: var(--side-bar-shadow);
-  top: 65px;
   padding: var(--layout-padding-large) var(--layout-padding-large)
     var(--layout-padding-large) var(--layout-padding-large);
   justify-content: space-between;
   min-height: calc(100vh - 65px) !important;
-  border-right: 1px solid var(--surface-border-light, #d8d8d8);
-  min-width: 84px;
-  z-index: 9999;
-  max-width: 128px;
-}
-
-.side-bar:hover {
-  width: 240px;
-  position: sticky;
-  max-width: 240px;
 }
 
 .side-bar:hover .sideBar-Nav {