Added localisation support with en and ar
This commit is contained in:
Saud Fatayerji
@@ -1,12 +1,19 @@
|
||||
|
||||
import { AiOutlineMergeCells, AiOutlineSplitCells } from "react-icons/ai";
|
||||
import { BiCrop } from "react-icons/bi";
|
||||
import {
|
||||
BsTools, BsSortNumericDown, BsArrowClockwise, BsFileEarmarkX, BsLayoutSplit, BsPalette, BsArrowUpSquare, Bs1Square, BsFileEarmarkPdf,
|
||||
BsArrowLeftRight, BsFileEarmarkImage, BsFileEarmark, BsFiletypeHtml, BsLink, BsFiletypeMd, BsFileEarmarkWord, BsFiletypePpt, BsFiletypeTxt,
|
||||
BsFiletypeXml
|
||||
BsFiletypeXml, BsLock, BsUnlock, BsShieldLock, BsDroplet, BsAward, BsEraserFill, BsCardList, BsClipboardData, BsFile, BsFileEarmarkRichtext,
|
||||
BsFileZip, BsFiletypeJs, BsFonts, BsImages, BsInfoCircle, BsSearch, BsShieldCheck, BsVectorPen, BsWrench
|
||||
} from "react-icons/bs";
|
||||
import { AiOutlineMergeCells, AiOutlineSplitCells } from "react-icons/ai";
|
||||
import { GiScales } from "react-icons/gi";
|
||||
import { LuLayoutGrid } from "react-icons/lu";
|
||||
import { MdOutlineScanner } from "react-icons/md";
|
||||
import { PiArrowsInLineVertical } from "react-icons/pi";
|
||||
import { SlSizeFullscreen } from "react-icons/sl";
|
||||
import { BiCrop } from "react-icons/bi";
|
||||
import { TfiSpray } from "react-icons/tfi";
|
||||
import { TbNumbers } from "react-icons/tb";
|
||||
import { IconType } from "react-icons";
|
||||
|
||||
import Container from 'react-bootstrap/Container';
|
||||
@@ -14,7 +21,9 @@ 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 "./LanguagePicker";
|
||||
import Logo from '../../public/stirling-pdf-logo.svg'
|
||||
import './NavBar.css';
|
||||
|
||||
@@ -36,53 +45,107 @@ function convertToNavLink(item: NavInfoItem, index: number) {
|
||||
function convertToNavDropdownItem(item: NavInfoItem | null) {
|
||||
if (item == null)
|
||||
return <NavDropdown.Divider />;
|
||||
return <LinkContainer to={item.dest}><NavDropdown.Item className="nav-icon" title={item.tooltip}><item.icon/><span>{item.displayText}</span></NavDropdown.Item></LinkContainer>;
|
||||
|
||||
return (
|
||||
<LinkContainer to={item.dest}>
|
||||
<NavDropdown.Item className="nav-icon" title={item.tooltip}>
|
||||
<item.icon/>
|
||||
<span>{item.displayText}</span>
|
||||
</NavDropdown.Item>
|
||||
</LinkContainer>
|
||||
);
|
||||
}
|
||||
function convertToNavDropdown(sublist: NavInfoSublist) {
|
||||
var myTitle = <>
|
||||
<span className="nav-icon">
|
||||
<sublist.icon/>
|
||||
<span>{sublist.displayText}</span>
|
||||
</span>
|
||||
</>;
|
||||
|
||||
return (
|
||||
<NavDropdown title={<><span className="nav-icon"><sublist.icon/><span>{sublist.displayText}</span></span></>} id="basic-nav-dropdown">
|
||||
<NavDropdown title={myTitle} id="basic-nav-dropdown">
|
||||
{sublist.sublist.map(convertToNavDropdownItem)}
|
||||
</NavDropdown>
|
||||
);
|
||||
}
|
||||
|
||||
function NavBar() {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
/* A "layout route" is a good place to put markup you want to
|
||||
share across all the pages on your site, like navigation. */
|
||||
function Layout() {
|
||||
const navInfo = [
|
||||
{displayText: "PDF Multi Tool", icon: BsTools, dest: "/home", tooltip: "Merge, Rotate, Rearrange, and Remove pages"},
|
||||
{displayText: "Page Operations", icon: BsFileEarmarkPdf, sublist: [
|
||||
{ displayText: "Merge", icon: AiOutlineMergeCells, dest: "/dashboard", tooltip: "Easily merge multiple PDFs into one." },
|
||||
{ displayText: "Split", icon: AiOutlineSplitCells, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Organise", icon: BsSortNumericDown, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Rotate", icon: BsArrowClockwise, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Remove", icon: BsFileEarmarkX, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Multi-Page Layout", icon: LuLayoutGrid, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Adjust page size/scale", icon: SlSizeFullscreen, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Auto Split Pages", icon: BsLayoutSplit, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Adjust Colors/Contrast", icon: BsPalette, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Crop PDF", icon: BiCrop, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "Extract page(s)", icon: BsArrowUpSquare, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{ displayText: "PDF to Single Large Page", icon: Bs1Square, dest: "/nothing-here", tooltip: "fghjgfhj" },
|
||||
{displayText: t('multiTool.title'), icon: BsTools, dest: "/home", tooltip: t('home.multiTool.desc')},
|
||||
{displayText: t('navbar.pageOps'), icon: BsFileEarmarkPdf, sublist: [
|
||||
{ displayText: t('home.merge.title'), icon: AiOutlineMergeCells, dest: "/dashboard", 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: LuLayoutGrid, dest: "/nothing-here", tooltip: t('home.pageLayout.desc') },
|
||||
{ displayText: t('home.scalePages.title'), icon: SlSizeFullscreen, 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: "Convert", icon: BsArrowLeftRight, sublist: [
|
||||
{ displayText: "Image to PDF", icon: BsFileEarmarkImage, dest: "/dashboard" },
|
||||
{ displayText: "File to PDF", icon: BsFileEarmark, dest: "/nothing-here" },
|
||||
{ displayText: "HTML to PDF", icon: BsFiletypeHtml, dest: "/nothing-here" },
|
||||
{ displayText: "URL/Website To PDF", icon: BsLink, dest: "/nothing-here" },
|
||||
{ displayText: "Markdown to PDF", icon: BsFiletypeMd, dest: "/nothing-here" },
|
||||
{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: "/nothing-here", 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: "PDF to Image", icon: BsFileEarmarkImage, dest: "/nothing-here" },
|
||||
{ displayText: "PDF to Word", icon: BsFileEarmarkWord, dest: "/nothing-here" },
|
||||
{ displayText: "PDF to Presentation", icon: BsFiletypePpt, dest: "/nothing-here" },
|
||||
{ displayText: "PDF to RTF (Text)", icon: BsFiletypeTxt, dest: "/nothing-here" },
|
||||
{ displayText: "PDF to HTML", icon: BsFiletypeHtml, dest: "/nothing-here" },
|
||||
{ displayText: "PDF to XML", icon: BsFiletypeXml, dest: "/nothing-here" },
|
||||
{ displayText: "PDF to PDF/A", icon: BsFileEarmarkPdf, dest: "/nothing-here" },
|
||||
{ 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: TfiSpray, 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: PiArrowsInLineVertical, 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: GiScales, dest: "/nothing-here", tooltip: t('home.compare.desc') },
|
||||
{ displayText: t('home.add-page-numbers.title'), icon: TbNumbers, 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 Array<NavInfoItem | NavInfoSublist>;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Navbar expand="lg" className="bg-light">
|
||||
<Container>
|
||||
@@ -94,7 +157,7 @@ function Layout() {
|
||||
</LinkContainer>
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="me-auto">
|
||||
<Nav>
|
||||
{navInfo.map((ni, idx) => {
|
||||
var element;
|
||||
if ('dest' in ni) {
|
||||
@@ -112,10 +175,14 @@ function Layout() {
|
||||
}
|
||||
})}
|
||||
</Nav>
|
||||
<div className="flex-fill-remaining-space"></div>
|
||||
<Nav>
|
||||
<LanguagePicker />
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
export default NavBar;
|
||||
Reference in New Issue
Block a user