-React ui tested

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

@@ -4,7 +4,7 @@
   display: flex;
   background: var(--code-bg);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  height: 30px;
+  height: 50px;
 }
 
 .navbar h1 {
@@ -24,11 +24,40 @@
 }
 
 .logo { 
-  width: 60px;
-  height: 60px;
+  width: 55px;
+  height: 55px;
   float: right;
   align-items: right;
   margin-right: 5px;
   margin-left: 5px;
-  margin-top: -15px;
+  margin-top: -5px;
+}
+
+.sidebar {
+  padding: 16px;
+  color: gray;
+  background: var(--code-bg);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  height: 100%;
+  width: 200px;
+}
+
+.sidebar h1 {
+  font-size: 16px;
+  letter-spacing: -1.68px;
+  margin: 4px 10px 0 0;
+  @media (max-width: 1024px) {
+    font-size: 14px;
+    margin: 20px 0;
+  }
+}
+
+.sidebar h2 {
+  font-size: 14px;
+  letter-spacing: -1px;
+  margin: 8px 16px 0 0;
+  @media (max-width: 1024px) {
+    font-size: 14px;
+    margin: 20px 0;
+  }
 }

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

@@ -1,13 +1,14 @@
 import { useState } from 'react'
 import './App.css'
 import NavBar from './components/NavBar.jsx'
+import LangSideBar from './components/LangSideBar.jsx'
 
 const App = () => {
   return (
     <div className="App">
       <div><NavBar /></div>
       <div className="content">
-        <div className="sidebar"></div>
+        <div><LangSideBar /></div>
         <div className="main"></div>
       </div>
     </div>

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

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { useState } from 'react'
+import Language from './Language';
+
+const LangSideBar = () => {
+  return (
+    <nav className="sidebar">
+        <div>
+            <h1>Available Languages:</h1>
+        </div>
+        <div className="side-links">
+            <Language languageid={1}/>
+            <Language languageid={2}/>
+            <Language languageid={3}/>
+        </div>
+    </nav>
+    );
+};
+
+export default LangSideBar;  

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

@@ -1,12 +1,11 @@
-import UseFetch from './tools/UseFetch';
-
-function Language ({ languageid }) {
+import { useState } from 'react'
+//import UseFetch from './tools/UseFetch';
 
+const Language = ({ languageid }) => {
 
     return (
-        <div>
-            <h2>Language Komponent</h2>
-
+        <div className="treeElement">
+            <h2>Language ${languageid}</h2>
         </div>
     );
 }   

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import scpqLogo from '../assets/SimplyCPQ_logo.svg';
+import scpqLogo from '../assets/SimplyCPQ_Logo.svg';
 
 const NavBar = () => {
   return (

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

@@ -50,8 +50,9 @@
   }
 }
 
-body {
+html, body {
   margin: 0;
+  height: 100%;
 }
 
 #root {

buildtime/client/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "client",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}