Sidebar and navbar common for every page

Wappler General Need Help
1

Hi all , is it possible to have in a file the sidebar and navbar of my site that is common for all my pages and include them to every page? my target is to be able to make changes in one point because if pages' number increase maintaining the sidebar will be very difficult and i am sure i will forget something.

2

Yes, you certainly can. That is. the proper way to do it. Are you using Node.js or PHP?

Node: Just add the content to your layout page
PHP: Add the content to your page as a Server Side Include.

3

If you're using Node, Wappler uses a two-page approach for your application: layout and content pages. The layout page (found under layouts/) contains the skeleton of a standard HTML page. It includes the HTML, Head, and Body tags. Within the BODY tag, Wappler includes the following code:

 <div is="dmx-view" id="content">
    <%- await include(content, locals); %>
  </div>

That inserts any content page you create. I use the approach you are describing to keep the following elements available to all content pages that use my "main.ejs" layout page: browser, notifications, session storage, top navigation, google tags for traffic analysis, server connects, custom CSS file for my website, and a footer.

You can create multiple layout pages depending on need. For example, I have a few landing pages that have a different layout page than my main layout page, primarily because I don't need top navigation, access to browser and notification elements, or server connects.

4

Adding to the replies from @brad and @GraybeardCoder, have a look at this article:

Client-Side alternative to Server-Side Includes - Docs / How-to Guides - Wappler Community

Pay particular attention to this note by @George:

5

Thank you guys for your responses. They really moved me onward .
the think is that i can move to include file app elements (nav , header etc) i have a sidebar though that in wappler appears as seperate links and in code is included in divs. is there a way or a workaround to move this kind of sidebar to include file?

6

"include file" is a PHP term whereas "partials" is a Node.js term. The concepts are the same however.

You should be able to take the entire contents within the sidebar's DIVs and create an "include" or "partials" file. Then reference that include/partials in all pages where the sidebar is needed. The Wappler UI allows you to highlight any section of code in a page and create a "partials" file when using Node.js. It may work the same for PHP.

7

thank you,
i tried creating a single file including the sidebar i need to include in all pages but i cannot include dynamic events (eg. logout). i added server connect to the page for logout and manually added the logout call in the link in sidebar but it is not working.

8

Can you include your code for the logout in the sidebar, and the server web logs showing the error when the link it clicked?

9

my page is like this


"<?php
require('../dmxConnectLib/dmxConnect.php');

$app = new \lib\App();

$app->exec(<<<'JSON'
{
	"steps": [
		"Connections/db",
		"SecurityProviders/site_security",
		{
			"module": "auth",
			"action": "restrict",
			"options": {"loginUrl":"../index.php","forbiddenUrl":"../index.php","provider":"site_security"}
		}
	]
}
JSON
, TRUE);
?>"

body:

<body id="home" is="dmx-app">
    <dmx-serverconnect id="sc_Logout" url="../dmxConnect/api/User_logout.php" noload="true"></dmx-serverconnect>
    <script src="../bootstrap/5/js/bootstrap.bundle.min.js"></script>
    <div class="wrapper">
        <?php include '../templates/sidebarinclude.php'; ?>
        <div id="content">
            <?php include '../templates/navbarinclude.php'; ?>
            <div class="container"></div>
        </div>
    </div>
</body>

navbarinclude.php

    <button type="button" id="sidebarCollapse" class="btn btn1">
        <i class="fas fa-align-left"></i>
        <!--span>Toggle Sidebar</span-->
    </button>
    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-align-justify"></i>
    </button>

    <div class="collapse navbar-collapse text-end" id="navbarSupportedContent">
        <ul class="nav navbar-nav ml-auto text-end">
        </ul>
    </div>
</div>

sidebarinclude.php

sidebar

<ul class="list-unstyled components">
        <li>
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">headmenu1</a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
            <li>
                <a href="#">sub1</a>
            </li>
            <li>
                <a href="#">sub2</a>
            </li>
            <li>
                <a href="#">sub3</a>
            </li>
            <li>
                <a href="#">sub4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#homeSubmenu1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">headmenu2</a>
        <ul class="collapse list-unstyled" id="homeSubmenu1">
            <li>
                <a href="#">sub1</a>
            </li>
            <li>
                <a href="#">sub2</a>
            </li>
            <li>
                <a href="#">sub3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">headmenu3</a>
    </li>
    <li>
                <li>
        <a href="#" dmx-on:click="sc_Logout.load({})">Logout</a>
    </li>
</ul>

<!--ul class="list-unstyled CTAs">
    <li>
      <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
    </li>
    <li>
      <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
    </li>
  </ul-->
`Preformatted text`
10

Have a look at
Wappler Documentation - Server Side Includes (SSI)