From aa14c41587d09c190975c5d412c478651c7dab81 Mon Sep 17 00:00:00 2001
From: autruonggiang <21522019@gm.uit.edu.vn>
Date: Wed, 7 Feb 2024 13:07:01 +0700
Subject: [PATCH] feat: create sort & filter in home

---
 assets/css/base.css |  2 +-
 assets/css/main.css | 15 ++++++++++++---
 index.html          | 31 ++++++++++++++++++++++++++++++-
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 540fb2f..e640d94 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -136,7 +136,7 @@ html {
     outline: none;
     cursor: pointer;
     color: var(--text-color);
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 1.6rem;
diff --git a/assets/css/main.css b/assets/css/main.css
index 623d936..00c492a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -890,6 +890,9 @@ header__navbar-icon-link:hover {
 .app__container {
     background-color: #f5f5f5;
 }
+.app__content {
+    padding-top: 36px;
+}
 
 .category {
     border-radius: 2px;
@@ -900,6 +903,7 @@ header__navbar-icon-link:hover {
     color: var(--text-color);
     font-size: 1.7rem;
     padding: 12px 16px;
+    margin-top: 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
@@ -916,9 +920,9 @@ header__navbar-icon-link:hover {
     margin-left: 10px;
 }
 
-.category-item {
+/* .category-item {
 
-}
+} */
 
 .category-item--active .category-item__link {
     color: var(--primary-color);
@@ -948,4 +952,9 @@ header__navbar-icon-link:hover {
 .category-item__link:hover {
     right: -4px;
     color: var(--primary-color);
-}
\ No newline at end of file
+}
+
+/* Home sort + filter */
+.home-filter__btn {
+    background-color: var(--white-color);
+}
diff --git a/index.html b/index.html
index cfc4b44..5e4ff77 100644
--- a/index.html
+++ b/index.html
@@ -308,7 +308,7 @@ <h5 class="header__cart-item-name">
 
         <div class="app__container">
             <div class="grid">
-                <div class="grid__row">
+                <div class="grid__row app__content">
                     <div class="grid__column-2">
                         <nav class="category">
                             <h3 class="category__heading">
@@ -330,7 +330,36 @@ <h3 class="category__heading">
                     </div>
 
                     <div class="grid__column-10">
+                        <div class="home-filter">
+                            <span class="home-filter__label">Sắp xếp theo</span>
+                            <button class="home-filter__btn btn">Phổ biến</button>
+                            <button class="home-filter__btn btn btn--primary">Mới nhất</button>
+                            <button class="home-filter__btn btn">Bán chạy</button>
+
+                            <div class="select-input">
+                                <span class="select-input__label">
+                                    Giá
+                                    <i class="fa-solid fa-chevron-down"></i>
+                                </span>
+                            </div>
+
+                            <div class="home-filter__page">
+                                <span class="home-filter__page-num">
+                                    <span class="home-filter__page-current">1</span>
+                                    /
+                                    15
+                                </span>
 
+                                <div class="home-filter__page-control">
+                                    <a href="" class="home-filter__page-btn home-filter__page-btn--disable">
+                                        <i class="fa-solid fa-chevron-left"></i>
+                                    </a>
+                                    <a href="" class="home-filter__page-btn">
+                                        <i class="fa-solid fa-chevron-right"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>