Refactor code

practice/practice-02/src/index.pug

@@ -6,9 +6,9 @@ html(lang="en")
     link(rel="stylesheet", href="./styles/main.scss")
     title Food Hut
   body
-    header.header.flex
+    header.header.flex.justify-content-between.mr-auto
       .logo-wrapper
         a.logo-link(href="javascript:void(0)")
           img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-      .header-content.flex
+      .header-content.flex.justify-content-between.h-auto
         include layouts/nav/nav-menu

practice/practice-02/src/layouts/nav/nav-menu.pug

@@ -1,10 +1,10 @@
 - var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
 
-nav.nav
+nav.nav.mr-auto.h-auto
   input.toggle-menu(type="checkbox")
   .icon-menu
-  ul.nav-list.flex
+  ul.nav-list.flex.justify-content-between.h-auto.w-auto
     each val in list
       li.nav-item
-        a.nav-link(href="javascrip:void(0)")= val
-a.btn.nav-download-btn(href="javascript:void(0)") Download App
+        a.nav-link.no-underline(href="javascrip:void(0)")= val
+a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App

practice/practice-02/src/styles/abstracts/_mixins.scss

@@ -1,6 +1,5 @@
 @mixin base-icon-menu {
   height: 3px;
-  width: auto;
   background: #000000;
   border-radius: 10px;
   transition: 0.3s;

practice/practice-02/src/styles/bases/_base.scss

@@ -1,3 +1,23 @@
 .flex {
   display: flex;
 }
+
+.justify-content-between {
+  justify-content: space-between;
+}
+
+.mr-auto {
+  margin: auto;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.no-underline {
+  text-decoration: none;
+}

practice/practice-02/src/styles/components/_button.scss

@@ -5,7 +5,6 @@
   border-radius: 100px;
   font-size: $fs-md;
   color: $white;
-  text-decoration: none;
   white-space: nowrap;
   transition: 0.2s;
 }

practice/practice-02/src/styles/components/_toggle-menu.scss

@@ -1,28 +1,31 @@
+$width-icon-menu: 36px;
+
 .icon-menu {
   @include base-icon-menu;
 
   position: relative;
-  width: 36px;
+  width: $width-icon-menu;
   cursor: pointer;
 
   &:before {
     @include icon-menu;
 
     top: -10px;
-    width: 36px;
+    width: $width-icon-menu;
   }
 
   &:after {
     @include icon-menu;
 
     top: 10px;
-    width: 36px;
+    width: $width-icon-menu;
   }
 }
 
 .toggle-menu {
   position: absolute;
-  top: 40px;
+  top: 46px;
+  right: 21px;
   width: 36px;
   height: 27px;
   cursor: pointer;

practice/practice-02/src/styles/layouts/_header.scss

@@ -1,11 +1,9 @@
 .header {
   position: relative;
-  justify-content: space-between;
   align-items: center;
   max-width: $max-width;
   min-width: $min-width;
   padding: 24px;
-  margin: auto;
 }
 
 @media screen and (min-width: 840px) {
@@ -16,10 +14,8 @@
   }
 
   .header-content {
-    justify-content: space-between;
     gap: 10px;
     width: 100%;
     max-width: 918px;
-    height: auto;
   }
 }

practice/practice-02/src/styles/layouts/_navbar.scss

@@ -6,12 +6,9 @@
   border: 2px solid $primary-color;
   top: 0;
   right: -300px;
-  width: auto;
-  height: auto;
   margin-top: 105px;
   margin-right: 10px;
   margin-left: 10px;
-  z-index: 2;
   background-color: $white;
 }
 
@@ -34,15 +31,12 @@
 }
 
 .nav-link {
-  text-decoration: none;
   color: $black;
 }
 
 @media screen and (min-width: 840px) {
   .nav {
-    margin: auto;
     width: 100%;
-    height: auto;
   }
 
   .nav-download-btn {
@@ -56,10 +50,9 @@
   .nav-list {
     position: unset;
     flex-direction: row;
-    justify-content: space-between;
     border: none;
-    margin: auto;
     max-width: 600px;
+    margin: unset;
   }
 
   .nav-item {