Removed Navigation in user upload page

docker/dev/docker-compose.yml

@@ -44,6 +44,18 @@ services:
       - dev-internal
     command: [ "npm", "run", "server" ]
 
+  sqliteweb:
+    image: tomdesinto/sqliteweb
+    ports:
+      - "8080:8080"
+    volumes:
+      - ../../backend/src/data:/usr/src/app/src/data:ro   # identischer Host-Pfad wie im Backend
+    command: /usr/src/app/src/data/db/image_uploader.db
+    networks:
+      - dev-internal
+    depends_on:
+      - backend-dev
+
 networks:
   dev-internal:
     driver: bridge

frontend/src/App.js

@@ -17,14 +17,14 @@ function App() {
     <AdminSessionProvider>
       <Router>
         <Routes>
-        <Route path="/" exact element={<MultiUploadPage />} />
+          <Route path="/" exact element={<MultiUploadPage />} />
-        <Route path="/slideshow" element={<SlideshowPage />} />
+          <Route path="/slideshow" element={<SlideshowPage />} />
-  <Route path="/groups/:groupId" element={<PublicGroupImagesPage />} />
+          <Route path="/groups/:groupId" element={<PublicGroupImagesPage />} />
-  <Route path="/groups" element={<GroupsOverviewPage />} />
+          <Route path="/groups" element={<GroupsOverviewPage />} />
-    <Route path="/moderation" exact element={<ModerationGroupsPage />} />
+          <Route path="/moderation" exact element={<ModerationGroupsPage />} />
-    <Route path="/moderation/groups/:groupId" element={<ModerationGroupImagesPage />} />
+          <Route path="/moderation/groups/:groupId" element={<ModerationGroupImagesPage />} />
-        <Route path="/manage/:token" element={<ManagementPortalPage />} />
+          <Route path="/manage/:token" element={<ManagementPortalPage />} />
-        <Route path="*" element={<FZF />} />
+          <Route path="*" element={<FZF />} />
         </Routes>
       </Router>
     </AdminSessionProvider>

frontend/src/Components/ComponentUtils/Headers/Navbar.js

@@ -16,7 +16,6 @@ function Navbar() {
             <nav>
                 <ul className="nav__links">
                     <li><NavLink to="/groups" activeClassName="active">Groups</NavLink></li>
-                    <li><NavLink to="/slideshow" activeClassName="active">Slideshow</NavLink></li>
                     <li><NavLink to="/moderation" activeClassName="active"><LockIcon style={{ fontSize: 18, verticalAlign: 'text-bottom', marginRight: 6 }} aria-hidden="true" />Moderation</NavLink></li>
                     <li><NavLink className="cta" exact to="/" activeClassName="active">Upload</NavLink></li>
                     {isManagementPage && (

frontend/src/Components/ComponentUtils/Headers/NavbarUpload.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
+
+import '../Css/Navbar.css'
+
+import logo from '../../../Images/logo.png'
+import { Lock as LockIcon } from '@mui/icons-material';
+
+function Navbar() {
+    const location = useLocation();
+    const isManagementPage = location.pathname.startsWith('/manage/');
+    
+    return (
+        <header>
+            <div className="logo"><NavLink className="logo" exact to="/"><img src={logo} className="imageNav" alt="Logo"/><p className="logo">Upload your Project Images</p></NavLink></div>
+            <nav>
+                <ul className="nav__links">
+                    <li><a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer">About</a></li>
+                </ul>
+            </nav>
+        </header>
+    )
+}
+
+export default Navbar

frontend/src/Components/Pages/ManagementPortalPage.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Container, Card, CardContent, Typography, Box, Button } from '@mui/material';
 import Swal from 'sweetalert2';
-import Navbar from '../ComponentUtils/Headers/Navbar';
+import NavbarUpload from '../ComponentUtils/Headers/NavbarUpload';
 import Footer from '../ComponentUtils/Footer';
 import Loading from '../ComponentUtils/LoadingAnimation/Loading';
 import ImageGalleryCard from '../ComponentUtils/ImageGalleryCard';
@@ -178,7 +178,7 @@ function ManagementPortalPage() {
   if (loading) {
     return (
       <div className="allContainer">
-        <Navbar />
+        <NavbarUpload />
         <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
           <Loading />
         </Container>
@@ -190,7 +190,7 @@ function ManagementPortalPage() {
   if (error) {
     return (
       <div className="allContainer">
-        <Navbar />
+        <NavbarUpload />
         <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
           <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', textAlign: 'center' }}>
             <Typography variant="h5" color="error" gutterBottom>
@@ -211,7 +211,7 @@ function ManagementPortalPage() {
 
   return (
     <div className="allContainer">
-      <Navbar />
+      <NavbarUpload />
 
       <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
         <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', mb: '20px' }}>

frontend/src/Components/Pages/MultiUploadPage.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Card, CardContent, Typography, Container, Box } from '@mui/material';
 
 // Components
-import Navbar from '../ComponentUtils/Headers/Navbar';
+import NavbarUpload from '../ComponentUtils/Headers/NavbarUpload';
 import Footer from '../ComponentUtils/Footer';
 import MultiImageDropzone from '../ComponentUtils/MultiUpload/MultiImageDropzone';
 import ImageGallery from '../ComponentUtils/ImageGallery';
@@ -161,7 +161,7 @@ function MultiUploadPage() {
 
   return (
     <div className="allContainer">
-      <Navbar />
+      {<NavbarUpload />}
 
       <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
         <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', mb: '20px' }}>