175 lines
11 KiB
TypeScript
175 lines
11 KiB
TypeScript
|
|
import { AiOutlineMergeCells, AiOutlineSplitCells } from "react-icons/ai";
|
|
import { BiCrop, BiSprayCan } from "react-icons/bi";
|
|
import {
|
|
BsTools, BsSortNumericDown, BsArrowClockwise, BsFileEarmarkX, BsLayoutSplit, BsPalette, BsArrowUpSquare, Bs1Square, BsFileEarmarkPdf,
|
|
BsArrowLeftRight, BsFileEarmarkImage, BsFileEarmark, BsFiletypeHtml, BsLink, BsFiletypeMd, BsFileEarmarkWord, BsFiletypePpt, BsFiletypeTxt,
|
|
BsFiletypeXml, BsLock, BsUnlock, BsShieldLock, BsDroplet, BsAward, BsEraserFill, BsCardList, BsClipboardData, BsFile, BsFileEarmarkRichtext,
|
|
BsFileZip, BsFiletypeJs, BsFonts, BsImages, BsInfoCircle, BsSearch, BsShieldCheck, BsVectorPen, BsWrench, BsArrowsCollapse, BsGrid, Bs123,
|
|
BsArrowsFullscreen
|
|
} from "react-icons/bs";
|
|
import { MdOutlineScanner, MdOutlineBalance } from "react-icons/md";
|
|
import { IconType } from "react-icons";
|
|
|
|
import Container from "react-bootstrap/Container";
|
|
import Nav from "react-bootstrap/Nav";
|
|
import Navbar from "react-bootstrap/Navbar";
|
|
import NavDropdown from "react-bootstrap/NavDropdown";
|
|
import { LinkContainer } from "react-router-bootstrap";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import LanguagePicker from "./toolbar/LanguagePicker";
|
|
import Logo from "../../public/stirling-pdf-logo.svg";
|
|
import "./NavBar.css";
|
|
|
|
interface NavInfoItem {
|
|
displayText: string;
|
|
icon: any;
|
|
dest: string;
|
|
tooltip?: string;
|
|
}
|
|
interface NavInfoSublist {
|
|
displayText: string;
|
|
icon: IconType;
|
|
sublist: NavInfoItem[];
|
|
}
|
|
|
|
function convertToNavLink(item: NavInfoItem, index: number) {
|
|
return <LinkContainer key={"nav-link-"+index} to={item.dest}><Nav.Link className="nav-icon" title={item.tooltip}><item.icon/><span>{item.displayText}</span></Nav.Link></LinkContainer>;
|
|
}
|
|
function convertToNavDropdownItem(item: NavInfoItem | null, index: number) {
|
|
if (item == null)
|
|
return <NavDropdown.Divider key={"nav-dropdown-divider-"+index}/>;
|
|
|
|
return (
|
|
<LinkContainer to={item.dest} key={"nav-dropdown-item-"+index}>
|
|
<NavDropdown.Item className="nav-icon" title={item.tooltip}>
|
|
<item.icon/>
|
|
<span>{item.displayText}</span>
|
|
</NavDropdown.Item>
|
|
</LinkContainer>
|
|
);
|
|
}
|
|
function convertToNavDropdown(sublist: NavInfoSublist, index: number) {
|
|
const myTitle = <>
|
|
<span className="nav-icon">
|
|
<sublist.icon/>
|
|
<span>{sublist.displayText}</span>
|
|
</span>
|
|
</>;
|
|
|
|
return (
|
|
<NavDropdown title={myTitle} id="basic-nav-dropdown" key={"nav-dropdown-"+index}>
|
|
{sublist.sublist.map((item, i) => convertToNavDropdownItem(item, i))}
|
|
</NavDropdown>
|
|
);
|
|
}
|
|
|
|
function NavBar() {
|
|
const { t } = useTranslation();
|
|
|
|
// TODO: Construct automatically by fetching local & server-side operators
|
|
|
|
const navInfo = [
|
|
{displayText: t("multiTool.title"), icon: BsTools, dest: "/nothing-here", tooltip: t("home.multiTool.desc")},
|
|
{displayText: t("navbar.pageOps"), icon: BsFileEarmarkPdf, sublist: [
|
|
{ displayText: t("home.merge.title"), icon: AiOutlineMergeCells, dest: "/nothing-here", tooltip: t("home.merge.desc") },
|
|
{ displayText: t("home.split.title"), icon: AiOutlineSplitCells, dest: "/nothing-here", tooltip: t("home.split.desc") },
|
|
{ displayText: t("home.pdfOrganiser.title"), icon: BsSortNumericDown, dest: "/nothing-here", tooltip: t("home.pdfOrganiser.desc") },
|
|
{ displayText: t("home.rotate.title"), icon: BsArrowClockwise, dest: "/nothing-here", tooltip: t("home.rotate.desc") },
|
|
{ displayText: t("home.removePages.title"), icon: BsFileEarmarkX, dest: "/nothing-here", tooltip: t("home.removePages.desc") },
|
|
{ displayText: t("home.pageLayout.title"), icon: BsGrid, dest: "/page-operations/impose", tooltip: t("home.pageLayout.desc") },
|
|
{ displayText: t("home.scalePages.title"), icon: BsArrowsFullscreen, dest: "/nothing-here", tooltip: t("home.scalePages.desc") },
|
|
{ displayText: t("home.autoSplitPDF.title"), icon: BsLayoutSplit, dest: "/nothing-here", tooltip: t("home.autoSplitPDF.desc") },
|
|
{ displayText: t("home.adjust-contrast.title"), icon: BsPalette, dest: "/nothing-here", tooltip: t("home.adjust-contrast.desc") },
|
|
{ displayText: t("home.crop.title"), icon: BiCrop, dest: "/nothing-here", tooltip: t("home.crop.desc") },
|
|
{ displayText: t("home.extractPage.title"), icon: BsArrowUpSquare, dest: "/nothing-here", tooltip: t("home.extractPage.desc") },
|
|
{ displayText: t("home.PdfToSinglePage.title"), icon: Bs1Square, dest: "/nothing-here", tooltip: t("home.PdfToSinglePage.desc") },
|
|
]},
|
|
{displayText: t("navbar.convert"), icon: BsArrowLeftRight, sublist: [
|
|
{ displayText: t("home.imageToPdf.title"), icon: BsFileEarmarkImage, dest: "/dashboard", tooltip: t("home.imageToPdf.desc") },
|
|
{ displayText: t("home.fileToPDF.title"), icon: BsFileEarmark, dest: "/convert/file-to-pdf", tooltip: t("home.fileToPDF.desc") },
|
|
{ displayText: t("home.HTMLToPDF.title"), icon: BsFiletypeHtml, dest: "/nothing-here", tooltip: t("home.HTMLToPDF.desc") },
|
|
{ displayText: t("home.URLToPDF.title"), icon: BsLink, dest: "/nothing-here", tooltip: t("home.URLToPDF.desc") },
|
|
{ displayText: t("home.MarkdownToPDF.title"), icon: BsFiletypeMd, dest: "/nothing-here", tooltip: t("home.MarkdownToPDF.desc") },
|
|
null,
|
|
{ displayText: t("home.pdfToImage.title"), icon: BsFileEarmarkImage, dest: "/nothing-here", tooltip: t("home.pdfToImage.desc") },
|
|
{ displayText: t("home.PDFToWord.title"), icon: BsFileEarmarkWord, dest: "/nothing-here", tooltip: t("home.PDFToWord.desc") },
|
|
{ displayText: t("home.PDFToPresentation.title"), icon: BsFiletypePpt, dest: "/nothing-here", tooltip: t("home.PDFToPresentation.desc") },
|
|
{ displayText: t("home.PDFToText.title"), icon: BsFiletypeTxt, dest: "/nothing-here", tooltip: t("home.PDFToText.desc") },
|
|
{ displayText: t("home.PDFToHTML.title"), icon: BsFiletypeHtml, dest: "/nothing-here", tooltip: t("home.PDFToHTML.desc") },
|
|
{ displayText: t("home.PDFToXML.title"), icon: BsFiletypeXml, dest: "/nothing-here", tooltip: t("home.PDFToXML.desc") },
|
|
{ displayText: t("home.pdfToPDFA.title"), icon: BsFileEarmarkPdf, dest: "/nothing-here", tooltip: t("home.pdfToPDFA.desc") },
|
|
]},
|
|
{displayText: t("navbar.security"), icon: BsShieldCheck, sublist: [
|
|
{ displayText: t("home.addPassword.title"), icon: BsLock, dest: "/dashboard", tooltip: t("home.addPassword.desc") },
|
|
{ displayText: t("home.removePassword.title"), icon: BsUnlock, dest: "/nothing-here", tooltip: t("home.removePassword.desc") },
|
|
{ displayText: t("home.permissions.title"), icon: BsShieldLock, dest: "/nothing-here", tooltip: t("home.permissions.desc") },
|
|
{ displayText: t("home.watermark.title"), icon: BsDroplet, dest: "/nothing-here", tooltip: t("home.watermark.desc") },
|
|
{ displayText: t("home.certSign.title"), icon: BsAward, dest: "/nothing-here", tooltip: t("home.certSign.desc") },
|
|
{ displayText: t("home.sanitizePdf.title"), icon: BiSprayCan, dest: "/nothing-here", tooltip: t("home.sanitizePdf.desc") },
|
|
{ displayText: t("home.autoRedact.title"), icon: BsEraserFill, dest: "/nothing-here", tooltip: t("home.autoRedact.desc") },
|
|
]},
|
|
{displayText: t("navbar.other"), icon: BsCardList, sublist: [
|
|
{ displayText: t("home.ocr.title"), icon: BsSearch, dest: "/dashboard", tooltip: t("home.ocr.desc") },
|
|
{ displayText: t("home.addImage.title"), icon: BsFileEarmarkRichtext, dest: "/nothing-here", tooltip: t("home.addImage.desc") },
|
|
{ displayText: t("home.compressPdfs.title"), icon: BsFileZip, dest: "/nothing-here", tooltip: t("home.compressPdfs.desc") },
|
|
{ displayText: t("home.extractImages.title"), icon: BsImages, dest: "/nothing-here", tooltip: t("home.extractImages.desc") },
|
|
{ displayText: t("home.changeMetadata.title"), icon: BsClipboardData, dest: "/nothing-here", tooltip: t("home.changeMetadata.desc") },
|
|
{ displayText: t("home.ScannerImageSplit.title"), icon: MdOutlineScanner, dest: "/nothing-here", tooltip: t("home.ScannerImageSplit.desc") },
|
|
{ displayText: t("home.sign.title"), icon: BsVectorPen, dest: "/nothing-here", tooltip: t("home.sign.desc") },
|
|
{ displayText: t("home.flatten.title"), icon: BsArrowsCollapse, dest: "/nothing-here", tooltip: t("home.flatten.desc") },
|
|
{ displayText: t("home.repair.title"), icon: BsWrench, dest: "/nothing-here", tooltip: t("home.repair.desc") },
|
|
{ displayText: t("home.removeBlanks.title"), icon: BsFile, dest: "/nothing-here", tooltip: t("home.removeBlanks.desc") },
|
|
{ displayText: t("home.compare.title"), icon: MdOutlineBalance, dest: "/nothing-here", tooltip: t("home.compare.desc") },
|
|
{ displayText: t("home.add-page-numbers.title"), icon: Bs123, dest: "/nothing-here", tooltip: t("home.add-page-numbers.desc") },
|
|
{ displayText: t("home.auto-rename.title"), icon: BsFonts, dest: "/nothing-here", tooltip: t("home.auto-rename.desc") },
|
|
{ displayText: t("home.getPdfInfo.title"), icon: BsInfoCircle, dest: "/nothing-here", tooltip: t("home.getPdfInfo.desc") },
|
|
{ displayText: t("home.showJS.title"), icon: BsFiletypeJs, dest: "/nothing-here", tooltip: t("home.showJS.desc") },
|
|
]},
|
|
] as (NavInfoItem | NavInfoSublist)[];
|
|
|
|
|
|
|
|
return (
|
|
<Navbar expand="lg" className="bg-light">
|
|
<Container>
|
|
<LinkContainer to="/home">
|
|
<Navbar.Brand className="nav-icon">
|
|
<img src={Logo} alt="Image" className="main-icon" />
|
|
<span className="icon-text">Stirling PDF</span>
|
|
</Navbar.Brand>
|
|
</LinkContainer>
|
|
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
|
|
<Navbar.Collapse id="basic-navbar-nav">
|
|
|
|
<Nav>
|
|
{navInfo.map((ni, idx) => {
|
|
let element;
|
|
if ("dest" in ni) {
|
|
element = convertToNavLink(ni, idx);
|
|
} else {
|
|
element = convertToNavDropdown(ni, idx);
|
|
}
|
|
const out: JSX.Element[] = [];
|
|
if (idx >= 1 ) {
|
|
out.push( <div className="nav-item nav-item-separator" key={"nav-item-separator-"+idx}></div> );
|
|
}
|
|
out.push(element);
|
|
return out;
|
|
})}
|
|
</Nav>
|
|
|
|
<div className="flex-fill-remaining-space"></div>
|
|
|
|
<Nav>
|
|
<LanguagePicker />
|
|
</Nav>
|
|
|
|
</Navbar.Collapse>
|
|
</Container>
|
|
</Navbar>
|
|
);
|
|
}
|
|
|
|
export default NavBar; |