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