1 files changed, 53 insertions, 0 deletions
diff --git a/src/components/mobile-navigation.module.css b/src/components/mobile-navigation.module.css
new file mode 100644
index 0000000..4fe082d
--- /dev/null
+++ b/src/components/mobile-navigation.module.css
@@ -0,0 +1,53 @@
+.mobileMenuToggle {
+  display: none;
+}
+
+.mobileNavigation {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100dvh;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  background: var(--bg);
+  color: var(--text);
+  overflow: hidden;
+}
+
+.mobileNavigation[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobileNavigation::backdrop {
+  background: var(--bg);
+}
+
+.mobileNavigationHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  min-height: 64px;
+  padding: env(safe-area-inset-top) 16px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-h);
+}
+
+.mobileNavigationContent {
+  flex: 1;
+  min-height: 0;
+  padding: 16px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
+}
+
+@media (max-width: 640px) {
+  .mobileMenuToggle {
+    display: block;
+  }
+}