Kompo menus docs
Navbars, Sidebars, Footers & Other responsive Menu items

Writing Menus

There is nothing better than examples to understand how to write Menus, so make sure to check out these templates too.

Menu template

The different navigation items are defined in the `komponents()` method of the Menu class. This class also contains useful properties for some navigation settings.

<?php

namespace App\Menus;

class MyMenu extends Menu
{
   public $fixed = true;   //If the menu fixed or scrollable?
   public $order = 1; //The order of display of menus, integer between [1-4]. 
   public $containerClass = 'container'; //Adding a wrapper div with a class to the menu.

   public $class = 'px-4 py-2 border-bottom border-gray-300';
   public $id = 'some-id';

   //This is the only required method. It returns an array of Komponents.
   public function komponents()
   {
      return [
         //The Menu Komponents
      ];
   }

   //This method is fired at the very beginning of the cycle.
   public function created() { ... }
}

SPA, Turbo links & SEO

Kompo has been built with the objective of creating the SPA feel very easily.

Turbo Links

Kompo is able to smart load pages for you. If you are using the same Kompo layout for two routes, Kompo will not do a full page refresh. Instead, it will simply swap the content and navigation items of the new page with the old ones, the same way turbolinks do.

Disable turbo

If a link leads to a page with the same layout, Kompo will automatically load the new content by turbo navigation. If for some reason, you wish to disable that, you may do so by chaining the `noTurbo` method to the link.

Link::form('Full refresh')->href(...)->noTurbo()

SEO Notice

Unlike other `kompo` modules, it is important for navbars, sidebars and menus in general to be rendered on the server side for improved SEO. For that reason, the menu items have been built using Blade and not Vue.js.

Menu komponents

Kompo offers an array of menu-specific components such as Dropdown, CollapseOnMobile, Logo... but you may also include any other components from the library such as Html, Link, Button or even form fields...

public function komponents()
{ 
   return [
      Logo::form('<b>Kompo</b>')->image('img/kompo-logo.png'),
      NavSearch::form('Search the docs...'),
      CollapseOnMobile::form('☰')->leftMenu(

         Dropdown::form('Docs')->submenu(
            Link::form('Forms')->href('docs/forms'),
            Link::form('Queries')->href('docs/queries'),
            Link::form('Menus')->href('docs/menus')
         ),
         Button::form('Contact us')->post(...)->inModal()

      )->rightMenu(

         Auth::user() ?
            AuthMenu::form(Auth::user()->name)->icon('fa fa-user') :
            Link::form('Login')->get('login.modal')->inModal()

      )
   ];
}

Logo

The `Logo` component accepts an HTML string as it's first parameter.

You may also add an image to it with the `image` method which accepts the public folder path to the image, and you may optionally set its' dimensions. Note that if `$width` or `$height` are left empty, they will default to 'auto'.

By default, it redirects to '/'. You may however override this behavior by chaining the `href` method with the desired route.

use Kompo\`Logo`;

//By default, the logo hrefs to url('/')
Logo::form('<b>'.config('app.name').'</b>')

//Using only an image and setting the optional dimensions
Logo::image('img/my-logo.png', $width = '50px', $height = 'auto')

//Combining an image and text with styles
Logo::form('My site')
  ->class('text-3xl mansala color2')
  ->image('img/my-logo.png')
  ->imageClass('mr-4')

//Override the default href to a custom route
Logo::form('My site')
   ->href('custom-route')

Collapse

The `Collapse` creates a menu item with a collapsible submenu.

Some useful methods are `expandIfActive` and `expandByDefault`.

use Kompo\`Collapse`;

Collapse::form('Collapse me')
   ->submenu(
      Link::form('Link 1'),
      Link::form('Link 2'),
      Link::form('Link 3')
   )

//The submenu is open on initial load
Collapse::form('Open on initial load')
   ->submenu(...)
   ->expandByDefault()

//The submenu will expand if the user is visiting one of it's child pages.
Collapse::form('Open if active')
   ->submenu(...)
   ->expandIfActive()

CollapseOnMobile

The `CollapseOnMobile` provides two containers `leftMenu` and `rightMenu` to include Links, Dropdowns or any other component in a responsive manner for mobile and desktop.

By default, it uses ☰ as the toggle label. You may however override this behavior by calling the static `form` method or chaining the `label` method.

use Kompo\`CollapseOnMobile`;

CollapseOnMobile::leftMenu(
   Link::form('Query')->href('docs.catalog'),
   Link::form('Form')->href('docs.form'),
   Link::form('Menu')->href('docs.menu')
)->rightMenu(
   Link::form('Login')->post('login.modal')->inModal()
)

//To override the toggle icon
CollapseOnMobile::form('<i class="icon-toggle"></i>')
   ->leftMenu(...)

Dropdown

The `Dropdown` creates a menu item with a hoverable submenu.

Some useful methods are `alignRight`.

use Kompo\`Dropdown`;

Dropdown::form('Dropdown')
   ->submenu(
      Link::form('Link 1'),
      Link::form('Link 2'),
      Link::form('Link 3')
   )

//The submenu is aligned to the right
Dropdown::form('Dropdown right')
   ->submenu(...)
   ->alignRight()

NavSearch

The `NavSearch` component extends the `Search` component in Forms.

The method `searchOptions` handles the Front-end specs and indicates which method will handle returning the results on the back-end. See below for more info.

use Kompo\`NavSearch`;

//The search component
//- minimum search length is 1 character 
//- `searchResults` will return the results...
NavSearch::form('Search our database...')
   ->searchOptions(1, 'searchResults')

//Add the searchResults method that displays a Card
public function searchResults()
{
   return Post::where('title', 'LIKE', '%'.request('search').'%')->get()
      ->map(function($post){

         return ImageRow::form([
            'title' => $post->title,
            'image' => asset($post->image['path']),
            'url' => url('/')
         ]);

   })->all();
}