my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	import Link from "next/link";
#2	import Image from "next/image";
#3	import React, { useState, useEffect } from "react";
#4
#5	import DrawerIcon from "../../public/icons/drawer.svg";
#6	import SettingsIcon from "../../public/icons/settings.svg";
#7	import BotIcon from "../../public/icons/bot.svg";
#8	import DropdownIcon from "../../public/icons/dropdown.svg";
#9	import TwitterIcon from "../../public/icons/twitter.svg";
#10	import GithubIcon from "../../public/icons/github.svg";
#11	import LinkedinIcon from "../../public/icons/linkedin.svg";
#12
#13	export default function Sidebar() {
#14	const [bots, setBots] = useState([]);
#15
#16	useEffect(() => {
#17	const fetchBots = async () => {
#18	const response = await fetch("/api/get_bots");
#19	const data = await response.json();
#20	setBots(data);
#21	};
#22
#23	fetchBots();
#24	}, []);
#25
#26	const toggleDropdown = () => {
#27	const dropdown = document.getElementById("dropdown-toggle");
#28	dropdown.classList.toggle("hidden");
#29	};
#30
#31	return (
#32	<>
#33	{/* Mobile Toggle */}
#34	<button
#35	data-drawer-target="logo-sidebar"
#36	data-drawer-toggle="logo-sidebar"
#37	aria-controls="logo-sidebar"
#38	type="button"
#39	className="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200"
#40	>
#41	<DrawerIcon className="w-6 h-6" />
#42	</button>
#43
#44	{/* Sidebar */}
#45	<div
#46	id="logo-sidebar"
#47	className="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
#48	>
#49	<div className="flex flex-col h-full px-3 py-4 overflow-y-auto bg-gray-100">
#50	<div className="pb-10">
#51	<Link href="/" className="flex items-center justify-evenly mb-5">
#52	<Image
#53	src="/images/embedchain.png"
#54	alt="Embedchain Logo"
#55	width={45}
#56	height={0}
#57	className="block h-auto w-auto"
#58	/>
#59	<span className="self-center text-2xl font-bold whitespace-nowrap">
#60	Embedchain
#61	</span>
#62	</Link>
#63	<ul className="space-y-2 font-medium text-lg">
#64	{/* Settings */}
#65	<li>
#66	<Link
#67	href="/"
#68	className="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-200 group"
#69	>
#70	<SettingsIcon className="w-6 h-6 text-gray-600 transition duration-75 group-hover:text-gray-900" />
#71	<span className="ml-3">Settings</span>
#72	</Link>
#73	</li>
#74
#75	{/* Bots */}
#76	{bots.length !== 0 && (
#77	<li>
#78	<button
#79	type="button"
#80	className="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-200"
#81	onClick={toggleDropdown}
#82	>
#83	<BotIcon className="w-6 h-6 text-gray-600 transition duration-75 group-hover:text-gray-900" />
#84	<span className="flex-1 ml-3 text-left whitespace-nowrap">
#85	Bots
#86	</span>
#87	<DropdownIcon className="w-3 h-3" />
#88	</button>
#89	<ul
#90	id="dropdown-toggle"
#91	className="hidden text-sm py-2 space-y-2"
#92	>
#93	{bots.map((bot, index) => (
#94	<React.Fragment key={index}>
#95	<li>
#96	<Link
#97	href={`/${bot.slug}/app`}
#98	className="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-200"
#99	>
#100	{bot.name}
#101	</Link>
#102	</li>
#103	</React.Fragment>
#104	))}
#105	</ul>
#106	</li>
#107	)}
#108	</ul>
#109	</div>
#110	<div className="bg-gray-200 absolute bottom-0 left-0 right-0 h-20"></div>
#111
#112	{/* Social Icons */}
#113	<div className="mt-auto mb-3 flex flex-row justify-evenly sticky bottom-3">
#114	<a href="https://twitter.com/embedchain" target="blank">
#115	<TwitterIcon className="w-6 h-6 text-gray-600 transition duration-75 hover:text-gray-900" />
#116	</a>
#117	<a href="https://github.com/embedchain/embedchain" target="blank">
#118	<GithubIcon className="w-6 h-6 text-gray-600 transition duration-75 hover:text-gray-900" />
#119	</a>
#120	<a
#121	href="https://www.linkedin.com/company/embedchain"
#122	target="blank"
#123	>
#124	<LinkedinIcon className="w-6 h-6 text-gray-600 transition duration-75 hover:text-gray-900" />
#125	</a>
#126	</div>
#127	</div>
#128	</div>
#129	</>
#130	);
#131	}
#132

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public