Merge pull request #329 from open-pv/313-delete-old-dependencies

313 delete old dependencies

package.json

@@ -20,7 +20,6 @@
     "pako": "^2.1.0",
     "proj4": "^2.12.0",
     "react": "^18.2.0",
-    "react-burger-menu": "^3.0.9",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^15.0.0",
@@ -32,7 +31,6 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
     "gh-pages": "^6.1.1",
-    "sass": "^1.77.8",
     "vite": "^5.4.6"
   },
   "browserslist": {

src/Main.jsx

@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/react"
 import PropTypes from "prop-types"
 import React from "react"
 import { Helmet, HelmetProvider } from "react-helmet-async"
@@ -10,10 +11,10 @@ const Main = (props) => (
       {props.title && <title>{props.title}</title>}
       <meta name="description" content={props.description} />
     </Helmet>
-    <div id="wrapper">
+    <Layout>
       <Navigation />
-      <div id="main">{props.children}</div>
-    </div>
+      {props.children}
+    </Layout>
   </HelmetProvider>
 )
 
@@ -35,3 +36,36 @@ Main.defaultProps = {
 }
 
 export default Main
+
+const Layout = ({ children }) => {
+  return (
+    <Box
+      as="div"
+      display="flex"
+      margin="0"
+      maxWidth="100%"
+      opacity={1}
+      padding={0}
+      width="100vw"
+      height="100vh"
+      position="fixed"
+      left={0}
+      top={0}
+      flexDirection="column"
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+        minWidth={0}
+        minHeight={0}
+        overflow="hidden"
+        flexGrow={1}
+        width="100%"
+        height="100%"
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}

src/components/Footer.jsx

@@ -6,7 +6,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
-  useDisclosure
+  useDisclosure,
 } from "@chakra-ui/react"
 import i18n from "i18next"
 import React from "react"
@@ -26,8 +26,9 @@ const WrapperForTouchDevice = ({ children }) => {
   return (
     <div className="overlay">
       <div className="attribution">
-
-        <Button variant={"link"} onClick={onOpen}>License Information</Button>
+        <Button variant={"link"} onClick={onOpen}>
+          License Information
+        </Button>
 
         <Modal isOpen={isOpen} onClose={onClose}>
           <ModalOverlay />
@@ -37,7 +38,7 @@ const WrapperForTouchDevice = ({ children }) => {
             <ModalBody>{children}</ModalBody>
           </ModalContent>
         </Modal>
-        </div>
+      </div>
     </div>
   )
 }
@@ -112,10 +113,6 @@ export default function Footer({ federalState, frontendState }) {
           Team OpenPV
         </a>
         {" | "}
-        <a href="https://html5up.net" target="_blank">
-          Website Template
-        </a>
-        {" | "}
         <a href="/Impressum">Impressum</a>
         {" | "}
         <a href="/Datenschutz">{t("Footer.privacyPolicy")}</a>

src/components/Template/Navigation.jsx

@@ -1,41 +1,37 @@
+import { Box, Heading, Tab, TabList, Tabs } from "@chakra-ui/react"
 import React from "react"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
+import { Link, useLocation } from "react-router-dom"
 
-import routes from "../../data/routes"
-import Hamburger from "./Hamburger"
-
-// Websites Navbar, displays routes defined in 'src/data/routes'
 const Navigation = () => {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
+  const location = useLocation()
 
-  return (
-    <header id="header">
-      <h1 className="index-link">
-        {routes
-          .filter((l) => l.index)
-          .map((l) => (
-            <Link key={l.label} to={l.path}>
-              {l.label}
-            </Link>
-          ))}
-      </h1>
+  const isActive = (path) => location.pathname === path
 
-      <nav className="links">
-        <ul>
-          {routes
-            .filter((l) => !l.index)
-            .map((l) => (
-              <li key={l.label}>
-                <Link to={l.path}>
-                  {l.labelKey == null ? l.label : t(l.labelKey)}
-                </Link>
-              </li>
-            ))}
-        </ul>
-      </nav>
-      <Hamburger />
-    </header>
+  return (
+    <Tabs
+      as="nav"
+      className="links"
+      index={isActive("/") ? 0 : isActive("/about") ? 1 : -1}
+    >
+      <TabList>
+        <Tab
+          key="/"
+          as={Link}
+          to="/"
+          isSelected={isActive("/")}
+          fontSize="xl"
+          fontWeight="bold"
+          p={4}
+        >
+          OpenPV
+        </Tab>
+        <Tab key="/about" as={Link} to="/about" isSelected={isActive("/about")}>
+          {t("about.title")}
+        </Tab>
+      </TabList>
+    </Tabs>
   )
 }
 

src/index.jsx

@@ -4,7 +4,7 @@ import { createRoot, hydrateRoot } from "react-dom/client"
 import { BrowserRouter, Route, Routes } from "react-router-dom"
 import "./i18n" // needs to be bundled
 import Main from "./Main" // fallback for lazy pages
-import "./static/css/main.scss" // All of our styles
+import "./static/css/main.css" // All of our styles
 
 const { PUBLIC_URL } = process.env