Feat: hide search

CHANGELOG.md

@@ -40,6 +40,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Corrected abbreviations for months and days of the week in Russian ([@Ayyas-RF](https://github.com/Ayyas-RF)) ([#105](https://github.com/prem-k-r/MaterialYouNewTab/pull/105))
 - Added support for Ukrainian ([@lozik4](https://github.com/lozik4)) ([#106](https://github.com/prem-k-r/MaterialYouNewTab/pull/106))
 
+### Added
+
+- New setting to hide the search section, allowing you to completely hide the search bar and search engines section.
+
 ## [v3.3](https://github.com/prem-k-r/MaterialYouNewTab/compare/v3.2...v3.3) - Nov 23, 2025
 
 ### Added

index.html

@@ -1454,6 +1454,19 @@ <h1>Material You New Tab</h1>
                                 </div>
 
                                 <div class="sectionInner">
+                                    <div class="ttcont">
+                                        <div class="texts">
+                                            <div class="bigText" id="hideSearch">Hide Search</div>
+                                            <div class="infoText" id="hideSearchInfo">
+                                                Hide the search bar and search engine sections entirely
+                                            </div>
+                                        </div>
+                                        <label class="switch">
+                                            <input id="hideSearchCheckbox" type="checkbox">
+                                            <span class="toggle"></span>
+                                        </label>
+                                    </div>
+
                                     <div class="ttcont">
                                         <div class="texts">
                                             <div class="bigText" id="micIconTitle">Hide Microphone Icon</div>

locales/en.js

@@ -68,6 +68,8 @@ const en = {
     "motivationalQuotesInfo": "Show quotes below the searchbar",
     "search_suggestions_button": "Search Suggestions",
     "search_suggestions_text": "Enable search suggestions",
+    "hideSearch": "Hide Search",
+    "hideSearchInfo": "Hide the search bar and search engine sections entirely",
 
     // Proxy
     "useproxytitletext": "Proxy Bypass",

scripts/quotes.js

@@ -285,6 +285,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const motivationalQuotesCont = document.getElementById("motivationalQuotesCont");
     const motivationalQuotesCheckbox = document.getElementById("motivationalQuotesCheckbox");
     const searchWithContainer = document.getElementById("search-with-container");
+    const hideSearchCheckbox = document.getElementById("hideSearchCheckbox")
 
     // Load states from localStorage
     hideSearchWith.checked = localStorage.getItem("showShortcutSwitch") === "true";
@@ -297,12 +298,13 @@ document.addEventListener("DOMContentLoaded", () => {
     const updateMotivationalQuotesState = () => {
         const isHideSearchWithEnabled = hideSearchWith.checked;
         const isMotivationalQuotesEnabled = motivationalQuotesCheckbox.checked;
+        const isHideSearchChecked = hideSearchCheckbox.checked;
 
         // Save state to localStorage
         localStorage.setItem("motivationalQuotesVisible", isMotivationalQuotesEnabled);
 
         // Handle visibility based on settings
-        if (!isHideSearchWithEnabled) {
+        if (!isHideSearchWithEnabled && !isHideSearchChecked) {
             quotesToggle.classList.add("inactive");
             motivationalQuotesCont.style.display = "none";
             clearQuotesStorage();
@@ -311,7 +313,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
         // Update UI visibility
         quotesToggle.classList.remove("inactive");
-        searchWithContainer.style.display = isMotivationalQuotesEnabled ? "none" : "flex";
+        searchWithContainer.style.display = (isMotivationalQuotesEnabled || isHideSearchChecked) ? "none" : "flex";
         motivationalQuotesCont.style.display = isMotivationalQuotesEnabled ? "flex" : "none";
 
         // Load quotes if motivational quotes are enabled
@@ -331,5 +333,9 @@ document.addEventListener("DOMContentLoaded", () => {
         updateMotivationalQuotesState();
     });
 
+    hideSearchCheckbox.addEventListener("change", () => {
+        updateMotivationalQuotesState();
+    });
+
     motivationalQuotesCheckbox.addEventListener("change", updateMotivationalQuotesState);
 });

scripts/search.js

@@ -381,6 +381,56 @@ hideSearchWith.addEventListener("change", (e) => {
     sortDropdown();
 });
 
+// Hiding search bar and search engine container based on saved preference
+function handleSearchVisibility(isChecked) {
+    const searchBar = document.getElementById("searchbar");
+    const searchWithContainer = document.getElementById("search-with-container");
+
+    // show/hide search bar
+    // searchBar.style.display = isChecked ? "none" : "block";
+    if (isChecked) searchBar.classList.add("hiddenByOption")
+    else searchBar.classList.remove("hiddenByOption")
+
+    // also take "showShortcutSwitch" into account while showing/hiding search with container
+    const isShortCutSwitchEnabled = localStorage.getItem("showShortcutSwitch")?.toString() === "true";
+    searchWithContainer.style.display = (isChecked || isShortCutSwitchEnabled) ? "none" : "flex"
+
+    // disable the shortcut switch if search is hidden
+    const shortcutSwitchParent = document.getElementById("hideSearchWith")?.parentElement?.parentElement
+    if (isChecked) shortcutSwitchParent.classList.add("inactive");
+    else shortcutSwitchParent.classList.remove("inactive");
+
+    // enable/disable the hide microphone icon
+    const hideMicParent = document.getElementById("micIconTitle")?.parentElement?.parentElement
+    if (isChecked) hideMicParent.classList.add("inactive");
+    else hideMicParent.classList.remove("inactive");
+
+    // uncheck and hide the search suggestion option as well
+    const searchSuggestionInput = document.getElementById("searchsuggestionscheckbox")
+    const searchSuggestionParent = searchSuggestionInput?.parentElement?.parentElement
+    if (isChecked) {
+        searchSuggestionInput.checked = false
+        searchSuggestionParent.classList.add("inactive")
+    } else searchSuggestionParent.classList.remove("inactive")
+}
+
+const hideSearchCheckbox = document.getElementById("hideSearchCheckbox")
+hideSearchCheckbox.addEventListener("change", (e) => {
+    const isChecked = e.target.checked;
+
+    handleSearchVisibility(isChecked);
+
+    // update localStorage
+    localStorage.setItem("hideSearch", isChecked);
+})
+
+// Initialize search visibility based on saved preference
+if (localStorage.getItem("hideSearch")) {
+    const isSearchHidden = localStorage.getItem("hideSearch").toString() === "true";
+    hideSearchCheckbox.checked = isSearchHidden;
+    handleSearchVisibility(isSearchHidden);
+}
+
 // Intialize shortcut switch
 if (localStorage.getItem("showShortcutSwitch")) {
     const isShortCutSwitchEnabled = localStorage.getItem("showShortcutSwitch").toString() === "true";

style.css

@@ -2005,6 +2005,19 @@ body[data-bg="wallpaper"] .searchbar {
 	margin-inline-start: 16px;
 }
 
+.searchbar.hiddenByOption {
+	display: none;
+	opacity: 1;
+}
+
+@media screen and (max-width: 500px) {
+	.searchbar.hiddenByOption {
+		display: block;
+
+		opacity: 0;
+	}
+}
+
 .searchbar-content {
 	display: flex;
 	align-items: center;