2025-02-03 07:32:13 -06:00
|
|
|
import { mdiHistory, mdiHomeOutline, mdiTextBoxSearchOutline } from "@mdi/js";
|
|
|
|
import { Icon } from "@mdi/react";
|
2024-12-13 09:48:09 -06:00
|
|
|
import axios from "axios";
|
2025-02-03 07:32:13 -06:00
|
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
|
|
import { Link, useLocation } from "react-router-dom";
|
2024-12-13 09:48:09 -06:00
|
|
|
import logo from "../assets/logo.svg";
|
2025-02-03 07:32:13 -06:00
|
|
|
import "./Sidebar.css";
|
2024-12-13 09:48:09 -06:00
|
|
|
|
|
|
|
interface SidebarProps {
|
|
|
|
onSelectPage: (page: string) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const Sidebar: React.FC<SidebarProps> = ({ onSelectPage }) => {
|
|
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
const location = useLocation();
|
|
|
|
|
|
|
|
const toggleSidebar = () => {
|
|
|
|
setCollapsed(!collapsed);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlePageClick = (page: string) => {
|
|
|
|
onSelectPage(page);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Get whether experimental OCR is enabled
|
|
|
|
const [ocrEnabled, setOcrEnabled] = useState(false);
|
|
|
|
const fetchOcrEnabled = useCallback(async () => {
|
|
|
|
try {
|
2025-02-03 07:32:13 -06:00
|
|
|
const res = await axios.get<{ enabled: boolean }>(
|
|
|
|
"/api/experimental/ocr"
|
|
|
|
);
|
2024-12-13 09:48:09 -06:00
|
|
|
setOcrEnabled(res.data.enabled);
|
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
fetchOcrEnabled();
|
|
|
|
}, [fetchOcrEnabled]);
|
|
|
|
|
|
|
|
const menuItems = [
|
2025-02-03 07:32:13 -06:00
|
|
|
{ name: "home", path: "/", icon: mdiHomeOutline, title: "Home" },
|
|
|
|
{ name: "history", path: "/history", icon: mdiHistory, title: "History" },
|
2024-12-13 09:48:09 -06:00
|
|
|
];
|
|
|
|
|
|
|
|
// If OCR is enabled, add the OCR menu item
|
|
|
|
if (ocrEnabled) {
|
2025-02-03 07:32:13 -06:00
|
|
|
menuItems.push({
|
|
|
|
name: "ocr",
|
|
|
|
path: "/experimental-ocr",
|
|
|
|
icon: mdiTextBoxSearchOutline,
|
|
|
|
title: "OCR",
|
|
|
|
});
|
2024-12-13 09:48:09 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={`sidebar min-w-[64px] ${collapsed ? "collapsed" : ""}`}>
|
|
|
|
<div className={`sidebar-header ${collapsed ? "collapsed" : ""}`}>
|
2025-02-03 07:32:13 -06:00
|
|
|
{!collapsed && (
|
|
|
|
<img
|
|
|
|
src={logo}
|
|
|
|
alt="Logo"
|
|
|
|
className="logo w-8 h-8 object-contain flex-shrink-0"
|
|
|
|
/>
|
|
|
|
)}
|
2024-12-13 09:48:09 -06:00
|
|
|
<button className="toggle-btn" onClick={toggleSidebar}>
|
|
|
|
☰
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<ul className="menu-items">
|
|
|
|
{menuItems.map((item) => (
|
2025-02-03 07:32:13 -06:00
|
|
|
<li
|
|
|
|
key={item.name}
|
|
|
|
className={location.pathname === item.path ? "active" : ""}
|
|
|
|
onClick={() => handlePageClick(item.name)}
|
|
|
|
>
|
2024-12-13 09:48:09 -06:00
|
|
|
<Link
|
|
|
|
to={item.path}
|
|
|
|
onClick={() => handlePageClick(item.name)}
|
2025-02-03 07:32:13 -06:00
|
|
|
style={{ display: "flex", alignItems: "center" }}
|
2024-12-13 09:48:09 -06:00
|
|
|
>
|
|
|
|
{/* <Icon path={item.icon} size={1} />
|
|
|
|
{!collapsed && <span> {item.title}</span>} */}
|
|
|
|
<div className="w-7 h-7 flex items-center justify-center flex-shrink-0">
|
|
|
|
<Icon path={item.icon} size={1} />
|
|
|
|
</div>
|
|
|
|
{!collapsed && <span className="ml-2">{item.title}</span>}
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Sidebar;
|