Umstrukturierung App auf Routing

buildtime/client/logical-editor/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.2.7",
-        "react-dom": "^19.2.7"
+        "react-dom": "^19.2.7",
+        "react-router": "^8.3.0"
       },
       "devDependencies": {
         "@types/react": "^19.2.17",
@@ -768,6 +769,12 @@
         }
       }
     },
+    "node_modules/cookie-es": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz",
+      "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1229,6 +1236,27 @@
         "react": "^19.2.8"
       }
     },
+    "node_modules/react-router": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.3.0.tgz",
+      "integrity": "sha512-qyPMvW83jGIct3yiieisxdk9M745anqhpIMKN5m1t6yBMfgVPpt77aHOqs5fUlEJRMCGffg9BaQLH9oPVOL7xQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie-es": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=22.22.0"
+      },
+      "peerDependencies": {
+        "react": ">=19.2.7",
+        "react-dom": ">=19.2.7"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz",

buildtime/client/logical-editor/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react-dom": "^19.2.7",
+    "react-router": "^8.3.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",

buildtime/client/logical-editor/src/App.css

@@ -17,10 +17,20 @@
   }
 }
 
-.nav-links {
+.nav-links{
   display: flex;
   align-items: center;
   margin-left: auto;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.nav-links a {
+  color: gray;
+  text-decoration: none;
+  margin-left: 16px;
+  font-size: 14px;
+  letter-spacing: -1px;
 }
 
 .logo { 
@@ -34,11 +44,13 @@
 }
 
 .sidebar {
+  display: flex;
+  flex-flow: column;
+  height: 70vh;
   padding: 16px;
   color: gray;
   background: var(--code-bg);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  height: 100%;
   width: 200px;
 }
 
@@ -66,6 +78,22 @@
 
 .treeElement h2 {
   font-size: 14px;
+  color: gray;
   letter-spacing: -1px;
   margin: 4px 16px 0 0;
+}
+
+.spacer {
+  display: flex;
+  flex-flow: column;
+  height: 1vh;
+}
+
+footer {
+  padding: 16px;
+  color: gray;
+  display: flex;
+  background: var(--code-bg);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  height: 20px;
 }

buildtime/client/logical-editor/src/App.jsx

@@ -1,18 +1,27 @@
-import { useState } from 'react'
+// Main App
-import './App.css'
-import NavBar from './components/NavBar.jsx'
-import LangSideBar from './components/LangSideBar.jsx'
 
-const App = () => {
+import { createBrowserRouter, RouterProvider } from 'react-router'
-  return (
+import Layout from './Layout.jsx'
-    <div className="App">
+import HomePage from './pages/HomePage.jsx'
-      <div><NavBar /></div>
+import LanguagePage from './pages/LanguagePage.jsx'
-      <div className="content">
+import NotFoundPage from './pages/NotFoundPage.jsx'
-        <div><LangSideBar /></div>
+
-        <div className="main"></div>
+import './App.css'
-      </div>
+
-    </div>
+const router = createBrowserRouter([
-  )
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: 'language', element: <LanguagePage /> },
+      { path: '*', element: <NotFoundPage /> },
+    ],
+  },
+])
+
+function App() {
+  return <RouterProvider router={router} />
 }
 
 export default App

buildtime/client/logical-editor/src/Layout.jsx

@@ -0,0 +1,19 @@
+// Layouting Main Application
+
+import { Outlet, Link } from 'react-router'
+import NavBar from './components/NavBar.jsx'
+
+
+function Layout() {
+  return (
+    <div>
+      <NavBar />
+      <main>
+        <Outlet />
+      </main>
+      <footer>My App, 2026</footer>
+    </div>
+  )
+}
+
+export default Layout

buildtime/client/logical-editor/src/components/LangSideBar.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { useState } from 'react'
-import Language from './Language';
+import LanguageElement from './LanguageElement';
 
 const LangSideBar = () => {
   return (
@@ -9,10 +9,11 @@ const LangSideBar = () => {
             <h1>Available Languages:</h1>
         </div>
         <div className="side-links">
-            <Language languageid={1}/>
+            <LanguageElement languageid={1}/>
-            <Language languageid={2}/>
+            <LanguageElement languageid={2}/>
-            <Language languageid={3}/>
+            <LanguageElement languageid={3}/>
         </div>
+        <div className="spacer">...</div>
     </nav>
     );
 };

buildtime/client/logical-editor/src/components/LanguageElement.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import UseFetch from './tools/UseFetch';
 
-const Language = ({ languageid }) => {
+const LanguageElement = ({ languageid }) => {
     const { data: lang, isLoading, error } = UseFetch(`http://localhost:8088/language/${languageid}`)  
     
     if (isLoading) return <p>Loading profile...</p>  
@@ -15,4 +15,4 @@ const Language = ({ languageid }) => {
     );
 }   
 
-export default Language;
+export default LanguageElement;

buildtime/client/logical-editor/src/components/NavBar.jsx

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Link } from 'react-router';
 import scpqLogo from '../assets/SimplyCPQ_Logo.svg';
 
 const NavBar = () => {
@@ -8,9 +9,8 @@ const NavBar = () => {
             <h1>Logical Editor</h1><p>v.0.1</p>
         </div>
         <div className="nav-links">
-            <a href="#">Home</a>
+            <Link to="/">Home</Link>
-            <a href="#">About</a>
+            <Link to="/language">Language</Link>
-            <a href="#">Contact</a>
         </div>
         <div className="logo-container">
             <img src={scpqLogo} className="logo" alt="Simply CPQ" />

buildtime/client/logical-editor/src/pages/HomePage.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>Welcome to the Home Page</h1>
+      <p>This is the main landing page of the application.</p>
+    </div>
+  );
+};
+
+export default HomePage;

buildtime/client/logical-editor/src/pages/LanguagePage.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import LangSideBar from '../components/LangSideBar';    
+
+const LanguagePage = () => {
+  return (
+    <div className="content">
+      <div><LangSideBar /></div>
+      <div className="main"></div>
+    </div>
+  );
+};
+    
+export default LanguagePage;    
+

buildtime/client/logical-editor/src/pages/NotFoundPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const NotFoundPage = () => {
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <p>The page you are looking for does not exist.</p>
+    </div>
+  );
+};
+
+export default NotFoundPage;    
+