add frontend files

app/javascript/src/components/SideNav.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import cx from "classnames";
+import { useAppContext } from "../contexts/AppContext";
+
+type MenuItem = {
+  label: string;
+};
+
+const MenuItems: MenuItem[] = [
+  {
+    label: "Início",
+  },
+  {
+    label: "Stake",
+  },
+  {
+    label: "Carteira",
+  },
+];
+
+
+export const SideNav = () => {
+  const { sideNavExpanded, setSideNavExpanded } = useAppContext()
+
+  const handleCloseSideNav = () => {
+    setSideNavExpanded(false);
+  };
+
+  return (
+    <div className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72">
+      <div
+        role="row"
+        onClick={() => handleCloseSideNav()}
+        className={cx(
+          "xl:hidden absolute w-full h-full bg-black bg-opacity-60 backdrop-filter backdrop-blur-sm z-30 transition-all duration-500",
+          !sideNavExpanded && "opacity-0"
+        )}
+      />
+      <aside
+        className={`bg-white w-5/6 md:w-2/6 overflow-hidden absolute h-full drop-shadow-xl drop border-r border-gray-200 z-40 transition-all duration-500 xl:transition-none xl:mx-0 xl:static xl:w-full ${
+          sideNavExpanded ? "mx-0" : "-mx-full"
+        }`}
+      >
+        <ul>
+          {MenuItems.map((item) => (
+            <li
+              key={item.label}
+              className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
+            >
+              <a href="#">{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+};