SearchComponent has been updated now displaying varieties of options depending on initial choice

frontend/src/Components/Navbar/Navbar.js

 import React from 'react';
 import '../../Css/Navbar.css'
 
-function TopNavBar() {
+function TopNavBar({toggleDisplay, displayMap}) {
   return (
     <div className="top-nav">
     
        <button className='sign_out_button'>Sign Out</button>
+    
+          {/* Toggle button to switch between Map and Visualiser */}
+          <button className='sign_out_button' onClick={toggleDisplay}>
+            {displayMap ? 'Switch to Visualiser' : 'Switch to Map'}
+          </button>
+
       <h1 className='h1'>DASHBOARD</h1>
     </div>
   );

frontend/src/Css/Navbar.css

@@ -6,9 +6,14 @@
     border-style: solid;
     box-shadow: 0 0 10px rgba(0, 0, 0, .2);   
 }
+.sign_out_button{
+    margin: 5px;
+    height: 50px;
+
+}
 .h1{
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: auto;
-    margin-bottom: auto;
+    top: 4%;
+    left: 40%;
+    right: 50%;
+    position:absolute;
 }
\ No newline at end of file

frontend/src/Css/Visualiser.css

@@ -12,6 +12,6 @@
 
 }
 
-.h1{
+.h2{
 text-align: center;
 }
\ No newline at end of file

frontend/src/Pages/Dashboard/Dashboard.jsx

-import '../../Css/Dashboard.css'
-import React, { useState } from 'react'
+import '../../Css/Dashboard.css';
+import React, { useState } from 'react';
 import TopNavBar from '../../Components/Navbar/Navbar';
 import Map from './Map';
 import Visualiser from './Visualiser';
 import { SearchComponent } from '../../Components/Search/SearchComponent';
 
-
 export const Dashboard = () => {
   const [data, setData] = useState({ label: "", id: "" });
   const [region, setRegion] = useState({});
-
-
+  const [displayMap, setDisplayMap] = useState(true); // State variable to track the currently displayed component
 
   const handlerFunction = (Region_data) => {
-    setData(Region_data)
-  }
+    setData(Region_data);
+  };
+
   const changeRegion = (regionName) => {
     // Update the region state to trigger re-render and change the color of the specified region's path
     setRegion(regionName);
     handlerFunction(data);
+  };
 
-
+  const toggleDisplay = () => {
+    setDisplayMap(!displayMap); // Toggle the displayMap state
   };
+
   return (
     <div className='dashboard'>
-      <TopNavBar />
+      <TopNavBar toggleDisplay = {toggleDisplay} displayMap = {displayMap} />
+     
       <div className='container'>
 
-
-
+    
         <div className='search_container'>
           <SearchComponent data={data.label} changeRegion={changeRegion} />
-
         </div>
         <div className='map_container' id="d3_map">
-          <Map handlerFunction={handlerFunction} selectedRegion={region} />
-        </div>
-        <div className='table_container'>
-          <Visualiser Regiondata={data} />
-        </div>
+              <Map handlerFunction={handlerFunction} selectedRegion={region} />
+            </div>
+            <div className='table_container'>
+              <Visualiser Regiondata={data} />
+            </div>
+        
       </div>
     </div>
-  )
-}
+  );
+};
+
+
+/*
+<div className='content_container'>
+          {/* Conditional rendering based on the displayMap state */
+        /*
+        }
+          {displayMap ? (
+            <div className='map_container' id="d3_map">
+              <Map handlerFunction={handlerFunction} selectedRegion={region} />
+            </div>
+          ) : (
+            <div className='table_container'>
+              <Visualiser Regiondata={data} />
+            </div>
+          )}
+        </div>
 
+*/
\ No newline at end of file

frontend/src/Pages/Dashboard/Visualiser.jsx

@@ -9,9 +9,9 @@ const Visualiser = ({Regiondata}) => {
 
   return (
     <div >
-    <h1 className='h1'>
+    <h2 >
         Visualiser
-    </h1>
+    </h2>
     <h2> LÄN: 
     {Regiondata.label}