sidebar

src/widgets/sidebar/index.ts

@@ -0,0 +1 @@
+export { default as Sidebar } from "./ui/Sidebar";

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>
+  );
+}