1 files changed, 171 insertions, 0 deletions
diff --git a/frontend/src/styles/sidebar.css b/frontend/src/styles/sidebar.css
new file mode 100644
index 0000000..f7bd0b2
--- /dev/null
+++ b/frontend/src/styles/sidebar.css
@@ -0,0 +1,171 @@
+.sidebar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(8px);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    position: absolute;
+    top: 120px; /* below header */
+    right: 16px;
+    bottom: 16px;
+
+    padding: 16px;
+    overflow: hidden;
+    width: 300px;
+    z-index: 10;
+
+    & h2 {
+        margin: 0;
+        text-align: center;
+    }
+}
+
+.sidebar-robots-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.sidebar-robot-list {
+    flex: 1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+
+    & li {
+        border-bottom: 1px solid #eee;
+        padding: 12px 0;
+        line-height: 1.8rem;
+    }
+
+    & li p {
+        font-weight: bold;
+    }
+
+    & li p:not(:first-of-type) {
+        margin: 0;
+    }
+}
+
+.add-robot-form {
+    border-bottom: 1px solid #333;
+    padding-bottom: 16px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.add-robot-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 8px;
+    width: 100%;
+
+    & > button.btn {
+        max-width: 100px;
+        padding: 8px;
+    }
+}
+
+.robot-name {
+    font-size: 1.1rem;
+    margin-top: 0.2rem;
+    margin-bottom: 0.8rem;
+    text-decoration: underline;
+}
+
+.robot-status-idle {
+    color: #ed6c02;
+}
+
+.robot-status-moving {
+    color: #4caf50;
+}
+
+.robot-coordinates {
+    padding-left: 20px;
+
+    & li {
+        border-bottom: none;
+        padding: 0;
+    }
+}
+
+/* History/Previous positions log accordion */
+.robot-history {
+    max-height: 0;
+    overflow: hidden;
+
+    transition: max-height 0.3s ease;
+
+    &.expanded {
+        max-height: 200px;
+    }
+
+    & ul {
+        list-style: inside;
+        padding-left: 16px;
+        margin: 8px 0 0;
+    }
+
+    & li {
+        font-size: 0.9rem;
+        padding: 4px 0;
+        border-bottom: none;
+    }
+}
+
+.robot-history-empty {
+    color: #999;
+    font-style: italic;
+}
+
+.arrow {
+    font-size: 1.2rem;
+    transition: transform 0.2s ease;
+
+    &.open {
+        transform: rotate(180deg);
+    }
+}
+
+/* Mobile View */
+@media screen and (max-width: 768px) {
+    .sidebar {
+        left: 16px;
+        right: 16px;
+        bottom: 16px;
+        top: auto;
+
+        border-radius: 16px;
+        height: 30vh;
+        width: auto;
+    }
+
+    .simulation-actions {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+    }
+
+    .add-robot-actions > button,
+    .simulation-actions > button {
+        padding: 8px;
+        margin: 0;
+        font-size: 0.8rem;
+    }
+
+    .add-robot-form {
+        gap: 8px;
+    }
+}
+