Changing url in top searchbar based on view

index.js

@@ -3,15 +3,13 @@ const path = require('path');
 const cheerio = require('cheerio');
 const mitt = require('mitt');
 
-const emitter = mitt();
-
 const winSize = { width: 1024, height: 600 };
 
 function createWindow() {
    const win = new BrowserWindow({
       width: winSize.width,
       height: winSize.height,
-      title: 'Yomea DEV',
+      title: 'Yomea Preview Build',
       frame: false,
       center: true,
       movable: false,
@@ -21,12 +19,7 @@ function createWindow() {
          contextIsolation: false
       }
    });
-
-   const view = new WebContentsView();
-   view.webContents.loadURL('about:blank');
-   win.setContentView(view);
-   // view.webContents.openDevTools({ mode: 'undocked' });
-
+
    const topbar = new BrowserWindow({
       parent: win,
       width: winSize.width,
@@ -45,28 +38,37 @@ function createWindow() {
    topbar.webContents.loadFile('./public/index.html');
    topbar.setPosition(win.getPosition()[0], win.getPosition()[1]);
    // topbar.webContents.openDevTools({ mode: 'undocked' });
-
+   
    topbar.on('move', () => {
       win.setPosition(topbar.getPosition()[0], topbar.getPosition()[1]);
    });
 
+   const view = new WebContentsView();
+   // view.setBounds({ width: winSize.width, height: winSize.height - 57, x: 0, y: 57 });
+   view.webContents.loadURL('about:blank');
+   view.webContents.on('did-navigate', () => {
+      const url = view.webContents.getURL();
+      if(url.includes('about:blank')) return;
+      topbar.webContents.send('navigate', url);
+   });
+   win.setContentView(view);
+   // view.webContents.openDevTools({ mode: 'undocked' });
+
    win.on('resize', () => {
       console.log(win.getSize());
       topbar.setSize(...win.getSize());
       console.log(win.getSize());
    });
-
+   
    ipcMain.on('load-page', (_, url) => {
-      console.log(url);
-      const newView = new WebContentsView();
-      newView.webContents.loadURL(url);
-      win.setContentView(newView);
+      view.webContents.loadURL(url);
+      win.setContentView(view);
    });
-
+   
    ipcMain.on('close-app', () => win.close());
    ipcMain.on('max-app', () => win.maximize());
    ipcMain.on('min-app', () => win.minimize());
-
+   
    topbar.on('close', () => app.quit()); 
 }
 

preload.js

@@ -1,13 +1,14 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer');
 const superagent = require('superagent');
 const cheerio = require('cheerio');
+const mitt = require('mitt');
 
 contextBridge.exposeInMainWorld('electron', {
    loadPage: url => ipcRenderer.send('load-page', url),
    scrapURL: url => {
       fetch(url).then(html => {
          console.log(cheerio.load(html));
-      })
+      });
    },
    closeApp: () => ipcRenderer.send('close-app', {})
 });
@@ -20,4 +21,9 @@ contextBridge.exposeInMainWorld('webSupplier', {
          }).catch(reject);
       });
    }
+});
+
+contextBridge.exposeInMainWorld('emitter', {
+   send: (channel, data) => ipcRenderer.send,
+   recieve: (channel, callback) => ipcRenderer.on(channel, (_, ...data) => callback(...data))
 });

public/script.js

@@ -1,35 +1,47 @@
 Vue.createApp({
-    data() {
-        return {
-            url: '',
-            opened: {},
-            focusedSearchBar: false
-        }
-    },
-    methods: {
-        async loadURL({ key, target }) {
-            if(this.url.replace(/ /g, '').length == 0 || key != 'Enter') return;
+   data() {
+      return {
+         url: '',
+         opened: {},
+         focusedSearchBar: false
+      }
+   },
+   methods: {
+      async loadURL({ key, target }) {
+         if(this.url.replace(/ /g, '').length == 0 || key != 'Enter') return;
 
-            if(this.url == 'about:blank') {
-                window.electron.loadPage(this.url);
-                this.url = '';
-                this.opened = {};
-                target.blur();
-                return;
-            }
-
-            if(!this.url.startsWith('https://') || this.url.startsWith('http://')) this.url = 'https://' + this.url;
+         if(this.url.includes('about:blank')) {
+            window.electron.loadPage(this.url);
+            this.url = '';
+            this.opened = {};
             target.blur();
+            return;
+         }
 
-            window.electron.loadPage(this.url);
-            this.opened.title = await window.webSupplier.getTitle(this.url);
-            this.opened.url = this.url;
-        },
-        isHTTPSPage() {
-            return this.url.startsWith('https://');
-        },
-        closeApp() {
-            window.electron.closeApp();
-        }
-    }
+         if(!this.url.startsWith('https://') || this.url.startsWith('http://')) this.url = 'https://' + this.url;
+         target.blur();
+
+         window.electron.loadPage(this.url);
+         this.opened.title = await window.webSupplier.getTitle(this.url);
+         this.opened.url = this.url;
+      },
+      isHTTPSPage() {
+         return this.url.startsWith('https://');
+      },
+      closeApp() {
+         window.electron.closeApp();
+      }
+   },
+   mounted() {
+      window.emitter.recieve('navigate', async url => {
+         this.url = url;
+         this.opened.title = await window.webSupplier.getTitle(this.url);
+         this.opened.url = url;
+      });
+   },
+   watch: {
+      url(newValue, oldValue) {
+         if(newValue.endsWith('/')) this.url = this.url.substring(0, this.url.length - 1);
+      }
+   },
 }).mount('nav');

public/styles.css

@@ -31,6 +31,7 @@ nav > #openedtab {
     font-size: .85rem;
     font-weight: 600;
     position: absolute;
+    max-width: 20%;
     left: 1rem;
 }
 
@@ -56,9 +57,10 @@ nav > #searchbar {
 }
 
 nav > #searchbar > i {
-    margin: -1px 0 0 .5rem;
+    margin: 0 0 0 .5rem;
     color: #888;
     position: absolute;
+    transform: scale(.9);
 }
 
 nav > #searchbar > input {