Personal project issue- How do I make my sidebar option

I’m really struggling on making my add a page option work the way it’s supposed to, I don’t know where to start with my html, css or javascript structure , I have tried following tutorials and tweaking them to my project but none of them work.
Ok so my desired result is to be able to click on it and a modal-style box pops up with options one of them being that you can resize it to be full screen and then it automatically becomes a new page and opens a new file.
So something like this


I honestly just need some help on where to start because whichever modal tutorial I follow seriously doesn’t work.
So where would I start in terms of just making it so a box shows when I click on the add a page option (That box being a div box which I can customise and fill with content)

we cant really help without seeing your code

Hello,
I think what you are looking for is the HTML dialog element, as stated by the MDN documentation: `The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

The HTML element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.`
: The Dialog element - HTML: HyperText Markup Language | MDN (mozilla.org)
I think you can then use JS or any other frontend framework to change the nature of this element from dialog to a div with certain styles to become full screen or a link that redirects to a template of a new page

ok here is what I think would be relevant for you to help me
my html for my add a page element

 <li><a href="#" id="addPageButton"><i class="fa-solid fa-note-sticky"></i>+ Add a Page</a></li>

This is the html in my specific addapage file

</head>

<body>
    <div class="modal" id="modal">
        <div class="modal-header">
            <div class="title">Example Modal</div>
            <button class="close-button" id="closeModalButton">&times;</button>
        </div>
        <div class="modal-body">
            This is the modal content.
        </div>
    </div>
    <div id="overlay"></div>
</body>
</html>



</body>
</html>


It doesn’t really do much but if you want any more code in specific lmk.