From 030f5ed949950239600e5e03c7095732af0e4b3a Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Mon, 17 Jul 2023 17:12:05 +0700
Subject: [PATCH] Add style for nav

---
 .../src/styles/abstracts/_mixins.scss         | 15 +++++
 .../src/styles/abstracts/_variables.scss      | 21 +++++++
 .../src/styles/bases/_typography.scss         | 11 ++++
 .../practice-02/src/styles/bases/reset.scss   | 54 ++++++++++++++++
 .../src/styles/components/_button.scss        | 22 +++++++
 .../src/styles/components/_logo.scss          | 11 ++++
 .../src/styles/components/_menu-button.scss   | 57 +++++++++++++++++
 .../src/styles/layouts/_header.scss           | 26 ++++++++
 .../src/styles/layouts/_navbar.scss           | 62 +++++++++++++++++++
 practice/practice-02/src/styles/main.scss     | 21 ++++++-
 10 files changed, 299 insertions(+), 1 deletion(-)
 create mode 100644 practice/practice-02/src/styles/abstracts/_mixins.scss
 create mode 100644 practice/practice-02/src/styles/abstracts/_variables.scss
 create mode 100644 practice/practice-02/src/styles/bases/_typography.scss
 create mode 100644 practice/practice-02/src/styles/bases/reset.scss
 create mode 100644 practice/practice-02/src/styles/components/_button.scss
 create mode 100644 practice/practice-02/src/styles/components/_logo.scss
 create mode 100644 practice/practice-02/src/styles/components/_menu-button.scss
 create mode 100644 practice/practice-02/src/styles/layouts/_header.scss
 create mode 100644 practice/practice-02/src/styles/layouts/_navbar.scss

diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
new file mode 100644
index 0000000..223e3aa
--- /dev/null
+++ b/practice/practice-02/src/styles/abstracts/_mixins.scss
@@ -0,0 +1,15 @@
+@mixin base-icon-menu {
+  height: 3px;
+  width: auto;
+  background: #000000;
+  border-radius: 10px;
+  transition: 0.3s;
+}
+
+@mixin icon-menu {
+  @include base-icon-menu;
+
+  content: "";
+  position: absolute;
+  right: 0;
+}
diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss
new file mode 100644
index 0000000..e2baab0
--- /dev/null
+++ b/practice/practice-02/src/styles/abstracts/_variables.scss
@@ -0,0 +1,21 @@
+$primary-font: "Sofia Pro";
+$secondary-font: "Inter";
+
+// Color
+$black: #000;
+$white: #fff;
+$primary-color: #f54748;
+$secondary-color: #fdc55e;
+
+// Font size
+$fs-xx-sm: 14px;
+$fs-x-sm: 16px;
+$fs-sm: 17px;
+$fs-md: 18px;
+$fs-lg: 24px;
+$fs-x-lg: 48px;
+$fs-xx-lg: 58px;
+
+// Size
+$max-width: 1440px;
+$min-width: 320px;
diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss
new file mode 100644
index 0000000..2f86ba5
--- /dev/null
+++ b/practice/practice-02/src/styles/bases/_typography.scss
@@ -0,0 +1,11 @@
+$font-path: "../assets/fonts";
+
+@font-face {
+  src: url("#{$font-path}/sofia-pro-regular.otf") format("opentype");
+  font-family: "Sofia Pro";
+}
+
+@font-face {
+  src: url("#{$font-path}/inter-regular.ttf") format("truetype");
+  font-family: "Inter";
+}
diff --git a/practice/practice-02/src/styles/bases/reset.scss b/practice/practice-02/src/styles/bases/reset.scss
new file mode 100644
index 0000000..93d88f2
--- /dev/null
+++ b/practice/practice-02/src/styles/bases/reset.scss
@@ -0,0 +1,54 @@
+$background-color_1: transparent;
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  &:before {
+    box-sizing: border-box;
+  }
+  &:after {
+    box-sizing: border-box;
+  }
+}
+img {
+  display: block;
+  max-width: 100%;
+}
+picture {
+  display: block;
+  max-width: 100%;
+}
+svg {
+  display: block;
+  max-width: 100%;
+}
+video {
+  display: block;
+  max-width: 100%;
+}
+input {
+  background-color: $background-color_1;
+  outline: none;
+}
+select {
+  background-color: $background-color_1;
+  outline: none;
+}
+textarea {
+  background-color: $background-color_1;
+  outline: none;
+}
+button {
+  cursor: pointer;
+  background-color: $background-color_1;
+  outline: none;
+  border: 0;
+}
+body {
+  min-height: 100vh;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1;
+}
diff --git a/practice/practice-02/src/styles/components/_button.scss b/practice/practice-02/src/styles/components/_button.scss
new file mode 100644
index 0000000..d6cf620
--- /dev/null
+++ b/practice/practice-02/src/styles/components/_button.scss
@@ -0,0 +1,22 @@
+.btn {
+  align-self: center;
+  display: none;
+  padding: 13px 20px;
+  background-color: $primary-color;
+  border-radius: 100px;
+  font-size: $fs-md;
+  color: $white;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 0.2s;
+}
+
+@media screen and (min-width: 840px) {
+  .btn {
+    display: block;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
+  }
+}
diff --git a/practice/practice-02/src/styles/components/_logo.scss b/practice/practice-02/src/styles/components/_logo.scss
new file mode 100644
index 0000000..aae8812
--- /dev/null
+++ b/practice/practice-02/src/styles/components/_logo.scss
@@ -0,0 +1,11 @@
+.logo-wrapper {
+  width: 121px;
+  height: 78px;
+  flex-shrink: 0;
+}
+
+.logo-link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
diff --git a/practice/practice-02/src/styles/components/_menu-button.scss b/practice/practice-02/src/styles/components/_menu-button.scss
new file mode 100644
index 0000000..6625e5e
--- /dev/null
+++ b/practice/practice-02/src/styles/components/_menu-button.scss
@@ -0,0 +1,57 @@
+.icon-menu {
+  @include base-icon-menu;
+
+  position: relative;
+  top: 27px;
+  width: 36px;
+  cursor: pointer;
+
+  &:before {
+    @include icon-menu;
+
+    top: -10px;
+    width: 36px;
+  }
+
+  &:after {
+    @include icon-menu;
+
+    top: 10px;
+    width: 36px;
+  }
+}
+
+.toggle-menu {
+  position: absolute;
+  top: 40px;
+  width: 36px;
+  height: 27px;
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0;
+}
+
+.toggle-menu:checked ~ .icon-menu {
+  background: transparent;
+}
+
+.toggle-menu:checked ~ .icon-menu:before {
+  top: 0;
+  transform: rotate(-45deg);
+}
+
+.toggle-menu:checked ~ .icon-menu:after {
+  top: 0;
+  transform: rotate(45deg);
+}
+
+.toggle-menu:checked ~ .nav-list {
+  right: 0px;
+}
+
+@media screen and (min-width: 840px) {
+  .icon-menu,
+  .toggle-menu {
+    display: none;
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
new file mode 100644
index 0000000..8c6fa8c
--- /dev/null
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -0,0 +1,26 @@
+.header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  max-width: $max-width;
+  min-width: $min-width;
+  padding: 24px;
+  margin: auto;
+}
+
+@media screen and (min-width: 840px) {
+  .header {
+    padding-top: 32px;
+    padding-inline: 24px;
+    gap: 10px;
+  }
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+    max-width: 918px;
+    height: auto;
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
new file mode 100644
index 0000000..5f73fe4
--- /dev/null
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -0,0 +1,62 @@
+.nav-list {
+  list-style: none;
+  transition: 0.1s;
+  position: fixed;
+  border: 2px solid $primary-color;
+  top: 0px;
+  right: -300px;
+  width: auto;
+  height: auto;
+  margin-top: 80px;
+  margin-right: 10px;
+  z-index: 2;
+}
+
+.nav-item {
+  font-size: 14px;
+  padding: 14px;
+  border-bottom: 1px solid $black;
+
+  &:last-child {
+    border-bottom: unset;
+  }
+
+  &:hover {
+    background-color: $secondary-color;
+  }
+}
+
+.nav-link {
+  text-decoration: none;
+  color: $black;
+}
+
+@media screen and (min-width: 840px) {
+  .nav {
+    margin: auto;
+    width: 100%;
+    height: auto;
+  }
+
+  .nav-list {
+    position: unset;
+    display: flex;
+    justify-content: space-between;
+    border: none;
+    margin: auto;
+    max-width: 600px;
+  }
+
+  .nav-item {
+    border-bottom: none;
+    padding: 0px;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+
+  .nav-link:hover {
+    color: $secondary-color;
+  }
+}
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index fa331fe..19e3138 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/src/styles/main.scss
@@ -1 +1,20 @@
-@import "./base/reset.scss";
+// Abstracts
+@import "./abstracts/mixins";
+@import "./abstracts/variables";
+
+// Bases
+@import "./bases/typography";
+@import "./bases/reset.scss";
+
+// Components
+@import "./components/button";
+@import "./components/menu-button";
+@import "./components/logo";
+
+// Layouts
+@import "./layouts/navbar";
+@import "./layouts/header";
+
+* {
+  font-family: $primary-font;
+}