WebBuild/wwwroot/themes/layouts/topnavigation.js

Themes_Layouts = {
    topnavigation: () => {
        let html = `<div class="hk-wrapper top-navbar biz-layout-2-top-navbar hk-horizontal-nav">
                        <nav class="navbar navbar-expand-xl biz-navbar hk-navbar biz-primary-color biz-primary-text-color biz-highlight-color">
                           <a id="navbar_toggle_btn" class="btn btn-flush-nav btn-rounded navbar-toggle-btn mr-0" href="javascript:void(0);">
                                <span class="btn-icon-wrap"><i class="dripicons dripicons-menu"></i></span>
                            </a>
                            <a class="navbar-brand" href="javascript:;" onclick="javascript:Unibase.Themes.Compact.Components.Nav.Instance().getNavParentGroups();"><img class="brand-img d-inline-block" src="{{Logo}}" alt="brand" data-loaded="0" data-dynamic="1" onerror="ReloadImage(event)" /></a>
                            <div class="biz-nav-fullwidth hidden"></div>
                            <nav class="hk-nav biz-layout-2-left-navbar">
                                <a href="javascript:void(0);" id="hk_nav_close" class="hk-nav-close biz-primary-text-color"><i class="dripicons dripicons-cross font-18"></i></a>
                                <div class="layout-main-nav-wrap flex-grow-1" id="layoutMainNavWrap">
                                    <div class="navbar-nav-wrap">
                                        <ul class="navbar-nav layout2-main-nav flex-row" id="layoutMainNavbar">
                                            <li class="nav-item nav-group-container nav-dashboards-item my-0 d-none" data-buttonType='nav-button-dashboard'>
                                                <a class="nav-link nav-group-collapse-link" href="javascript:void(0);" data-toggle="collapse" data-target="#dash_drp"><i class="dripicons dripicons-archive nav-link-icon"></i><span class="nav-link-text text-truncate mr-10">Dashboard</span></a>
                                                <ul id="dash_drp" class="flex-column collapse collapse-level-1 dropdown-menu-scrollbar">
                                                    <li class="collapse-item"><ul class="nav flex-column mega-nav" id="nav-dashboards" data-navigation="Back2Path"></ul></li>
                                                </ul>
                                            </li>
                                            <li class="nav-item nav-group-container nav-apps-item my-0 d-none" data-buttonType='nav-button-apps'>
                                                <a class="nav-link nav-group-collapse-link" href="javascript:void(0);" data-toggle="collapse" data-target="#pages_drp"><i class="dripicons dripicons-view-apps nav-link-icon"></i><span class="nav-link-text text-truncate mr-10">Apps</span></a>
                                                <ul id="pages_drp" class="flex-column collapse collapse-level-1 dropdown-menu-scrollbar">
                                                    <li class="collapse-item"><ul class="nav flex-column mega-nav" id="nav-apps"></ul></li>
                                                </ul>
                                            </li>
                                            <li class="nav-item nav-group-container nav-reports-item my-0 d-none" data-buttonType='nav-button-reports'>
                                                <a class="nav-link nav-group-collapse-link" href="javascript:void(0);" data-toggle="collapse" data-target="#reports_drp"><i class="dripicons dripicons-graph-pie nav-link-icon"></i><span class="nav-link-text text-truncate mr-10">Reports</span></a>
                                                <ul id="reports_drp" class="flex-column collapse collapse-level-1 dropdown-menu-scrollbar">
                                                    <li class="collapse-item"><ul class="nav flex-column mega-nav" id="nav-reports"></ul></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                            <ul class="navbar-nav hk-navbar-content ml-auto" id="layout2-nav">
                                <li class="nav-item dropdown-authentication" id="nav-profile-dropdown"></li>
                            </ul>
                        </nav>
                        <div data-simplebar class="toplayout-structures-panel simple-scroll-bar" id="topLayoutStructuresPanel">
                            <div class="nav-options-container nav-widgets-container hidden" id="nav-widgets-container">
				                <div id="nav-widgets"></div>
				            </div>
				        </div>
                        <div id="hk_nav_backdrop" class="hk-nav-backdrop"></div>
                        <div class="biz-settings-panel hk-settings-panel custom"></div>
                        <div class="biz-cmn-filter-panel" id="bizCmnFilterPanel"></div>
                        <div class="modal fade biz-cmn-date-filter-modal" id="bizCmnDateFilterModal"></div>
                    </div>
                    <div class="biz-pg-wrapper biz-toplayout-pg-wrapper biz-secondary-color biz-secondary-text-color">
                        <div id="layout-detail" class="bg-cyan-light-5"></div>
                        <div class="container-fluid bg-cyan-light-5 pa-0" id="layout-list" style="display: none;"></div>
                    </div>

                    <div class="_bizgaze_modal" id="_bizgaze_modal"></div>`;
        return html;
    }
};