fuse-angular/src/app/main/content/components/navigation/navigation.component.html

<div id="navigation" class="page-layout simple fullwidth" fusePerfectScrollbar>

    <!-- HEADER -->
    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-16">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Components</span>
            </div>
            <div class="h2 mt-16">Navigation</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p>
            <code>fuse-navigation</code> is a custom built Fuse component allows you to create a multi-level collapsable
            navigation.
        </p>

        <div class="my-48">
            <h2>Usage</h2>
            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="html" class="source-code">
                    <textarea #source hidden="hidden">
                        <fuse-navigation></fuse-navigation>
                    </textarea>
                </fuse-hljs>
            </p>
        </div>

        <div class="my-48">
            <h2>Model</h2>
            <p class="py-8">
                <code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a service and a model file to populate
                the entire navigation. It supports three different navigation items; <b>Subheader</b>,
                <b>Collapsable</b> and <b>Item</b>. These items can be mixed and matched to create unique and complex
                navigation layouts.
            </p>
        </div>

        <div class="my-48">
            <h3>Grouping</h3>
            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="json" class="source-code">
                    <textarea #source hidden="hidden">
                        {
                            'title': 'COMPONENTS',
                            'type' : 'group',
                            'children': [
                                {
                                    'title': 'ngx-datatable',
                                    'type' : 'item',
                                    'url' : '/components/datatables/ngx-datatable'
                                }
                            ]
                        },
                    </textarea>
                </fuse-hljs>
            </p>
        </div>

        <div class="my-48">
            <h3>Collapsable</h3>
            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="json" class="source-code">
                    <textarea #source hidden="hidden">
                        {
                            'title' : 'Datatables',
                            'type' : 'collapse',
                            'icon' : 'border_all',
                            'children': [
                                {
                                    'title': 'ngx-datatable',
                                    'type' : 'nav-item',
                                    'url' : '/components/datatables/ngx-datatable'
                                }
                            ]
                        },
                    </textarea>
                </fuse-hljs>
            </p>
        </div>

        <div class="my-48">
            <h3>Item</h3>
            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="json" class="source-code">
                    <textarea #source hidden="hidden">
                        {
                            'title': 'Countdown',
                            'type' : 'item',
                            'icon' : 'settings_input_component',
                            'url' : '/components/countdown'
                        },
                    </textarea>
                </fuse-hljs>
            </p>
        </div>

        <div class="my-48">

            <h2>Vertical Navigation Default Folded Status</h2>

            <p>
                It's possible to change the default folded status of the navigation.
            </p>
            <p>
                Edit the <code>main.component.html</code> file and look for the <code>[folded]</code> attribute on
                <code>fuse-navbar-vertical</code> components.
            </p>
            <p>
                Assigning <code>true</code> to that attribute will make the vertical navigation folded by default.
            </p>

        </div>

        <div class="my-48">

            <h2>Examples</h2>

            <h4>Update navigation item on-the-fly</h4>

            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="ts" class="source-code">
                    <textarea #source hidden="hidden">
                        updateMailBadge()
                        {
                            // Get the mail nav item
                            const mailNavItem = this.navigationService.getNavigationItem('applications.mail');

                            // Update the badge title
                            mailNavItem.badge.title = 35;
                        }
                    </textarea>
                </fuse-hljs>
            </p>

            <div class="mt-24 mb-64">

                <button mat-button mat-raised-button color="accent" (click)="updateMailBadge()">
                    Update Mail app badge
                </button>

            </div>

            <h4>Add a subitem to the Calendar nav item</h4>

            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="ts" class="source-code">
                    <textarea #source hidden="hidden">
                        addSubitemToCalendar()
                        {
                            // Prepare the new nav item
                            const newNavItem = {
                                id   : 'sub-item',
                                title: 'Sub Item',
                                type : 'item',
                                url  : '/apps/calendar'
                            };

                            // Add the new nav item
                            this.navigationService.addNavigationItem('applications.calendar', newNavItem);
                        }
                    </textarea>
                </fuse-hljs>
            </p>

            <div class="mt-24 mb-64">

                <button mat-button mat-raised-button color="accent" (click)="addSubitemToCalendar()">
                    Add a subitem to the Calendar nav item
                </button>

            </div>

            <h4>Add a nav item with custom function</h4>

            <p class="mat-grey-200-bg py-8">
                <fuse-hljs lang="ts" class="source-code">
                    <textarea #source hidden="hidden">
                        addNavItemWithCustomFunction()
                        {
                            // Prepare the new nav item
                            const newNavItem = {
                                id      : 'custom-item',
                                title   : 'Custom Item',
                                type    : 'item',
                                function: () => {
                                    alert('Custom function!');
                                }
                            };

                            // Get the applications nav item
                            const applicationsNavItem = this.navigationService.getNavigationItem('applications');

                            // Add the new nav item at the beginning of the applications
                            applicationsNavItem.children.unshift(newNavItem);
                        }
                    </textarea>
                </fuse-hljs>
            </p>

            <div class="mt-24">

                <button mat-button mat-raised-button color="accent" (click)="addNavItemWithCustomFunction()">
                    Add a nav item with custom function
                </button>

            </div>

        </div>


    </div>

</div>