From e948e38c201e10f9b3b8b03d5746a02c1151ade6 Mon Sep 17 00:00:00 2001
From: Robert <robertsolovev39@gmail.com>
Date: Thu, 7 Mar 2024 05:33:08 +0700
Subject: [PATCH] sidebar

---
 src/widgets/sidebar/index.ts       |  1 +
 src/widgets/sidebar/ui/Sidebar.tsx | 38 ++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/widgets/sidebar/index.ts
 create mode 100644 src/widgets/sidebar/ui/Sidebar.tsx

diff --git a/src/widgets/sidebar/index.ts b/src/widgets/sidebar/index.ts
new file mode 100644
index 0000000..4364862
--- /dev/null
+++ b/src/widgets/sidebar/index.ts
@@ -0,0 +1 @@
+export { default as Sidebar } from "./ui/Sidebar";
diff --git a/src/widgets/sidebar/ui/Sidebar.tsx b/src/widgets/sidebar/ui/Sidebar.tsx
new file mode 100644
index 0000000..f04812f
--- /dev/null
+++ b/src/widgets/sidebar/ui/Sidebar.tsx
@@ -0,0 +1,38 @@
+import { useParams } from "@tanstack/react-router";
+import { useChainState } from "@/entities/chain/model";
+
+import List from "@/shared/ui/List";
+import { Button } from "@mui/material";
+
+export default function Sidebar() {
+  const params = useParams({ strict: false });
+  const chains = useChainState((state) => state.chains || []);
+
+  // @ts-ignore
+  const chainId: string | undefined = params.chainId;
+
+  return (
+    <div className="no-scrollbar h-screen w-[250px] overflow-y-scroll bg-bg-color px-4 pb-8">
+      <List.Root className="mt-8 space-y-2">
+        {chains.map((chain, index) => (
+          <List.LinkItem
+            key={index}
+            to={`/$namespace/${chain._id}`}
+            isSelected={chainId == chain._id}
+          >
+            {chain.name}
+          </List.LinkItem>
+        ))}
+      </List.Root>
+
+      <div className="mt-4">
+        <Button
+          variant="outlined"
+          sx={{ width: "100%", fontWeight: "semibold" }}
+        >
+          <span className="mr-2 text-2xl font-light">+</span>Добавить
+        </Button>
+      </div>
+    </div>
+  );
+}