feat(sidebar): open search engine by default and add a header bar

Signed-off-by: jdev082 <jdev082@jdev.eu.org>

Author: jdev082

src/index.html

@@ -175,13 +175,16 @@ <h1>Welcome to Catalyst!</h1>
         <button onClick="togglePreferences()">Customize Catalyst</button>
     </div>
     <!-- Sidebar -->
-    <webview class="hidden" id="sidebar" src="https://www.google.com"></webview>
+    <div class="hidden" id="sidebar">
+        <h1>Sidebar</h1>
+        <webview id="sidebarwv" src="https://example.org"></webview>
+    </div>
     <!-- Webviews generated with JS -->
     <div id="webviews"></div>
     <!-- Find Window -->
     <input class="hidden" id="find" placeholder="Search..." />
     <script src="./functions.js"></script>
-    <script src="./startup.js" defer></script>
+    <script src="./startup.js"></script>
     <script src="./bookmarks.js"></script>
     <script src="./listeners.js"></script>
 </body>

src/startup.js

@@ -24,8 +24,16 @@ if (localStorage.getItem('bookmarks') < 1) {
 native.getThemes();
 
 var sb = document.getElementById('sidebar')
+var sbwv = document.getElementById('sidebarwv')
 if (localStorage.getItem('sbside') == null || localStorage.getItem('sbside') == 1) {
     sb.style.right = 0;
 } else {
     sb.style.left = 0;
-}
+}
+
+var engine = localStorage.getItem('engine')
+
+sbwv.addEventListener('did-attach', () => {
+    sbwv.src = engineurls[engine];
+})
+

styles.css

@@ -480,6 +480,7 @@ input[type="checkbox"]:checked::after {
 }
 
 #sidebar {
+    background-color: var(--secondary);
     min-width: 400px;
     width: 30%;
     height: 100%;
@@ -488,6 +489,10 @@ input[type="checkbox"]:checked::after {
     z-index: 0;
 }
 
+#sidebarwv {
+    height: 95%;
+}
+
 webview {
     background-color: #ffffff;
     scroll-behavior: smooth;