Stirling-PDF/src/main/resources/templates/fragments/navbar.html

<div th:fragment="navbar" class="mx-auto">
<script src="js/languageSelection.js"></script>

<script th:inline="javascript">
	const currentVersion =  /*[[${@appVersion}]]*/ '';
	const noFavourites =  /*[[#{noFavourites}]]*/ '';
</script>
<script th:src="@{js/githubVersion.js}"></script>

<link rel="stylesheet" href="css/navbar.css">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container ">

            <a class="navbar-brand" href="#" th:href="@{/}" >
                <img class="main-icon" src="favicon.svg" alt="icon">
                <span class="icon-text"  th:text="${@navBarText}"></span>
            </a>


            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">

                <ul class="navbar-nav me-auto flex-nowrap">

                    <li class="nav-item">
                        <a class="nav-link" href="#" th:href="@{multi-tool}" th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
                            <img class="icon" src="images/tools.svg" alt="icon">
                            <span class="icon-text"  th:text="#{home.multiTool.title}"></span>
                        </a>
                    </li>
                    <!--<li class="nav-item">
                        <a class="nav-link" href="#" th:href="@{pipeline}" th:classappend="${currentPage}=='pipeline' ? 'active' : ''" th:title="#{home.pipeline.desc}">
                            <img class="icon" src="images/pipeline.svg" alt="icon">
                            <span class="icon-text"  th:text="#{home.pipeline.title}"></span>
                        </a>
                    </li>-->

<li class="nav-item nav-item-separator"></li>
    <li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' ? 'active' : ''">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="icon" src="images/file-earmark-pdf.svg" alt="icon">
        <span class="icon-text"  th:text="#{navbar.pageOps}"></span>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <!-- Existing menu items -->
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'images/union.svg', 'home.merge.title', 'home.merge.desc', 'merge.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'images/layout-split.svg', 'home.split.title', 'home.split.desc', 'split.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'pdf-organizer', 'images/sort-numeric-down.svg', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'rotate-pdf', 'images/arrow-clockwise.svg', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'remove-pages', 'images/file-earmark-x.svg', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags')}"></div>
		<div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'multi-page-layout', 'images/page-layout.svg', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags')}"></div>
		<div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'scale-pages', 'images/scale-pages.svg', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags')}"></div>
		<div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'auto-split-pdf', 'images/layout-split.svg', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('adjust-contrast', 'images/adjust-contrast.svg', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('crop', 'images/crop.svg', 'home.crop.title', 'home.crop.desc', 'crop.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-page', 'images/extract.svg', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'images/single-page.svg', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags')}"></div>


    </div>
</li>
<li class="nav-item nav-item-separator"></li>
                    <li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <img class="icon" src="images/arrow-left-right.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
                        <span class="icon-text"  th:text="#{navbar.convert}"></span>
                    </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <!-- Existing menu items -->
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'images/image.svg', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'images/file.svg', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('html-to-pdf', 'images/html.svg', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('url-to-pdf', 'images/url.svg', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags')}"></div>
							<div th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'images/markdown.svg', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags')}"></div>
                            <hr class="dropdown-divider">
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'images/image.svg', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'images/file-earmark-word.svg', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'images/file-earmark-ppt.svg', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'images/filetype-txt.svg', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'images/filetype-html.svg', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'images/filetype-xml.svg', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'images/file-earmark-pdf.svg', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags')}"></div>




                        </div>
                    </li>

<li class="nav-item nav-item-separator"></li>

                  <li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' ? 'active' : ''">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="icon" src="images/shield-check.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text"  th:text="#{navbar.security}"></span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'images/lock.svg', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'images/unlock.svg', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'images/shield-lock.svg', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'images/droplet.svg', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'images/award.svg', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sanitize-pdf', 'images/sanitize.svg', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags')}"></div>
						<div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-redact', 'images/eraser-fill.svg', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags')}"></div>
                    </div>
                </li>

                  <li class="nav-item nav-item-separator"></li>
                    <li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
                        <span class="icon-text"  th:text="#{navbar.other}"></span>

                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        	<!--<div th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'images/pipeline.svg', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags')}"></div> -->
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'images/search.svg', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'images/file-earmark-richtext.svg', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'images/file-zip.svg', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'images/images.svg', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'images/clipboard-data.svg', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'images/scanner.svg', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'images/sign.svg', 'home.sign.title', 'home.sign.desc', 'sign.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'images/flatten.svg', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'images/wrench.svg', 'home.repair.title', 'home.repair.desc', 'repair.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'images/blank-file.svg', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'images/scales.svg', 'home.compare.title', 'home.compare.desc', 'compare.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', 'images/add-page-numbers.svg', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-rename', 'images/fonts.svg', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags')}"></div>
                        	<div th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'images/info.svg', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags')}"></div>
                        	<div th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'images/js.svg', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags')}"></div>
                        </div>
                    </li>


                </ul>
                <ul class="navbar-nav  flex-nowrap">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="navbar-icon" src="images/star.svg" alt="icon" width="24" height="24">
                        </a>
                        <div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown">
                            <!-- Dropdown items will be added here by JavaScript -->
                        </div>
                    </li>

                    <th:block th:insert="~{fragments/langAndDarkMode :: langAndDarkMode}"></th:block>


                    <li class="nav-item">
                        <!-- Settings Button -->
                        <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
                            <img class="navbar-icon" src="images/gear.svg" alt="icon" width="24" height="24">
                        </a>

                    </li>

             <!-- Search Button and Search Bar -->
