Inquiry about implementing multi-level navigation bars using GrapesJS with Next.js

[nikita-fxbytes]

Hello,

I hope this message finds you well.

I'm currently exploring GrapesJS in conjunction with Next.js for building web pages, and I'm wondering if it's possible to create multi-level navigation bars using the page builder within this setup. Could you please provide guidance or resources on how to achieve this within the GrapesJS framework, specifically when integrated with Next.js?

Thank you for your time and assistance.

my Code is

'use client'
import React, { useEffect, useRef, useState } from 'react';
import grapesjs, { Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
import basicBlocks from 'grapesjs-blocks-basic';
import plugin from 'grapesjs-navbar';

const GrapesJSComponent = () => {
const editorRef = useRef(null);
const [editor, setEditor] = useState<Editor | null>(null);
const [d, setD] = useState('')

useEffect(() => {
if (editorRef.current) {
const s: Editor = grapesjs.init({
container: editorRef.current,
plugins: [ basicBlocks, plugin],
components: '

Hello, World!

',
storageManager: true,
});
setEditor(s);
}
}, []);

const handleSave = () => {
if (editor) {
const htmlContent = editor?.DomComponents?.getWrapper()?.toHTML();
const cssContent = editor?.CssComposer?.getAll();
const styleTag = <style>${cssContent}</style>;
const htmlWithStyle = ${htmlContent}\n${styleTag};
setD(htmlWithStyle)
console.log(htmlWithStyle);

  // Save the htmlWithStyle or any data you want
  // e.g., localStorage.setItem('gjsProject', htmlWithStyle);
}

};
useEffect(()=>{
if (editor) {
const htmlContent = editor?.DomComponents?.getWrapper()?.toHTML();
const cssContent = editor?.CssComposer?.getAll();
const styleTag = <style>${cssContent}</style>;
const htmlWithStyle = ${htmlContent}\n${styleTag};
setD(htmlWithStyle)
console.log(htmlWithStyle);

  // Save the htmlWithStyle or any data you want
  // e.g., localStorage.setItem('gjsProject', htmlWithStyle);
}

},[d])

return (
<>
<div dangerouslySetInnerHTML={{ __html: d }}>

  <button onClick={handleSave}>Save</button>
  <div ref={editorRef} />
</>

);
};

export default GrapesJSComponent;