[ch68] Modify product page and sidebar

src/components/HomeSearchSection/index.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React from 'react'
 import { useRouter } from 'next/router'
 
 export default function HomeSearchSection() {
-  const router = useRouter();
+  const router = useRouter()
 
   const handleSearchClick = () => {
-    router.push("/product-list");
-  };
+    router.push('/products')
+  }
 
   return (
     <section className="home-section">
@@ -16,11 +16,11 @@ export default function HomeSearchSection() {
           This is a sample description
         </p>
       </header>
-      <div className="home-search">
-        <button className="home-search__button" onClick={handleSearchClick}>
-          <div className="home-search__text">Search</div>
+      <div className="home-search-box">
+        <button className="home-search-box__button" onClick={handleSearchClick}>
+          <span className="home-search-box__text">Search</span>
         </button>
       </div>
     </section>
-  );
+  )
 }

src/components/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Sidebar = () => {
-  return <div className="sidebar-container">Sidebar</div>
+  return <div className="sidebar">Sidebar</div>
 }
 
 export default Sidebar

src/pages/products.tsx

@@ -0,0 +1,23 @@
+import Footer from '../components/Footer'
+import Navbar from '../components/Navbar'
+import Sidebar from '../components/Sidebar'
+import ProductList from '../components/ProductList'
+
+const Products = () => (
+  <div className="layout-products">
+    <header>
+      <Navbar />
+    </header>
+    <aside>
+      <Sidebar />
+    </aside>
+    <main>
+      <ProductList />
+    </main>
+    <footer>
+      <Footer />
+    </footer>
+  </div>
+)
+
+export default Products

src/styles/abstracts/_mixins.scss

@@ -45,18 +45,13 @@
   align-items: center;
 }
 
-@mixin button-bg($bg) {
-  background: $bg;
-
-  padding: rem(5px 10px);
-  border-radius: rem(3px);
-  text-decoration: none;
-
+@mixin button-hover-animation($background-color) {
   &:hover {
-    background: darken($bg, 8%);
+    background: darken($background-color, 8%);
     transition: all 0.3s ease;
   }
+
   &:active {
-    background: darken($bg, 25%);
+    background: darken($background-color, 25%);
   }
 }

src/styles/components/_home-search-box.scss

@@ -3,8 +3,6 @@
 .home-search-box {
   @include flex-center();
 
-  display: flex;
-
   &__button {
     @include button-hover-animation($picton-blue);
 

src/styles/components/_sidebar.scss

@@ -1,14 +1,8 @@
 @import '../abstracts/_abstracts-dir';
 
-.sidebar-container {
-  left: 0;
-  height: 100vh;
-  overflow: auto;
-  width: rem(150px);
+.sidebar {
+  height: 100%;
   background-color: $primary;
 
   @include flex-center();
-  @include respond-above(md) {
-    width: rem(300px);
-  }
 }

src/styles/layouts/__layouts-dir.scss

@@ -1,3 +1,4 @@
 @import './layout-home';
 @import './layout-authentication';
 @import './layout-about-us';
+@import './layout-products';

src/styles/layouts/__layout-product-list.scss → src/styles/layouts/_layout-products.scss

@@ -1,20 +1,26 @@
-.layout-product-list {
+.layout-products {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: rem(40px) 1fr rem(200px);
+  grid-template-rows: rem(40px) rem(50px) 1fr rem(200px);
   grid-template-areas:
     'header'
+    'sidebar'
     'main'
     'footer';
 
   height: 100vh;
 
   @include respond-above('md') {
-    grid-template-rows: rem(80px) 1fr rem(250px);
+    grid-template-rows: rem(80px) rem(100px) 1fr rem(250px);
   }
 
   @include respond-above('lg') {
+    grid-template-columns: minmax(250px, 400px) minmax(742px , 1fr);
     grid-template-rows: rem(100px) 1fr rem(300px);
+    grid-template-areas:
+    'header header'
+    'sidebar main'
+    'footer footer';
   }
 
   @include respond-above('xl') {
@@ -25,6 +31,10 @@
     grid-area: header;
   }
 
+  & > aside {
+    grid-area: sidebar;
+  }
+
   & > main {
     grid-area: main;