Add mobile dropdown

blog/index.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useTranslate, usePageSharedData } from "@portal/hooks";
 import moment from "moment";
 import { BlogFooter } from "@theme/components/Footer/BlogFooter";
@@ -37,6 +37,7 @@ export default function Index() {
   const [selectedCategories, setSelectedCategories] = useState(
     defaultSelectedCategories
   );
+
   const [cards, setCards] = useState(otherPosts);
 
   const toggleCategory = (category) => {
@@ -53,6 +54,8 @@ export default function Index() {
     selectedCategories.has(card.category_id)
   );
 
+  const [open, setOpen] = useState(false);
+
   return (
     <div className="landing dev-blog">
       <div className="justify-content-center align-items-lg-center">
@@ -120,9 +123,9 @@ export default function Index() {
         {/* Other Blog Posts*/}
         <section className="container-new py-26">
           <div className="row w-100 mx-auto px-2">
-            <div className="row-cols-lg-2 m-0 p-0 mt-2 d-none d-lg-block">
+            <div className="row-cols-lg-2 m-0 p-0 mt-2">
               {/* Filters Desktop*/}
-              <div className="p-3 category_sidebar">
+              <div className="p-3 category_sidebar d-none d-lg-block">
                 <p className="mb-2 category-header">Filter by Category:</p>
                 <div className="d-flex flex-column p-3">
                   {Object.keys(categories).map((item) => (
@@ -146,6 +149,47 @@ export default function Index() {
                   ))}
                 </div>
               </div>
+              {/* End Desktop Filters */}
+              {/* Filters Mobile */}
+              <div className="col d-flex flex-column p-0 d-lg-none mb-4">
+                <p className="mb-2 category-header">Filter by:</p>
+                <div className="dropdown">
+                  <button
+                    className="dropdown-btn"
+                    onClick={() => setOpen((open) => !open)}
+                  >
+                    Category
+                    <img alt="dropdown arrow" />
+                  </button>
+                  {open && (
+                    <div
+                      className="dropdown-content d-flex flex-column mt-2"
+                      aria-labelledby="blog-dropdown-button"
+                    >
+                      {Object.keys(categories).map((item, i) => (
+                        <div key={item + i} className="category-checkbox pl-2 pb-2">
+                          <input
+                            className={`blog-filter input_${item}`}
+                            type="checkbox"
+                            name="categories"
+                            id={`input_${item}`}
+                            defaultValue={`${item}`}
+                            onChange={() => toggleCategory(item)}
+                            defaultChecked
+                          />
+                          <label
+                            className="font-weight-bold"
+                            htmlFor={`input_${item}`}
+                          >
+                            {translate(categories[item])}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+              {/* End Filters Mobile */}
             </div>
             {/* Cards */}
             <div className="row col row-cols-lg-2 m-0 p-0">

static/img/icons/chevron-arrow-down.svg

@@ -0,0 +1,5 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M5.46875 6.53125L1.21875 2.28125C0.90625 1.96875 0.90625 1.5 1.21875 1.21875L1.90625 0.5C2.21875 0.21875 2.6875 0.21875 2.96875 0.5L5.96875 3.53125L9 0.5C9.28125 0.21875 9.75 0.21875 10.0625 0.5L10.75 1.21875C11.0625 1.5 11.0625 1.96875 10.75 2.28125L6.5 6.53125C6.21875 6.8125 5.75 6.8125 5.46875 6.53125Z"
+        fill="white" />
+</svg>

static/img/icons/lightmode/chevron-arrow-down.svg

@@ -0,0 +1,5 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M5.46875 6.53125L1.21875 2.28125C0.90625 1.96875 0.90625 1.5 1.21875 1.21875L1.90625 0.5C2.21875 0.21875 2.6875 0.21875 2.96875 0.5L5.96875 3.53125L9 0.5C9.28125 0.21875 9.75 0.21875 10.0625 0.5L10.75 1.21875C11.0625 1.5 11.0625 1.96875 10.75 2.28125L6.5 6.53125C6.21875 6.8125 5.75 6.8125 5.46875 6.53125Z"
+        fill="black" />
+</svg>

styles/_blog.scss

@@ -7,7 +7,7 @@
   }
 
   .text-bg {
-    background-color: #232325;
+    background-color: $gray-800;
     padding: 60px 40px;
     width: 100%;
     border-radius: 30px;
@@ -107,8 +107,8 @@
       {
       ##{$category} {
         content: url("../img/blog/#{$category}.png");
-        max-width:100%;
-        width:100%;
+        max-width: 100%;
+        width: 100%;
       }
     }
   }
@@ -123,6 +123,41 @@
     align-items: center;
   }
 
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-btn {
+    color: $white;
+    background-color: $gray-800;
+    border-color: $gray-800;
+    border-style: solid;
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    text-align: start;
+    padding-right: 10px;
+
+    img {
+      content: url("../img/icons/chevron-arrow-down.svg");
+      width: 10px;
+      height: 13px;
+      padding: 8px;
+    }
+  }
+
+  .dropdown-content {
+    display: flex;
+    align-items: start;
+    background-color: $gray-800;
+    padding: 16px 8px;
+    width: 254px;
+    height: auto;
+    border-radius: 4px;
+  }
+
   .category-checkbox label {
     font-weight: normal;
     font-size: 14px;

styles/light/_light-theme.scss

@@ -1324,4 +1324,18 @@ main article .card-grid {
     background-color: #FF198B;
     color: #4C0026;
   }
+
+  .dropdown-btn {
+    color: $gray-900;
+    background-color: $gray-200;
+    border-color: $gray-200;
+
+    img {
+      content: url("../img/icons/lightmode/chevron-arrow-down.svg");
+    }
+  }
+
+  .dropdown-content {
+    background-color: $gray-200;
+  }
 }