WebBuild/wwwroot/themes/layouts/topandleftnavigation.js

Themes_Layouts = {
    topandleftnavigation: () => {
        let html = `<div class="hk-wrapper top-navbar biz-layout-3-top-navbar hk-vertical-nav">
                        <nav class="navbar navbar-expand-xl biz-navbar hk-navbar biz-primary-color biz-primary-text-color biz-highlight-color flex-nowrap">
                            <div class="navbar-left d-flex align-items-center w-xl-240p">
                            <a id="navbar_toggle_btn" class="btn btn-flush-nav btn-rounded navbar-toggle-btn" href="javascript:void(0);" data-tooltip="true" title="Toggle Menu">
                                <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>
                             <div class="navbar-right d-flex align-items-center justify-content-between ml-auto flex-grow-1 text-truncate"><span class="nav-company-name biz-primary-text-color font-weight-600 font-16 px-30 px-xl-20 d-none d-md-block text-truncate" id="navCompanyName"></span>
                                <ul class="navbar-nav hk-navbar-content" id="biz-layout-3-nav">
                                <li class="nav-item dropdown-authentication" id="nav-profile-dropdown"></li>
                              </ul>
                            </div>
                        </nav>
                        <div id="hk_nav_backdrop" class="hk-nav-backdrop"></div>
                        <div class="biz-nav-fullwidth hidden"></div>
                        <nav class="hk-nav biz-layout-3-left-nav biz-primary-color biz-primary-text-color">
                            <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 data-simplebar class="layout-main-nav-wrap simple-scroll-bar flex-grow-1" id="layoutMainNavWrap">
                                <div class="navbar-nav-wrap">
                                    <ul class="navbar-nav flex-column" id="layoutMainNavbar">
                                        <li class="nav-item nav-group-container nav-dashboards-item 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">
                                                <li class="nav-item"><ul class="nav flex-column" id="nav-dashboards" data-navigation="Back2Path"></ul></li>
                                            </ul>
                                        </li>
                                        <li class="nav-item nav-group-container nav-apps-item 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">
                                                <li class="nav-item"><ul class="nav flex-column" id="nav-apps"></ul></li>
                                            </ul>
                                        </li>
                                        <li class="nav-item nav-group-container nav-reports-item 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">
                                                <li class="nav-item"><ul class="nav flex-column" id="nav-reports"></ul></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <div class="nav-options-container nav-widgets-container hidden" id="nav-widgets-container">
				                    <div id="nav-widgets"></div>
				                </div>
                            </div>
                        </nav>
                        <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-layout-3-biz-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;
    }
};