feat: create sort & filter in home

autruonggiang · Feb 7, 2024 · aa14c41 · aa14c41
1 parent ff5ec5f
commit aa14c41
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git 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
@@ -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);
-}
+}
+
+/* Home sort + filter */
+.home-filter__btn {
+    background-color: var(--white-color);
+}
diff --git 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>