style

backend/src/main/resources/get/style.css

@@ -312,6 +312,94 @@ footer a {
     font-family: 'Courier New', monospace;
     color: #ffca28; /* Giallo per far risaltare le variabili/formule */
 }
+.main-wrapper {
+    display: flex;
+    max-width: 1200px;
+    margin: 100px auto 50px; /* Spazio per la navbar */
+    gap: 30px;
+    padding: 0 20px;
+}
+
+/* Sidebar Style */
+.sidebar {
+    flex: 0 0 250px; /* Larghezza fissa 250px */
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px); /* Effetto vetro sfocato */
+    border-radius: 15px;
+    padding: 20px;
+    height: fit-content;
+    position: sticky;
+    top: 100px; /* Si blocca quando scendi */
+    border: 1px solid rgba(77, 184, 255, 0.2);
+}
+
+.sidebar h3 {
+    color: #4db8ff;
+    font-size: 1.2rem;
+    margin-bottom: 20px;
+    border-bottom: 1px solid rgba(77, 184, 255, 0.3);
+    padding-bottom: 10px;
+}
+
+.sidebar nav {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* Bottoni nella sidebar */
+.btn-appunto {
+    background: transparent;
+    color: white;
+    border: none;
+    text-align: left;
+    padding: 12px 15px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.btn-appunto i {
+    width: 20px; /* Allinea le icone */
+    color: #4db8ff;
+}
+
+.btn-appunto:hover {
+    background: rgba(77, 184, 255, 0.1);
+    padding-left: 20px; /* Effetto movimento al passaggio */
+}
+
+.btn-appunto.active {
+    background: #4db8ff;
+    color: #0b0f19;
+}
+
+.btn-appunto.active i {
+    color: #0b0f19;
+}
+
+/* Area contenuto */
+.content-area {
+    flex: 1; /* Prende tutto lo spazio rimanente */
+    min-width: 0; /* Evita bug di overflow con flex */
+}
+
+/* Responsive per cellulari */
+@media (max-width: 768px) {
+    .main-wrapper {
+        flex-direction: column;
+        margin-top: 80px;
+    }
+    .sidebar {
+        position: static;
+        flex: none;
+        width: 100%;
+    }
+}
 /* --- SFONDO SPAZIALE ANIMATO --- */
 .sfondo-spazio {
     position: fixed; /* Lo fissa allo schermo */