From 95ef9117816f33c025cf2300e73fd38547e1f88f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 27 Dec 2022 17:17:34 -0800
Subject: [PATCH] Modify HeaderMenu CSS for position, state

* Fix positioning at top
* Make it full width with padding on phones
* Remove hover states on phones
---
 components/HeaderMenu/index.scss | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index 873d360d..88065714 100644
--- a/components/HeaderMenu/index.scss
+++ b/components/HeaderMenu/index.scss
@@ -1,12 +1,18 @@
 .Menu {
   background: var(--menu-bg);
   border-radius: 6px;
+  box-sizing: border-box;
   display: none;
   min-width: 220px;
   position: absolute;
-  top: $unit * 5.75; // This shouldn't be hardcoded. How to calculate it?
+  top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
   // Also, add space that doesn't make the menu disappear if you move your mouse slowly
   z-index: 10;
+
+  @include breakpoint(phone) {
+    left: $unit-2x;
+    right: $unit-2x;
+  }
 }
 
 .MenuItem {
@@ -29,6 +35,16 @@
         color: var(--text-primary);
       }
     }
+
+    @include breakpoint(phone) {
+      background: inherit;
+      color: inherit;
+      cursor: default;
+
+      a {
+        color: inherit;
+      }
+    }
   }
 
   &.profile > div {