refactor: hide network searchbar when not required

NodeSecure · Nov 30, 2024 · 6ba5b71 · 6ba5b71
1 parent 778a0e4
commit 6ba5b71
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/public/components/navigation/navigation.js b/public/components/navigation/navigation.js
@@ -73,6 +73,11 @@ export class ViewNavigation {
     selectedNav.classList.add("active");
     this.setAnchor(menuName);
 
+    const searchbar = document.getElementById("searchbar");
+    if (searchbar) {
+      searchbar.style.display =  menuName === "network--view" ? "flex" : "none";
+    }
+
     this.activeMenu = selectedNav;
   }
 

diff --git a/public/components/searchbar/searchbar.css b/public/components/searchbar/searchbar.css
@@ -3,6 +3,7 @@
   display: flex;
   height: inherit;
   box-sizing: border-box;
+  border-left: 2px solid #0f041a;
 }
 
 #searchbar>* {
@@ -197,7 +198,7 @@ div.search-result-pannel .package+.package {
 }
 
 #search-nav {
-  z-index: 200;
+  z-index: 30;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -209,6 +210,7 @@ div.search-result-pannel .package+.package {
   box-sizing: border-box;
   background: var(--primary);
   transform: skewX(-20deg);
+  box-shadow: 2px 1px 10px #26107f7a;
 }
 
 #search-nav .search-result-pannel .package {
@@ -259,6 +261,10 @@ div.search-result-pannel .package+.package {
   background: linear-gradient(to right,  rgba(55,34,175,1) 0%,rgba(87,74,173,1) 50%,rgb(59, 110, 205) 100%);
 }
 
+#search-nav .packages>.package.active>b {
+  background: var(--secondary);
+}
+
 #search-nav .packages>.package.active>.remove {
   display: block;
 }
@@ -282,17 +288,16 @@ div.search-result-pannel .package+.package {
   background: var(--secondary-darker);
   cursor: pointer;
   padding: 0 7px;
-  border-right: 2px solid #0f041a;
-  transition: 0.5s all ease;
+  transition: 0.2s all ease;
   color: #def7ff;
 }
 
 #search-nav .add:hover {
-  background: #1566b6;
+  background: var(--secondary);
   cursor: pointer;
 }
 
-#search-nav .add>p {
+#search-nav .add>i {
   transform: skewX(20deg);
 }
 

diff --git a/public/core/search-nav.js b/public/core/search-nav.js
@@ -48,7 +48,9 @@ export function initSearchNav(data, nsn, secureDataSet) {
 
   const plusButtonElement = document.createElement("button");
   plusButtonElement.classList.add("add");
-  plusButtonElement.appendChild(createDOMElement("p", { text: "+" }));
+  plusButtonElement.appendChild(createDOMElement("p", {
+    text: "+"
+  }));
   plusButtonElement.addEventListener("click", () => {
     window.navigation.setNavByName("search--view");
   });

diff --git a/views/index.html b/views/index.html
@@ -680,7 +680,7 @@ <h2><i class="icon-keyboard"></i>[[=z.token('settings.shortcuts.title')]]</h2>
 
 <template id="searchbar-tpl">
   <div id="searchbar">
-    <i class="icon-search"></i>
+    <i class="icon-globe-alt-outline"></i>
     <div class="search-items"></div>
     <input type="text" placeholder="[[=z.token('searchbar_placeholder')]]" id="search-bar-input" autocomplete="off"
       autocorrect="off" autocapitalize="off" spellcheck="false"></input>