make secondary grid use gray bg, made sidemenu sticky

components/product/ProductCard/ProductCard.module.css

@@ -55,7 +55,7 @@
 }
 
 .squareBg,
-.productTitle,
+.productTitle > span,
 .productPrice,
 .wishlistButton {
   @apply transition ease-in-out duration-300;
@@ -65,9 +65,13 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
+.squareBg.gray {
+  @apply bg-gray-300 !important;
+}
+
 .productTitle {
-  line-height: 51px;
-  width: 200px;
+  line-height: 40px;
+  width: 18vw;
 
   & span {
     @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;

components/product/ProductCard/ProductCard.tsx

@@ -8,7 +8,7 @@ interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   node: ProductData
-  variant?: 'slim'
+  variant?: 'slim' | 'simple'
 }
 
 interface ProductData {
@@ -44,12 +44,12 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
             src={p.images.edges[0].node.urlXL}
           />
         </div>
-        <div className={s.squareBg} />
+        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="">
-            <div className={s.productTitle}>
+            <p className={s.productTitle}>
               <span>{p.name}</span>
-            </div>
+            </p>
             <span className={s.productPrice}>${p.prices.price.value}</span>
           </div>
           <div className={s.wishlistButton}>

pages/index.tsx

@@ -54,32 +54,34 @@ export default function Home({
         ))}
       </Marquee>
       <div className="py-12 flex flex-row w-full px-12">
-        <div className="pr-3 w-48">
-          <ul className="mb-10">
-            <li className="py-1 text-base font-bold tracking-wide">
-              All Categories
-            </li>
-            {categories.map((cat) => (
-              <li key={cat.path} className="py-1 text-accents-8">
-                <a href="#">{cat.name}</a>
+        <div className="pr-3 w-48 relative">
+          <div className="sticky top-2">
+            <ul className="mb-10">
+              <li className="py-1 text-base font-bold tracking-wide">
+                All Categories
               </li>
-            ))}
-          </ul>
-          <ul className="">
-            <li className="py-1 text-base font-bold tracking-wide">
-              All Designers
-            </li>
-            {brands.flatMap(({ node }) => (
-              <li key={node.path} className="py-1 text-accents-8">
-                <a href="#">{node.name}</a>
+              {categories.map((cat) => (
+                <li key={cat.path} className="py-1 text-accents-8">
+                  <a href="#">{cat.name}</a>
+                </li>
+              ))}
+            </ul>
+            <ul className="">
+              <li className="py-1 text-base font-bold tracking-wide">
+                All Designers
               </li>
-            ))}
-          </ul>
+              {brands.flatMap(({ node }) => (
+                <li key={node.path} className="py-1 text-accents-8">
+                  <a href="#">{node.name}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
         <div className="flex-1">
           <Grid layout="normal">
             {products.map((p: any) => (
-              <ProductCard key={p.id} {...p} />
+              <ProductCard key={p.id} {...p} variant="simple" />
             ))}
           </Grid>
         </div>