Question: How to use a public navbar component on Multiple pages

[Easonlyw]

I have a navbar component, it should need to be displayed on all these pages, when clicking on the navbar's menu will switch the pages. Since each page has its own navbar, I would like to have a global-like navbar where changes would be applied to all pages.
With multiple page, I want to generate a separate html file for each page. Somebody help me!

  // init editor
   const editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      showOffsets: false,
      assetManager: {
        embedAsBase64: true,
      },
      showToolbar: false,
      showDevices: false,
      plugins: [
        (editor) =>
          Navbar(editor, {
            id: NAVBAR_ID,
            classPrefix: "navbar",
            label: "Navbar",
          }),
      ],
      pageManager: {
        pages: [
             {
                  id: "home",
                  component: HomeComponents,
              },
              {
                  id: "agenda",
                  component: AgendaComponents,
              },
              {
                  id: "speaker",
                  component: SpeakerComponents,
              },
              {
                  id: "sponsor",
                  component: SponsorComponents,
              },
              {
                  id: "photos",
                  component: PhotosComponents,
              }
           ]
      },
    });
    
    // Click on the menu to switch the editing page
    editor.on("component:selected", (component) => {
      const activeMenuItemId = component.get("attributes")["data-gjs"];

      if (
        !tabs.includes(activeMenuItemId) ||
        activeMenuItemId === pm.getSelected().attributes.id
      )
        return;

      pm.select(activeMenuItemId);
    });

[artf]

#4317