File size: 1,828 Bytes
dda1e85 | 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 | import React from 'react';
import {
HomeIcon,
BookmarkIcon,
ClockIcon,
ArrowDownTrayIcon,
Cog6ToothIcon,
ChatBubbleLeftRightIcon,
PlusIcon
} from '@heroicons/react/24/outline';
const Sidebar = ({
currentPage,
setCurrentPage,
showAIAssistant,
setShowAIAssistant,
setShowSettings,
addTab
}) => {
const menuItems = [
{ id: 'home', label: 'Home', icon: HomeIcon },
{ id: 'bookmarks', label: 'Bookmarks', icon: BookmarkIcon },
{ id: 'history', label: 'History', icon: ClockIcon },
{ id: 'downloads', label: 'Downloads', icon: ArrowDownTrayIcon },
{ id: 'settings', label: 'Settings', icon: Cog6ToothIcon }
];
return (
<div className="w-16 bg-gray-800 flex flex-col items-center py-4 space-y-6">
<div className="p-2 rounded-lg bg-indigo-600 mb-2">
<PlusIcon className="h-6 w-6 text-white" onClick={addTab} />
</div>
{menuItems.map((item) => (
<button
key={item.id}
onClick={() => {
if (item.id === 'settings') {
setShowSettings(true);
} else {
setCurrentPage(item.id);
}
}}
className={`p-2 rounded-lg transition-colors ${
currentPage === item.id ? 'bg-gray-700' : 'hover:bg-gray-700'
}`}
>
<item.icon className="h-6 w-6 text-gray-300" />
</button>
))}
<div className="mt-auto">
<button
onClick={() => setShowAIAssistant(!showAIAssistant)}
className={`p-2 rounded-lg transition-colors ${
showAIAssistant ? 'bg-indigo-600' : 'hover:bg-gray-700'
}`}
>
<ChatBubbleLeftRightIcon className="h-6 w-6 text-gray-300" />
</button>
</div>
</div>
);
};
export default Sidebar; |