1 files changed, 76 insertions, 1 deletions
diff --git a/static/styles.css b/static/styles.css
index bc5c2e2..724d1d9 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -57,6 +57,7 @@ textarea {
   gap: 18px;
   padding: 24px 0;
   border-bottom: 1px solid var(--line);
+  position: relative;
 }
 
 .brand {
@@ -943,8 +944,82 @@ textarea:focus {
   }
 
   .topbar {
-    align-items: flex-start;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .menu-toggle {
+    display: block !important;
+    width: 28px;
+    height: 22px;
+    margin-left: auto;
+    background: none;
+    border: none;
+    cursor: pointer;
+    position: relative;
+    padding: 0;
+  }
+
+  .menu-toggle::before,
+  .menu-toggle::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: var(--text);
+    left: 0;
+  }
+
+  .menu-toggle::before {
+    top: 0;
+    box-shadow: 0 10px 0 var(--text);
+  }
+
+  .menu-toggle::after {
+    bottom: 0;
+  }
+
+  .nav-actions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
     flex-direction: column;
+    gap: 0;
+    border-bottom: 1px solid var(--line);
+    background: var(--bg);
+    padding: 12px 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+  }
+
+  .nav-actions.is-open {
+    max-height: 400px;
+  }
+
+  .nav-actions a,
+  .nav-actions button {
+    padding: 12px 16px;
+    text-align: left;
+    border: none;
+    border-radius: 0;
+    background: none;
+    color: var(--muted);
+  }
+
+  .nav-actions a.is-active,
+  .nav-actions a:hover,
+  .nav-actions button:hover {
+    background: var(--panel);
+    color: var(--text);
+  }
+
+  .nav-actions .button-link {
+    color: #0e0a04;
+    background: var(--accent);
+    margin: 8px 16px;
+    border: none;
   }
 
   .page-heading,