Supporting WebView in Tauri 2.0 in main window with WebView being one of the interacting UI fragments of the main window

[amitAnvay]

We are building a Tauri App with a left Side nav bar and right main content area. We have below use cases:

1. Selecting one of the side nav bar item should load conent on the main content area with data from a website in webview.
2. Any link on the conent area of the app should load data in a web view.
   I created a webView on the main window with Tauri 2.0 using WebView and WebViewWindow API. When the web view is shown the Tauri app is not able to respond to user clicks on the side nav.

import { Webview } from "@tauri-apps/api/webview";
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";

Reference: https://v2.tauri.app/reference/javascript/api/namespacewebview/

[amitAnvay]

We were able to achive showing a webView within the main window by creating a webView with size that fits in the body section of the main window. Showing and hiding the web view based on interactions.

        const appWindow = await Window.getByLabel('main');
        const webview = new Webview(appWindow, 'web', {
            url: 'https://my.it.a2z.com',
            x: NAV_BAR_WIDTH + 20,
            y: 30,
            width: window.innerWidth - (NAV_BAR_WIDTH - 90),
            height: window.innerHeight
        });
      await webview.once('tauri://created', function () {
            console.log('Webview successfully created');
           await webViewWindow.show();
           await webViewWindow.setSize(new LogicalSize(window.innerWidth - NAV_BAR_WIDTH, window.innerHeight));
        });