Base CSS themes Bootstrap Material Design Filled Material Design Outlined Floating Navbars, Sidebars & Footers All 74 SPA layouts AJAX Requests File uploads User account Authentication forms Roles & Permissions

Navbars, Sidebars, Footers & Layouts
Navbars, Sidebars, Footers & Layouts

We build here the navigation menus and layouts of an app with a landing page and an admin panel.

Landing and Administration layouts

First, our app will have two layouts:

Home Page layout

This is the base layout which will contain our main styles and scripts. So let's call this `app.blade.php` and extend Kompo's base layout `kompo::app`.

In the second parameter of `@extends`, we may add our menus. Our home page will have a Navbar and Footer only that we reference with their full namespaces and instantiate with the new keyword.

Then we may add our main styles and scripts with the Blade keyword `@push` which allows stacking content. The key names in Kompo's default layout are:

  • `header` for everything displayed in the `<head>` section,
  • `scripts` for the HTML we wish to display before the closing `<body>` tag.

Admin Panel layout

In our Admin Panel, we wish to keep the same Navbar, styles & scripts as our base layout (but no Footer), so we may extend our base layout with `@extends('app')`.

However, we wish to also add two Sidebars (LeftSidebar and RightSidebar) in our Admin Panel to help the administrators easily access all kinds of app routes. We may do so in the second parameter where we also reference with their full namespaces and instantiate with the new keyword.

We may disable a previously included menu (the Footer in this case) by overriding it's value with null or false.

Finally, we may push additional styles and scripts specific to the admin panel too.

Navbar with Search feature

The Navbar is composed of three main komponents. A `Logo`, a `NavSearch` input and the collapsible `Menu`.

The Logo Komponent is straightforward and you may get more info in the Logo API section.

The `NavSearch` komponent performs an backend AJAX request which is activated by assigning it the `searchOptions` method. Then in the Menu class, we define the search query in the target method `searchResults` in this case. We may either return pure HTML results or as shown in this example, we may leverage a Card komponent such as `ImageRow` in this case.

The `CollapseOnMobile` provides two containers for navigation items placement `leftMenu` and `rightMenu`, which will distribute the items accordingly on large screens (when the navigation is not collapsed).

Finally, notice how we handle the conditional display of:

  • A Login link that will toggle a Login Form in a Modal, if the user is not authenticated.
  • An account/profile specific submenu containing some links and a LogoutForm under the User's name, when the user is authenticated.

Footer with Newsletter Form

In this example, we will see how we may include a Form inside Menus. This also works with queries.

First, let's talk about the Footer's properties.

  • We set `out` to true, because we want our Footer to extend the full width of our view port and overlap any sidebar. If that's not the behavior you want, you may simply ignore this value as the default is `false`.
  • Then we set the `class` property to flex-col because we have two blocks in our Footer and we want to display them in a column.
    Note: Menus are all flex boxes and the default driection is `row`.
  • The `id` has been set here for some CSS that I wish to keep in my SCSS files

Now let's talk about the Footer's Komponents. There are two main blocks here:

  • The first block is just a centered `NewsletterForm`. As you see, we simply include it and it will be rendered and functional everytime the footer is displayed.
    This `Form` class takes care of displaying the fields and info text as indicated in the layout from the komponents method, and validating then saving our user's email in the database.
  • The second block is a series of useful links that one usually finds in Footers.

Admin Panel Sidebars

For this sidebar example, we wanted to show you the technique of extracting similar komponents into protected methods. We know that all the `Link` and `Collapse` komponents in the sidebar will share the same visual. So instead of repeating the styles for each komponent, we may call a protected method where these styles are defined and the `$label` is parameter.

The first sidebar is a replica of the docs sidebar on this site (we simplified it a bit). We wanted it fixed, so we set the `$fixed` property to true. The `$style` property allows us to specify the width of the sidebar.

You may notice the usage of the `addHash` method with is a convenient way to append a `#hash` to the href attribute of a link. It is especially useful for Links inside a Collapse, where the children's href will inherit their parent's one and target another section on the page.