Layout mobile menu

Author: wutali

src/components/Burger.tsx

@@ -12,12 +12,13 @@ export default function Burger({ active, onClick }: Props) {
         {`
           .container {
             position: fixed;
-            width: 28px;
-            height: 28px;
+            width: 38px;
+            height: 38px;
             cursor: pointer;
             top: 1rem;
-            left: 1.5rem;
+            left: 1.25rem;
             z-index: 2;
+            background-color: rgba(255, 255, 255, 0.7);
           }
           .meat {
             position: absolute;

src/components/Layout.tsx

@@ -33,7 +33,7 @@ export default function Layout({ children }: Props) {
           .root {
             display: flex;
             flex: 1;
-            padding: 3.75em 0;
+            padding: 4rem 0;
           }
           main {
             display: flex;

src/components/Navigation.tsx

@@ -49,6 +49,7 @@ export default function Navigation() {
               display: flex;
               flex-direction: column;
               justify-content: center;
+              z-index: 1;
             }
             li {
               margin-bottom: 1.75rem;