From 04c4c42af4a33cc30db020baf6fdd61d7b87a4c7 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Fri, 7 Jul 2023 09:30:20 -0500
Subject: [PATCH] added active sidebar

---
 ecommerce/fashion_website/pages/page.css  | 22 +++++++++++++++-------
 ecommerce/fashion_website/pages/page.html |  2 +-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css
index 9aa2bc0..4ff26fe 100644
--- a/ecommerce/fashion_website/pages/page.css
+++ b/ecommerce/fashion_website/pages/page.css
@@ -345,7 +345,7 @@ form :where(input, textarea, select)::placeholder{
 .search-float.active{
     display: block;
 }
-.overlay, .mobile-menu, .cart-menu{
+.overlay, .mobile-menu, .cart-menu, .sidebar{
     position: fixed;
     top: 0;
     left: 0;
@@ -366,17 +366,17 @@ form :where(input, textarea, select)::placeholder{
     pointer-events: all;
 }
 /*---------- mobile navbar ----------*/
-.mobile-menu, .cart-menu{
+.mobile-menu, .cart-menu, .sidebar{
     pointer-events: none;
     z-index: 1001;
     visibility: hidden;
     opacity: 0;
 }
-.mobile-menu.active, .cart-menu.active{
+.mobile-menu.active, .cart-menu.active, .sidebar.active{
     visibility: visible;
     opacity: 1;
 }
-.mobile-menu .wrap, .cart-menu .wrap{
+.mobile-menu .wrap, .cart-menu .wrap, .sidebar > .wrap{
     position: relative;
     max-width: calc(100% - 40px);
     width: 360px;
@@ -384,11 +384,12 @@ form :where(input, textarea, select)::placeholder{
     background-color: var(--white-color);
     pointer-events: auto;
     transition: var(--trabsition-transform);
+    transform: translateX(var(--transX, -100%));
 }
-.mobile-menu.active .wrap, .cart-menu.active .wrap{
+.mobile-menu.active .wrap, .cart-menu.active .wrap, .sidebar.active > .wrap{
     transform: translateX(0);
 }
-.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger{
+.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger, .sidebar .close-trigger{
     display: flex;
     position: absolute;
     top: 0;
@@ -400,7 +401,7 @@ form :where(input, textarea, select)::placeholder{
     justify-content: center;
     font-size: 30px;
 }
-.mobile-menu .main-menu, .cart-menu .cart-list{
+.mobile-menu .main-menu, .cart-menu .cart-list, .sidebar-content{
     display: flex;
     height: 100%;
     padding: 0 20px;
@@ -1269,6 +1270,7 @@ input.checking:checked::after{
 }
 .sidebar-title{
     font-size: 24px;
+    padding-top: 100px;
 }
 .sidebar .widget{
     margin: 20px 0;
@@ -1506,6 +1508,12 @@ input.checking:checked::after{
         grid-template-columns: 1fr 4fr;
         gap: 60px;
     }
+    .sidebar-title, .sidebar-content{
+        padding: 0;
+    }
+    .sidebar, .sidebar > .wrap{
+        all: unset;
+    }
 }
 
 @media(min-width: 1200px){
diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html
index 685ef66..eb391c1 100644
--- a/ecommerce/fashion_website/pages/page.html
+++ b/ecommerce/fashion_website/pages/page.html
@@ -30,7 +30,7 @@
                         <div class="header-center">
                             <nav class="menu">
                                 <ul>
-                                    <li><a href=""><span>Home</span></a></li>
+                                    <li><a href="../index.html"><span>Home</span></a></li>
                                     <li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
                                         <ul class="sub-mega">
                                             <li>