Topbar erweitert

public/js/datetime.js

@@ -0,0 +1,28 @@
+function updateDateTime() {
+  const el = document.getElementById("datetime");
+  if (!el) return;
+
+  const now = new Date();
+
+  const weekdays = [
+    "Sonntag",
+    "Montag",
+    "Dienstag",
+    "Mittwoch",
+    "Donnerstag",
+    "Freitag",
+    "Samstag",
+  ];
+
+  const dayName = weekdays[now.getDay()];
+  const day = String(now.getDate()).padStart(2, "0");
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const year = now.getFullYear();
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+
+  el.textContent = `${dayName} ${day}.${month}.${year} ${hours}:${minutes}`;
+}
+
+updateDateTime();
+setInterval(updateDateTime, 1000);

views/dashboard.ejs

@@ -7,6 +7,7 @@
 
     <link rel="stylesheet" href="/css/bootstrap.min.css" />
     <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css" />
+     <script src="/js/datetime.js"></script>
 
     <style>
       body {
@@ -73,14 +74,45 @@
       }
 
       .topbar {
+        background: #111827;   /* schwarz wie sidebar */
+        color: white;
+
+        margin: -24px -24px 24px -24px; /* zieht die Topbar bis an den Rand */
+        padding: 16px 24px;
+
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 25px;
+
+        border-bottom: 1px solid rgba(255,255,255,0.08);
       }
 
       .topbar h3 {
         margin: 0;
+        color: white;
+      }
+
+      .topbar-left{
+        display:flex;
+        align-items:center;
+        gap:18px; /* Abstand zwischen Name und Datum */
+      }
+
+      .topbar-left{
+        display:flex;
+        align-items:baseline; /* ✅ Datum sitzt etwas tiefer / schöner */
+        gap:18px;
+      }
+
+      .topbar-left h3{
+        margin:0;
+        font-size:30px; /* Willkommen größer */
+      }
+
+      .topbar-datetime{
+        font-size:30px;   /* ✅ kleiner als Willkommen */
+        opacity:0.85;
+        white-space:nowrap;
       }
 
       .main {
@@ -163,8 +195,14 @@
       <!-- MAIN CONTENT -->
       <div class="main">
         <div class="topbar">
-          <h3>Willkommen, <%= user.username %></h3>
+        <div class="topbar-left">
+          <h3>Willkommen, <%= user.username %> || </h3>
+
+          <span id="datetime" class="topbar-datetime">
+            <!-- wird per JS gefüllt -->
+          </span>
         </div>
+      </div>
 
         <!-- Flash Messages -->
         <%- include("partials/flash") %>

views/partials/sidebar.ejs

@@ -1,13 +1,15 @@
 <div class="sidebar">
 
   <!-- ✅ Logo + Sprachbuttons -->
-  <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;">
+  <div style="margin-bottom:30px; display:flex; flex-direction:column; gap:10px;">
+
+    <!-- ✅ Zeile 1: Logo -->
     <div class="logo" style="margin:0;">
       🩺 Praxis System
     </div>
 
-    <!-- ✅ Sprache oben rechts -->
+    <!-- ✅ Zeile 2: Sprache (DE ES darunter) -->
-    <div style="display:flex; gap:6px;">
+    <div style="display:flex; gap:8px;">
       <a
         href="/lang/de"
         class="btn btn-sm btn-outline-light <%= lang === 'de' ? 'active' : '' %>"
@@ -26,8 +28,10 @@
         ES
       </a>
     </div>
+
   </div>
 
+
   <%
     const role = user?.role || null;