Map and loading robots

1 files changed, 57 insertions, 0 deletions

diff --git a/frontend/src/styles/header.css b/frontend/src/styles/header.css
new file mode 100644
index 0000000..42c429f
--- /dev/null
+++ b/frontend/src/styles/header.css
@@ -0,0 +1,57 @@
+.header {
+    background: var(--card-bg);
+    backdrop-filter: blur(8px);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-dark);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 60px;
+    padding: 8px 16px;
+
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+
+    max-width: 960px;
+    margin: 0 auto;
+    z-index: 10;
+}
+
+.header-user {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.header-user-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+
+    & > p {
+        font-weight: bold;
+    }
+}
+
+/* Mobile View */
+@media screen and (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        height: fit-content;
+        max-width: 360px;
+    }
+
+    .header-user {
+        gap: var(--gap-normal);
+    }
+
+    .header-user-info {
+        gap: var(--gap-small);
+    }
+}