From 2c0f8476bed196f094b182acc2cd05948900f281 Mon Sep 17 00:00:00 2001
From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com>
Date: Mon, 3 Jun 2024 13:37:15 -0700
Subject: [PATCH] fix: fix mobile landing section divider and fix hamburger
 clicking area bug

---
 src/app/components/Navbar/Hamburger/Hamburger.scss |  2 +-
 src/app/components/Navbar/Navbar.scss              | 12 ++++--------
 src/app/pages/Landing/Landing.scss                 |  4 ++++
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/Navbar/Hamburger/Hamburger.scss b/src/app/components/Navbar/Hamburger/Hamburger.scss
index 0cbffdf..3caa2de 100644
--- a/src/app/components/Navbar/Hamburger/Hamburger.scss
+++ b/src/app/components/Navbar/Hamburger/Hamburger.scss
@@ -7,6 +7,7 @@
   border: none;
   padding-block: calc($main-padding-mobile-block/2);
   padding-inline: calc($main-padding-mobile-inline/2 - $hamburger-width/2);
+  z-index: 5;
 
   @media (min-width: $mobile-breakpoint) {
     padding-block: calc($main-padding-tablet-block/2);
@@ -25,7 +26,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    z-index: 5;
   }
 
   .line {
diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss
index 021dddc..51f6ef7 100644
--- a/src/app/components/Navbar/Navbar.scss
+++ b/src/app/components/Navbar/Navbar.scss
@@ -22,11 +22,9 @@ nav {
   }
 
   .nav-container {
-    @media (min-width: $mobile-breakpoint) {
-      border-right: 1.5px solid $outline-gray;
-    }
     padding-inline: $main-padding-mobile-inline;
     padding-block: $main-padding-mobile-block;
+    padding-top: 5rem;
     width: 100vw;
     max-width: 400px;
     background: $primary-white;
@@ -48,17 +46,15 @@ nav {
       transform: translateX(-100%);
     }
 
-    @media (max-width: $mobile-breakpoint) {
-      padding-inline: clamp(34px, 12px + 1.2vw, 40px);
-      padding-top: 5rem;
-    }
-
     @media (min-width: $mobile-breakpoint) {
+      border-right: 1.5px solid $outline-gray;
       padding-inline: $main-padding-desktop-inline;
       padding-block: $main-padding-desktop-block;
+      padding-top: $main-padding-tablet-block;
     }
 
     @media (min-width: $tablet-breakpoint) {
+      padding-top: $main-padding-desktop-block;
       max-width: 500px;
       width: $nav-width;
       visibility: visible;
diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
index 239ae4e..54fa0f0 100644
--- a/src/app/pages/Landing/Landing.scss
+++ b/src/app/pages/Landing/Landing.scss
@@ -102,6 +102,10 @@
     }
   }
 
+  .mobile-line {
+    margin-inline: $main-padding-mobile-inline;
+  }
+
   @media (min-width: $tablet-breakpoint) {
     .mobile-header,
     .add-me-to-cart {