Add responsive navbar with toggle button

extension/source/Home/Wallet/Navigation.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import {
+  List,
+  CaretDoubleLeft,
   Wallet,
   Link as LinkIcon,
   AddressBook,
@@ -7,6 +9,7 @@ import {
   Lock,
 } from 'phosphor-react';
 import { Link, useLocation } from 'react-router-dom';
+import { useState } from 'react';
 import QuillHeading from '../../components/QuillHeading';
 
 const navigationTargets = [
@@ -35,6 +38,7 @@ const navigationTargets = [
 
 export const Navigation: React.FunctionComponent = () => {
   const { pathname } = useLocation();
+  const [sidebarVisible, setSidebarVisible] = useState(false);
 
   const isCurrentRoute = (target: string) => {
     if (pathname === target) {
@@ -49,30 +53,79 @@ export const Navigation: React.FunctionComponent = () => {
   };
 
   return (
-    <div className="flex flex-col w-52 px-4 py-12">
-      <QuillHeading />
-      <div className="mt-8 flex flex-col gap-4 justify-items-center">
-        {navigationTargets.map((item) => (
-          <Link to={item.link ?? item.target} key={item.name}>
-            <div
-              className={`flex gap-4 p-3 rounded-lg ${
-                isCurrentRoute(item.target) && 'bg-grey-200'
-              }`}
-            >
-              <span
-                className={`${isCurrentRoute(item.target) && 'text-blue-500'}`}
+    <nav className="flex">
+      <div
+        className={`${
+          sidebarVisible ? 'absolute' : 'flex-1'
+        } items-center justify-center`}
+      >
+        <button
+          className="p-4 lg:hidden"
+          type="button"
+          onClick={() => setSidebarVisible(!sidebarVisible)}
+        >
+          {sidebarVisible ? (
+            <CaretDoubleLeft className="icon-md" />
+          ) : (
+            <List className="icon-md" />
+          )}
+        </button>
+        <div
+          className={`${
+            sidebarVisible ? 'hidden' : 'flex-1'
+          } p-2 lg:hidden mt-4 flex flex-col gap-4 justify-items-center`}
+        >
+          {navigationTargets.map((item) => (
+            <Link to={item.link ?? item.target} key={item.name}>
+              <div
+                className={`flex gap-4 p-2 rounded-lg ${
+                  isCurrentRoute(item.target) && 'bg-grey-200'
+                }`}
               >
-                {item.icon}
-              </span>
-              {item.name}
-            </div>
-          </Link>
-        ))}
+                <span
+                  className={`${
+                    isCurrentRoute(item.target) && 'text-blue-500'
+                  }`}
+                >
+                  {item.icon}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
       </div>
-      <div className="flex gap-2 p-3 rounded-lg mt-20">
-        <Lock className="icon-md" />
-        Lock
+
+      <div
+        className={`w-52 px-4 py-12 ${
+          sidebarVisible ? 'block' : 'hidden'
+        } lg:block lg:flex-shrink-0`}
+      >
+        <QuillHeading />
+        <div className="mt-8 flex flex-col gap-4 justify-items-center">
+          {navigationTargets.map((item) => (
+            <Link to={item.link ?? item.target} key={item.name}>
+              <div
+                className={`flex gap-4 p-3 rounded-lg ${
+                  isCurrentRoute(item.target) && 'bg-grey-200'
+                }`}
+              >
+                <span
+                  className={`${
+                    isCurrentRoute(item.target) && 'text-blue-500'
+                  }`}
+                >
+                  {item.icon}
+                </span>
+                {item.name}
+              </div>
+            </Link>
+          ))}
+        </div>
+        <div className="flex gap-2 p-3 rounded-lg mt-20">
+          <Lock className="icon-md" />
+          Lock
+        </div>
       </div>
-    </div>
+    </nav>
   );
 };