added a store so save the project list, also added function to add and remove items from that list

UnicadoGUI/Frontend/src/routes/+layout.svelte

 <script lang="ts">
-    import {Container, Image, Row, Styles, Col, Nav, NavItem, NavLink, Icon} from '@sveltestrap/sveltestrap';
-    import { userProjects } from '../stores/projects';
+    import {Container, Image, Row, Styles, Col, Nav, NavItem, NavLink, Icon, Modal, ModalHeader, ModalBody, ModalFooter, Button} from '@sveltestrap/sveltestrap';
+    import { removeProjectbyId, userProjects, addProject } from '../stores/projects';
     import { onMount } from 'svelte';
-  let projects : any[] = [];
 
+  let projects : any[] = [];
+  let showModal = false;
+  let projectName = '';
+let projectIdToRemove = '';
   onMount(() => {
     const unsubscribe = userProjects.subscribe(value => {
       projects = value;
@@ -11,6 +14,14 @@
     return () => unsubscribe();
   });
 
+  function openModal() {
+      showModal = true;
+    }
+
+    function closeModal() {
+      showModal = false;
+    }
+
   let openProjectIndex : any = null;
 
   function toggleSubItems(index : number) {
@@ -20,7 +31,17 @@
       openProjectIndex = index;
     }
   }
+function newProject() {
+        if (projectName.trim() !== '') {
+            addProject(projectName);
+            projectName = '';
+            showModal = false;
+        }
+    }
 
+    function deleteProject(id: number) {
+        removeProjectbyId(id);
+    }
 </script>
 
 <Container fluid>
@@ -46,7 +67,10 @@
                                 <Icon name="airplane"></Icon>
                                 <span class="ms-1 d-none d-sm-inline">{project.name}</span>
                             </NavLink>
-                        </NavItem>
+                            <Button outline on:click={() => deleteProject(project.id)}>
+                                <Icon name="trash"/> <!-- Icon zum Entfernen des Projekts -->
+                            </Button>
+                        
                         {#if openProjectIndex === index}
                             <ul class="sub-menu">
                                 <NavItem>
@@ -74,14 +98,37 @@
                                     </NavLink>
                                 </NavItem>
                                 <NavItem>
-                                    <NavLink href="/settings/{project.id}" class="align-middle px-0 text-light">
+                                    <NavLink href="/settings" class="align-middle px-0 text-light">
                                         <Icon name="gear"></Icon>
                                         <span class="ms-1 d-none d-sm-inline">Settings</span>
                                     </NavLink>
                                 </NavItem>
                             </ul>
-                        {/if}      
+                        {/if}
+                    </NavItem>      
                   {/each}
+                  <NavItem>
+                  <Button outline on:click={openModal}>
+                    <Icon name="window-plus"/>
+                </Button>
+            </NavItem>
+                {#if showModal}
+    <Modal isOpen={showModal} toggle={closeModal}>
+        <ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
+        <ModalBody>
+            <!-- Eingabefeld für neuen Projektnamen -->
+            <input
+                type="text"
+                bind:value={projectName}
+                placeholder="Enter project name..."
+            />
+        </ModalBody>
+        <ModalFooter>
+            <Button color="primary" on:click={newProject}>Add Project</Button>{' '}
+            <Button color="secondary" on:click={closeModal}>Cancel</Button>
+        </ModalFooter>
+    </Modal>
+{/if}
                 </Nav>
                 <hr>
                 <Nav class="pb-4" style="width: 100%; display: flex; justify-content: space-between">

UnicadoGUI/Frontend/src/routes/+page.svelte

 <script>
-    import {Styles} from "@sveltestrap/sveltestrap";
+    import { Button, Styles, Icon, Modal, ModalHeader, ModalBody, ModalFooter} from "@sveltestrap/sveltestrap";
+    import { addProject, removeProject } from '../stores/projects';
+    let projectName = '';
+    let projectToRemove = '';
+    let showModal = false;
+
+    function newProject() {
+        if (projectName.trim() !== '') {
+            addProject(projectName);
+            projectName = '';
+        }
+    }
+
+    function deleteProject() {
+      if (projectToRemove.trim() !== '') {
+        removeProject(projectToRemove);
+        projectToRemove = ''; // Eingabefeld leeren nach dem Hinzufügen
+      }
+    }
+
+    function openModal() {
+      showModal = true;
+    }
+
+    function closeModal() {
+      showModal = false;
+    }
+
 </script>
 <h1>Welcome to the UNICADO WebApp</h1>
+<input
+    type="text"
+    bind:value={projectName}
+    placeholder="Enter project name..."
+/>
+<Button color="dark" outline on:click={newProject}>
+    <Icon name="window-plus"/>
+    new Project
+</Button>
+<input
+    type="text"
+    bind:value={projectToRemove}
+    placeholder="Enter project name to remove..."
+/>
+<Button color="dark" outline on:click={deleteProject}>
+    <Icon name="window-plus"/>
+    Remove Project
+</Button>
+
+<Button color="dark" outline on:click={openModal}>
+    <Icon name="window-plus"/>
+    New Project
+</Button>
+
+{#if showModal}
+    <Modal isOpen={showModal} toggle={closeModal}>
+        <ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
+        <ModalBody>
+            <!-- Eingabefeld für neuen Projektnamen -->
+            <input
+                type="text"
+                bind:value={projectName}
+                placeholder="Enter project name..."
+            />
+        </ModalBody>
+        <ModalFooter>
+            <Button color="primary" on:click={newProject}>Add Project</Button>{' '}
+            <Button color="secondary" on:click={closeModal}>Cancel</Button>
+        </ModalFooter>
+    </Modal>
+{/if}
 
 <p>Create new Project....<br>Open existing Project...</p>
 

UnicadoGUI/Frontend/src/stores/projects.js

 import { writable } from 'svelte/store';
 
 //TODO project url and so
-export const userProjects = writable([
-  { id: 1, name: 'Projekt A' },
-  { id: 2, name: 'Projekt B' },
-  { id: 3, name: 'Projekt C' }
-]);
+function getStoredProjects() {
+  if (typeof window !== 'undefined') { 
+    const storedProjects = localStorage.getItem('userProjects');
+    return storedProjects ? JSON.parse(storedProjects) : [];
+  }
+  return [];
+}
+
+const initialProjects = getStoredProjects();
+
+export const userProjects = writable(initialProjects);
+
+if (typeof window !== 'undefined') {
+  userProjects.subscribe(projects => {
+    localStorage.setItem('userProjects', JSON.stringify(projects));
+  });
+}
+
+
+/**
+ * @param {string} name 
+ */
+export function addProject(name) {
+  userProjects.update(projects => {
+    const maxId = projects.reduce((/** @type {number} */ max, /** @type {{ id: number; }} */ project) => project.id > max ? project.id : max, 0);
+    const newProject = { id: maxId + 1, name };
+
+    return [...projects, newProject];
+  });
+}
+
+/**
+ * @param {string} name 
+ */
+export function removeProject(name) {
+  userProjects.update(projects => {
+    return projects.filter((/** @type {{ name: string; }} */ project) => project.name !== name);
+  });
+}
+
+/**
+ * @param {number} id 
+ */
+export function removeProjectbyId(id) {
+  userProjects.update(projects => {
+    return projects.filter((/** @type {{ id: number; }} */ project) => project.id !== id);
+  });
+}