From fbc0ac3449fe51a14c90a62d5ad036a6e900a649 Mon Sep 17 00:00:00 2001
From: alurosu <alurosu@gmail.com>
Date: Wed, 24 Jul 2024 14:29:41 +0300
Subject: [PATCH] made wallet filter mobile friendly

---
 src/app/wallets/page.tsx      |  2 +-
 src/components/WalletList.tsx | 26 ++++++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/wallets/page.tsx b/src/app/wallets/page.tsx
index bad24794..4f4f88b6 100644
--- a/src/app/wallets/page.tsx
+++ b/src/app/wallets/page.tsx
@@ -27,7 +27,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
     const urlRoot = `/site/using-zcash`
     const roots = await getRoot(urlRoot)
 
-
+    
     const walletsParsed = parseMarkdown(content);
     // console.log("Parsed Wallets:", walletsParsed); // Check parsed markdown output
 
diff --git a/src/components/WalletList.tsx b/src/components/WalletList.tsx
index cbe2acbf..e9964528 100644
--- a/src/components/WalletList.tsx
+++ b/src/components/WalletList.tsx
@@ -26,6 +26,11 @@ const WalletList: React.FC<Props> = ({ allWallets }) => {
   const [likes, setLikes] = useState<{ [key: string]: number }>({});
   const [error, setError] = useState<{ [key: string]: string }>({});
   const [success, setSuccess] = useState<{ [key: string]: string }>({});
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
+
+  const handleToggleFilter = () => {
+    setIsFilterVisible(!isFilterVisible);
+  };
 
   useEffect(() => {
     const fetchLikes = async () => {
@@ -157,12 +162,21 @@ const WalletList: React.FC<Props> = ({ allWallets }) => {
   return (
     <div className="flex flex-col md:flex-row">
       <div className="wallet-filter w-auto md:w-1/5 relative">
-        <h2 className="text-4xl font-bold mb-6">Filters</h2>
-        <FilterToggle
-          filters={filters}
-          activeFilters={activeFilters}
-          toggleFilter={toggleFilter}
-        />
+        <h2 className="text-4xl font-bold mb-6">
+          Filters
+          <button
+            onClick={handleToggleFilter}
+            className="float-right bg-blue-500 text-white px-4 py-2 rounded text-sm md:text-lg md:hidden">
+            {isFilterVisible ? 'Hide' : 'Show'}
+          </button>
+        </h2>
+        <div className={`md:block ${isFilterVisible ? 'block' : 'hidden'}`}>
+          <FilterToggle
+            filters={filters}
+            activeFilters={activeFilters}
+            toggleFilter={toggleFilter}
+          />
+        </div>
       </div>
       <section className="h-auto w-full">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">