App.tsx

import "./App.css";
import "../contents/example.css"
import "./App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, Routes } from "react-router-dom";
import { Footer } from "../components/Footer.tsx";
import { NotFound } from "../components/NotFound.tsx";
import { Navbar } from "../components/Navbar.tsx";
import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts";
import { useEffect} from "react";
import { Villbuttonrow } from "../components/Buttons.tsx";
/* import Sidebar from "../components/Sidebar.tsx"; */
import "../utils/highlight.js";
import "../../pubpub/mapscript.js"

const App = () => {
  const pathMapping = getPathMapping();
  const currentPath =
    location.pathname
      .split(`${stringToSlug(import.meta.env.VITE_TEAM_NAME)}`)
      .pop() || "/";

  // Set Page Title
  const title =
    currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";

  useEffect(() => {
    document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
  }, [title]);

  
  return (
    <>
      {/* Navigation */}
      <Navbar/>

      {/* Header and PageContent */}
      <Routes>
        {Object.entries(pathMapping).map(
          ([path, {component: Component, header: Head}]) => (
            <Route
              key={path}
              path={path}
              element={
                <>
                  <Head/>
                  {/* <Header title={title || ""} lead={lead || ""}/> */}
                  {/* Page content */}
                  <div className="container-fluid">
                    <div className="row bg-b">
                      <div className="col-1 d-none d-lg-block" >
                        {/* <!-- empty so far --> */}
                      </div>
                      {/* <div className="col-2 d-none d-lg-block"> 
                        <div className="sticky-top sidebar">
                           <Sidebar nums={navlist || [""]}></Sidebar>
                        </div>
                      </div> */}
                      <div className="col">
                        <Component />
                        <Villbuttonrow/>
                      </div>
                      <div className="col-1 d-none d-lg-block" >
                        {/* <!-- empty so far --> */}
                        
                      </div>
                    </div>
                  </div>

                  {/* End page content */}
                  

                </>
              }
            />
          ),
        )}
        <Route
          path="*"
          element={
            <>
              
              <NotFound />
            </>
          }
        />
      </Routes>

      {/* Footer */}
      {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
      <Footer />
    </>
  );
};

export default App;