Simple navigation

The Simple navigation comes installed out of the box, and you will only need to edit the "/config/navigation.php" file to create a navigation. I am going to show a pre-installed example below.

Configs

These are just global configs, and it is possible to overwrite each manually when building the navigation later.

  • maxLevel: You can specify a default max level for all your navigation. The default value is 0, which is equal to endless levels.

  • nestingSlug: You can choose whether you want navigation child item URI slugs to nest parent slugs, e.g., /slug1/slug2/slug3. Nesting slug is disabled by default.

  • where: You can use the where to hide items from the menu. For example, you could add a parameter to your navigation item named [visible => 1] and also add the same parameter (array item) to the where config. Then you can manually change visible to "0" to hide an item.

Create navigation

Let's install a new navigation named "footer." Start by opening the "/config/navigation.php" file and add the "footer" array item to the config file like I have done below:

<?php

/**
 * Navigation config file
 * @psalm-suppress InvalidScope
 * 
 * Modify the static navigation that comes out of the box
 *
 * E.G:
 * The id is not required, but will create it´s own id with increment, starting from 1 if not filled in. 
 * The id has to be unique and is used to select parent!
 */
return [
    'navigation' => [
        'config' => [
            'maxLevel' => 0, // Maximum levels (0 = unlimited)
            'nestingSlug' => false, // Should slugs be nested? E.g. /about-us/history vs /history
            'where' => [] // Select data that should be visible. E.g. ['menu' => 1] will hide all that dooe not match
        ],
        'data' => [
            "main" => [
                [
                    "id" => 1,
                    "name" => "Start",
                    "slug" => "",
                    "parent" => 0,
                    "title" => false,
                    "description" => "Lorem ipsum dolor"
                ],
                [
                    "id" => 2,
                    "name" => "About",
                    "slug" => "about",
                    "parent" => 0,
                    "title" => "About us",
                    "description" => "Lorem ipsum dolor"
                ],
                [
                    "id" => 3,
                    "name" => "Contact",
                    "slug" => "contact",
                    "parent" => 0,
                    "title" => "Contact us",
                    "description" => "Lorem ipsum dolor"
                ]
            ],
            "footer" => [
                [
                    "id" => 1,
                    "name" => "Integrity policy",
                    "slug" => "policy",
                    "parent" => 0,
                    "title" => "Integrity policy",
                    "description" => "Lorem ipsum dolor"
                ],
                [
                    "id" => 2,
                    "name" => "Cookies",
                    "slug" => "policy",
                    "parent" => 0,
                    "title" => "Cookie policy",
                    "description" => "Lorem ipsum dolor"
                ]
            ]
        ]
    ]
];

Build the navigation

You could build the navigation in your controller, but it is probably better to create it with the help of a middleware. With the route grouper, you can either bind your navigation globally or just to a part of your app; read more under the Routers section.

Let's add our new "footer" navigation to the Document middleware in "app/Http/Middlewares/Document.php" by creating the method named "footer" and creating a new partial view.

The Document middleware

The code below is a minimized example from the "Document.php" file, which exists and is used as a working example.

<?php

namespace Http\Middlewares;

use MaplePHP\Handler\Interfaces\MiddlewareInterface;
use MaplePHP\Http\Interfaces\ResponseInterface;
use MaplePHP\Http\Interfaces\RequestInterface;
use MaplePHP\Foundation\Http\Provider;
use MaplePHP\Foundation\Nav\Navbar;

class Document implements MiddlewareInterface
{
    private $provider;
    private $nav;

    public function __construct(Provider $provider, Navbar $nav)
    {
        $this->provider = $provider;
        $this->nav = $nav;
    }
    
    /**
     * Add head to the document
     * @param  ResponseInterface $response
     * @param  RequestInterface  $request
     * @return ResponseInterface|void
     */
    public function navigation(ResponseInterface $response, RequestInterface $request)
    {
        $this->provider->view()->setPartial("navigation.document/navigation", [
            "nav" => $this->nav->get()
        ]);
    }

    /**
     * Add footer to the document
     * @param  ResponseInterface $response
     * @param  RequestInterface  $request
     * @return ResponseInterface|void
     */
    public function footer(ResponseInterface $response, RequestInterface $request)
    {
        // You can overvrite the global navigation configs like bellow if you want.
        $navBuilder = $this->nav->get();
        $navBuilder->setLevel(1);
        //$navBuilder->nestingSlug(false);
        //$navBuilder->setWhere(['menu' => 1, 'visible' => 1]);
        $this->provider->view()->setPartial("footer.document/footer", [
            "nav" => $navBuilder
        ]);
    }
...

Then, create the partial view named "resources/partials/document/footer.php" and read in the navigation passed above in the middleware.

<footer id="footer" class="p-30 align-center legend" role="contentinfo">
    <aside class="mb-10">
        <?php echo $obj->nav->select("footer")->get("nav"); ?>
    </aside>
</footer>

Now, we only need to tell your app where we want to show our footer middleware. We do this with the help of the route grouper. Open the file "app/Http/Routes/web.php".

$routes->group("/{lang:en}", function($routes) {
    $routes->get("/{page:about}", ['Http\Controllers\Pages', "about"]);
    $routes->get("/{page:contact}", ['Http\Controllers\Pages', "contact"]);
}, [
    [Http\Middlewares\Document::class, ["after" => ["head", "navigation", "footer"]]]
]);

Done!

Last updated