<li class="nav-item position-relative">
    <a href="#" class="nav-link" id="search-icon">
        <img class="navbar-icon" src="images/search.svg" alt="icon" width="24" height="24">
    </a>
    <!-- Search Bar -->
    <div class="collapse position-absolute" id="navbarSearch">
        <form class="d-flex p-2 bg-white border search-form" id="searchForm">
            <input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
        </form>
        <!-- Search Results -->
        <div id="searchResults" class="border p-2 bg-white search-results"></div>
    </div>
</li>
<style>
#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 */
}

</style>

                </ul>


            </div>

        </div>
        <script src="js/favourites.js"></script>
        <script src="js/search.js"></script>
    </nav>

	<div th:insert="~{fragments/errorBannerPerPage.html :: errorBannerPerPage}"></div>
    <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content dark-card">
            <div class="modal-header">
                <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
                    <a href="https://github.com/sponsors/Frooodle" target="_blank">
                        <button type="button" class="btn btn-sm btn-outline-primary">Sponsor Stirling-PDF</button>
                    </a>
                    <a href="swagger-ui/index.html" target="_blank">
                        <button type="button" class="btn btn-sm btn-outline-primary">API</button>
                    </a>
                    <a href="https://github.com/Frooodle/Stirling-PDF/releases" target="_blank">
					    <button type="button" class="btn btn-sm btn-outline-primary" id="update-btn" th:utext="#{settings.update}"></button>
					</a>
                </div>
                <div class="mb-3">
                    <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
                    <select class="form-control" id="downloadOption">
                        <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
                        <option value="newWindow" th:utext="#{settings.downloadOption.2}"></option>
                        <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
                    <input type="range" class="form-range" min="1" max="9" step="1" id="zipThreshold" value="4">
                    <span id="zipThresholdValue" class="ms-2"></span>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="boredWaiting">
                    <label class="form-check-label" for="boredWaiting" th:text="#{bored}"></label>
                </div>
                <a th:if="${@loginEnabled}" href="account" target="_blank">
                    <button type="button" class="btn btn-sm btn-outline-primary" th:text="#{settings.accountSettings}">Account Settings</button>
                </a>
            </div>
            <div class="modal-footer">
            	<a th:if="${@loginEnabled}" href="/logout">
	                <button type="button" class="btn btn-danger" th:text="#{settings.signOut}">Sign Out</button>
	            </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
            </div>
        </div>
    </div>
</div>



<script src="js/settings.js"></script>



</div>