Replaced default template with new S-PDF template. added navbar
This commit is contained in:
Saud Fatayerji
135
client-tauri/src/components/NavBar.css
Normal file
135
client-tauri/src/components/NavBar.css
Normal file
@@ -0,0 +1,135 @@
|
||||
#search-icon i {
|
||||
font-size: 24px; /* Adjust this to your desired size */
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
#search-icon:hover i {
|
||||
color: #666; /* Adjust this to your hover color */
|
||||
}
|
||||
|
||||
#navbarSearch {
|
||||
transition: all 0.3s;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
#navbarSearch.show {
|
||||
max-height: 300px; /* Adjust this to your desired max height */
|
||||
}
|
||||
|
||||
.search-input {
|
||||
transition: border 0.3s, box-shadow 0.3s;
|
||||
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #666; /* Adjust this to your focus color */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
max-width: 300px; /* Adjust to your preferred width */
|
||||
transition: height 0.3s ease; /* Smooth height transition */
|
||||
}
|
||||
|
||||
/* Set a fixed height and styling for each search result item */
|
||||
.search-results a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px; /* space between icon and text */
|
||||
height: 40px; /* Adjust based on your design */
|
||||
overflow: hidden; /* Prevent content from overflowing */
|
||||
white-space: nowrap; /* Prevent text from wrapping to next line */
|
||||
text-overflow: ellipsis; /* Truncate text if it's too long */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#navbarSearch {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#searchForm {
|
||||
width: 200px; /* Adjust this value as needed */
|
||||
}
|
||||
|
||||
/* Style the search results to match the navbar */
|
||||
#searchResults {
|
||||
max-height: 200px; /* Adjust this value as needed */
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#searchResults .dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 50px; /* Fixed height */
|
||||
overflow: hidden; /* Hide overflow */
|
||||
}
|
||||
|
||||
#searchResults .icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#searchResults .icon-text {
|
||||
display: inline;
|
||||
overflow: hidden; /* Hide overflow */
|
||||
text-overflow: ellipsis; /* Add ellipsis for long text */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nav-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
/*
|
||||
.icon+.icon {
|
||||
margin-left: -4px;
|
||||
}
|
||||
*/
|
||||
.nav-icon span {
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.nav-item-separator {
|
||||
position: relative;
|
||||
margin: 0 4px; /* Adjust the margin as needed */
|
||||
}
|
||||
|
||||
.nav-item-separator::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10%; /* Adjust the top and bottom margins as needed */
|
||||
bottom: 10%;
|
||||
width: 1px;
|
||||
background-color: #ccc; /* Adjust the color as needed */
|
||||
}
|
||||
|
||||
.navbar-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
@@ -1,18 +1,121 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
BsTools, BsSortNumericDown, BsArrowClockwise, BsFileEarmarkX, BsLayoutSplit, BsPalette, BsArrowUpSquare, Bs1Square, BsFileEarmarkPdf,
|
||||
BsArrowLeftRight, BsFileEarmarkImage, BsFileEarmark, BsFiletypeHtml, BsLink, BsFiletypeMd, BsFileEarmarkWord, BsFiletypePpt, BsFiletypeTxt,
|
||||
BsFiletypeXml
|
||||
} from "react-icons/bs";
|
||||
import { AiOutlineMergeCells, AiOutlineSplitCells } from "react-icons/ai";
|
||||
import { LuLayoutGrid } from "react-icons/lu";
|
||||
import { SlSizeFullscreen } from "react-icons/sl";
|
||||
import { BiCrop } from "react-icons/bi";
|
||||
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 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: Array<NavInfoItem>;
|
||||
}
|
||||
|
||||
function convertToNavLink(item: NavInfoItem, index: number) {
|
||||
return <LinkContainer key={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) {
|
||||
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>;
|
||||
}
|
||||
function convertToNavDropdown(sublist: NavInfoSublist) {
|
||||
return (
|
||||
<NavDropdown title={<><span className="nav-icon"><sublist.icon/><span>{sublist.displayText}</span></span></>} id="basic-nav-dropdown">
|
||||
{sublist.sublist.map(convertToNavDropdownItem)}
|
||||
</NavDropdown>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function NoMatch() {
|
||||
/* 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: "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" },
|
||||
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" },
|
||||
]},
|
||||
] as Array<NavInfoItem | NavInfoSublist>;
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/about">About</Link></li>
|
||||
<li><Link to="/dashboard">Dashboard</Link></li>
|
||||
<li><Link to="/nothing-here">Nothing Here</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<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 className="me-auto">
|
||||
{navInfo.map((ni, idx) => {
|
||||
var element;
|
||||
if ('dest' in ni) {
|
||||
element = convertToNavLink(ni, idx);
|
||||
} else {
|
||||
element = convertToNavDropdown(ni);
|
||||
}
|
||||
if (idx >= 1 ) {
|
||||
return (<>
|
||||
<li className="nav-item nav-item-separator"></li>
|
||||
{element}
|
||||
</>)
|
||||
} else {
|
||||
return element;
|
||||
}
|
||||
})}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default NoMatch;
|
||||
export default Layout;
|
||||
Reference in New Issue
Block a user