Layout

<LayoutMain>

This is the standard page layout, which includes the navbar, sidebar, breadcrumbs and alerts.

Most pages should follow this format:

<script>
    import LayoutMain from '@alberon/nexus/vue/LayoutMain';

    export default {
        components: {
            LayoutMain,
        },
    }
</script>

<template>
    <LayoutMain title="Example">

        <div class="row">
            <div class="col mb-3">
                ...
            </div>
        </div>

    </LayoutMain>
</template>

[Demo]

You should always have at least one row + col - don't put content directly into the layout. You can add additional rows and columns as needed (see the Bootstrap grid system docs. Each column should have the mb-3 class to ensure the correct spacing (though there may be some exceptions).

Props:

  • title (String or Array) - Sets the window/tab title (<title>). If it is an array, e.g. :title="[example.title, 'Examples']", the parts are joined together with an emdash (—). The application name is automatically added to the end. If no title is provided, the application name is used. Generally you should set the title on every page except (maybe) the homepage.
  • no-sidebar (Boolean) - Disables the sidebar completely. This is used on the login and forgot/reset password pages.
  • sidebar-always-open (Boolean) - The only affects the mobile layout. It is used on the default homepage (PagePlaceholder) so the menu is the first thing users see. It should not be used on other pages.

Slots:

  • #top - Content positioned after the breadcrumbs and before the alerts, outside the grid container, e.g. <SectionNav>.
  • #alerts - Positioned immediately before the flash messages. Use <AlertWithIcon> inside it.
  • #bottom - Content positioned at the very end of the page, outside the grid container. (I don't have any good uses for it currently - it is mainly there for symmetry with top!)

Events: None.

<LayoutBasic>

This is a cut-down version of <LayoutMain> - there is no navbar, sidebar or breadcrumbs, but it does include alerts. It is primarily useful for popups or iframes, e.g. the file picker in Nexus Media Library.

Props: None.

  • TODO: It should have a title prop like <LayoutMain>, but doesn't currently.

Slots:

  • #top - Same as <LayoutMain>.
  • #alerts - Same as <LayoutMain>.
  • #bottom - Same as <LayoutMain>.

Events: None.

<LayoutNavbar>

By default the navbar includes a logo (see below), user menu, and mobile nav toggle.

There is also a search form - but this is untested and could do with some improvements - and a help menu (commented out) for future use.

This may be overridden in the application - simply copy the component into resources/nexus/vue/ and customise it as required.

Props:

  • has-sidebar (Boolean) - Whether to show the sidebar toggle button.

Slots: None.

Events: None.

By default, a generic Font Awesome icon and the application title are displayed. When a page is loading, the icon is replaced with a loading icon.

This may be overridden in the application - simply copy the component into resources/nexus/vue/ and customise it as required.

There is also a commented out example of how to replace this with a custom logo and separate loading icon, based on the Alberon Intranet layout. It can be adapted or completely replaced if required.

Note: Make sure you test it in a variety of different screen sizes. In particular, check that the loading icon being doesn't change the layout, as that would get annoying for the user (the example uses visibility: hidden rather than display: none to prevent that).

Props: None.

Slots: None.

Events: None.

See Sidebar Navigation.

See How to create section navigation bars (tabs) in Nexus.

<LayoutFlashMessages>

See Alerts & Toasts.

<LayoutBreadcrumbs>

Breadcrumbs are generated by the Laravel Breadcrumbs package - see routes/breadcrumbs.php and read the package documentation for details of how it works.

They are automatically injected into the Inertia response by Alberon\Nexus\Http\Middleware\HandleInertiaRequests::share().

Note: Every route must be named and have a corresponding breadcrumb registered, even if it is empty. This is to ensure we don't forget to assign breadcrumbs to all pages.

Props:

  • breadcrumbs (Array) - The breadcrumbs to render - generally $page.props.breadcrumbs.

Slots: None.

Events: None.