Create the main menu

The Sharp UI is organized with two menus: the main one on a left sidebar, and the user menu is a dropdown located in the bottom left corner.

All links shares common things: an icon, a label and an URL. Links can be grouped in categories.

Create a SharpMenu class

Generator

php artisan sharp:make:menu <class_name>

Write and declare the class

The class must extend Code16\Sharp\Utils\Menu\SharpMenu, and define a required build() method:

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        // ...
    }
}

And should be declared in your SharpServiceProvider:

class SharpServiceProvider extends SharpAppServiceProvider
{
    protected function configureSharp(SharpConfigBuilder $config): void
    {
        $config
            ->setSharpMenu(MySharpMenu::class)
            // [...]
    }
}

INFO

The SharpServiceProvider class is created bye the sharp:install artisan command; in case you don't have it, you can create it by yourself in the App\Providers namespace, or use the sharp:make:provider command.

Link to an Entity List, a Dashboard or to a single Show Page

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->addEntityLink('post', 'Posts')
            ->addEntityLink('category', 'Categories');
    }
}

In this example, "post" and "category" should be entities defined in the config file. Sharp will create a link either to the Entity List, to the Dashboard or to a single Show Page (depending on the entity configuration).

Link to an external URL

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this->addExternalLink('https://google.com', 'Some external link');
    }
}

Define icons

Yon can specify a blade-icons name for each link. It can be an icon set coming from a package or defined in the project config.

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->addEntityLink('post', 'Posts', icon: 'fas-file')
            ->addEntityLink('directory', 'Directories', icon: 'heroicon-o-folder')
            ->addExternalLink('https://example.org', 'Homepage', icon: 'icon-logo'); // icon defined in the project (e.g. in resources/svg)
    }
}

Group links in sections

Sections are groups that can be collapsed

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->addSection('Admin', function(SharpMenuItemSection $section) {
                $section
                    ->addEntityLink('account', 'My account')
                    ->addEntityLink('user', 'Sharp users');
            });
    }
}

Add separators in sections

You can add a simple labelled separator in sections:

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->addSection('Admin', function(SharpMenuItemSection $section) {
                $section
                    ->addEntityLink('account', 'My account')
                    ->addSeparator('Other users')
                    ->addEntityLink('user', 'Sharp users');
            });
    }
}

Set a section to be non-collapsible

A section is collapsible by default, but you may want to always show it to the user

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->addSection('Admin', function(SharpMenuItemSection $section) {
                $section
                    ->setCollapsible(false)
                    ->addEntityLink('account', 'My account');
            });
    }
}

Hide the menu

If for some reason you want to hide the menu, you can do that with the setVisible() method:

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->setVisible(auth()->user()->isAdmin())
            ->addSection(...);
    }
}

Add links in the user (profile) menu

Next to user's name or email, Sharp displays a dropdown menu with a logout link. You can add your own links in this menu:

class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
{
    public function build(): self
    {
        return $this
            ->setUserMenu(function (SharpMenuUserMenu $menu) {
                $menu->addEntityLink('account', 'My account');
            });
    }
}

Global menu Filters

If you want to display a filter on all pages, above the menu, useful to scope the entire data set (use cases: multi tenant app, customer selector...), you can define a global filter as described in the Filters documentation.