Initial commit

2026-05-20 18:25:15 +02:00
commit 95f0b4ff01
288 changed files with 90909 additions and 0 deletions
--- a/resources/css/layout/menu.css
+++ b/resources/css/layout/menu.css
@@ -0,0 +1,128 @@
+#menu {
+    width: var(--menu-size);
+    background-color: var(--bg2);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    transition: transform 0.3s ease;
+    z-index: 100;
+
+    .menu-header {
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        border-bottom: 1px solid var(--border);
+
+        .menu-logo {
+            width: 32px;
+            height: 32px;
+            background-color: var(--rhpz-orange);
+            color: var(--text3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            font-weight: bold;
+            font-size: 18px;
+        }
+
+        .menu-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            color: #fff; /* TODO Change */
+        }
+
+    }
+
+    .menu-navigation {
+        flex-grow: 1;
+        padding: 10px 0;
+        overflow-y: auto;
+
+        .menu-group {
+            margin-bottom: 20px;
+
+            .menu-group-title {
+                padding: 0 20px;
+                font-size: 0.75rem;
+                text-transform: uppercase;
+                color: var(--text2);
+                margin-bottom: 8px;
+                font-weight: 600;
+                letter-spacing: 1px;
+            }
+
+            .menu-item {
+                display: flex;
+                align-items: center;
+                padding: 10px 20px;
+                color: var(--text);
+                text-decoration: none;
+                gap: 12px;
+                border-left: 3px solid transparent;
+                cursor: pointer;
+                transition: background-color 0.1s, border-color 0.1s;
+
+                &:hover {
+                    background-color: var(--bg4);
+                    text-decoration: none;
+                }
+                .active {
+                    background-color: var(--bg3);
+                    border-left-color: var(--rhpz-orange);
+                    font-weight: 600;
+                }
+                i {
+                    width: 20px;
+                    height: 20px;
+                    color: var(--text2);
+                }
+                .active i, &:hover i {
+                    color: var( --rhpz-orange );
+                }
+
+            }
+        }
+
+    }
+
+    .menu-user {
+        padding: 15px 20px;
+        border-top: 1px solid var(--border);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        background-color: var(--bg3);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--bg4);
+        }
+        .menu-user-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: var( --menu-user-avatar-bg );
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .menu-user-info {
+            display: flex;
+            flex-direction: column;
+
+            &.username {
+                font-size: 0.9rem;
+                font-weight: 600;
+            }
+            &.user_role {
+                font-size: 0.75rem;
+                color: var(--rhpz-orange);
+            }
+        }
+    }
+
+}