[mod] simple theme: collaps/expand elements in the sidebar

Make elements in the sidebar collapse able.  Except infoboxes all elements in
the sidebar are collapsed by default.

By folding out the sidebar elements, the UI looks less cluttered.  Especially on
small devices like smartphones, where the sidebar is above the results list, the
UX should be improved [1].

[1] https://github.com/searxng/searxng/issues/2140

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

1 files changed, 10 insertions, 13 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 962dbeba0..4e2f71015 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -589,8 +589,10 @@ article[data-vim-selected].category-social {
   }
 }
 
+#infoboxes .title,
 #suggestions .title,
 #search_url .title,
+#engines_msg .title,
 #apis .title {
   margin: 2em 0 0.5em 0;
   color: var(--color-base-font);
@@ -684,6 +686,14 @@ article[data-vim-selected].category-social {
   }
 }
 
+#apis {
+  input {
+    font-size: 0.9em;
+    margin: 0 10px 0 0;
+    .show-content-button;
+  }
+}
+
 #search_url {
   margin-top: 8px;
 
@@ -754,11 +764,6 @@ article[data-vim-selected].category-social {
   border: none;
 }
 
-#apis {
-  margin-top: 8px;
-  clear: both;
-}
-
 #backToTop {
   border: 1px solid var(--color-backtotop-border);
   margin: 0;
@@ -836,14 +841,6 @@ article[data-vim-selected].category-social {
     }
   }
 
-  #apis {
-    display: none;
-  }
-
-  #search_url {
-    display: none;
-  }
-
   .result {
     .thumbnail {
       max-width: 98%;