NetcodeHub.Packages.UI.Templates.Breeze 1.1.4

Instal the package

NetcodeHub.Packages.UI.Templates.Breeze

Add Css Style references / You can also download and add / Use Links

<link rel="stylesheet" href="_content/NetcodeHub.Packages.UI.Templates.Breeze/css/bootstrap.min.css" />
<link rel="stylesheet" href="_content/NetcodeHub.Packages.UI.Templates.Breeze/css/style.css" />
<link rel="stylesheet" href="_content/NetcodeHub.Packages.UI.Templates.Breeze/icon/materialdesignicons.min.css" />

Add JS references You can also download and add / Use Links

<script src="_content/NetcodeHub.Packages.UI.Templates.Breeze/js/bootstrap.bundle.min.js"></script>
<script src="_content/NetcodeHub.Packages.UI.Templates.Breeze/js/base.js"></script>
<script src="_content/NetcodeHub.Packages.UI.Templates.Breeze/js/settings.js"></script>

Customize the MainLayout : Create Component and use in the Template

<BreezeMainLayoutTemplate>
    <InnerTemplate>
        <AuthorizeView>
            <SidebarTemplate>
                <SidebarBrandTemplate><SidebarBrand /></SidebarBrandTemplate>
                <SidebarProfileTemplate><SidebarProfile /></SidebarProfileTemplate>
                <SidebarContentTemplate><SidebarContent /></SidebarContentTemplate>
            </SidebarTemplate>
        </AuthorizeView>
        <NavbarTemplate Theme="@NavbarTheme.Dark()" ShowSidebarMiniIcons=false>
            <BodyTemplate>
                @Body
            </BodyTemplate>
            <NavItemEndTemplate>
                <NavItemEnd>
                    <SearchTemplate><NavSearch /></SearchTemplate>
                </NavItemEnd>
            </NavItemEndTemplate>
            <NavOnMobileScreenLogoTemplate>
                <OnMobileScreenLogo />
            </NavOnMobileScreenLogoTemplate>
        </NavbarTemplate>
    </InnerTemplate>
</BreezeMainLayoutTemplate>

Customize Home| Create Component and use in the Template

<HomeTemplate>
    <HomeHeaderTemplate><HomeHeader /></HomeHeaderTemplate>

    <HomeSection1Col9Template><HomeSection1Col9 /></HomeSection1Col9Template>
    <HomeSection1Col3Template><HomeSection1Col3 /></HomeSection1Col3Template>

    <HomeSection2Col8Template><HomeSection2Col8 /></HomeSection2Col8Template>
    <HomeSection2Col4Template><HomeSection2Col4 /></HomeSection2Col4Template>

    <FooterTemplate><Footer /></FooterTemplate>
</HomeTemplate>

Examples:

[NavItemEnd | NavItemStart]

<li class="nav-item dropdown d-none d-xl-flex border-0">
    <a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown">
        <i class="mdi mdi-earth"></i> English
    </a>
    <div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
        <a class="dropdown-item" href="#"> French </a>
        <a class="dropdown-item" href="#"> Spain </a>
        <a class="dropdown-item" href="#"> Latin </a>
        <a class="dropdown-item" href="#"> Japanese </a>
    </div>
</li>
<li class="nav-item nav-search border-0 ml-1 ml-md-3 ml-lg-5 d-none d-md-flex">
    <a class="nav-link">Contact</a>
</li>			

[NavSearch]

<form class="nav-link form-inline mt-2 mt-md-0">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" />
        <div class="input-group-append">
            <span class="input-group-text">
                <i class="mdi mdi-magnify"></i>
            </span>
        </div>
    </div>
</form>			

[OnMobileScreenLogo]

<img src="template/images/logo-mini.svg" alt="logo" @onclick="NavigationHome" />
@code {
   void NavigationHome() => NavManager.NavigateTo("app/home1");
}

[SidebarBrand]

<a class="sidebar-brand brand-logo" href="app/home">
    <img src="template/images/logo.svg" alt="logo" />
</a>

<a class="sidebar-brand brand-logo-mini pl-4 pt-3" href="app/home">
    <img src="template/images/logo-mini.svg" alt="logo" />
</a>

[SidebarContent]

<li class="nav-item">
    <a class="nav-link" href="app/home">
        <i class="mdi mdi-home menu-icon"></i>
        <span class="menu-title">Dashboard</span>
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
        <i class="bi bi-person-fill-gear fs-5"></i>
        <span class="menu-title">User Management</span>
        <i class="menu-arrow"></i>
    </a>
    <div class="collapse" id="ui-basic">
        <ul class="nav flex-column sub-menu">
            <li class="nav-item">
                <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="pages/ui-features/dropdowns.html">Dropdowns</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="pages/ui-features/typography.html">Typography</a>
            </li>
        </ul>
    </div>
</li>
<li class="nav-item">
    <a class="nav-link" href="pages/icons/mdi.html">
        <i class="mdi mdi-contacts menu-icon"></i>
        <span class="menu-title">Icons</span>
    </a>
</li>

[SidebarProfile]

<a href="#" class="nav-link">
    <div class="nav-profile-image">
        <img src="template/images/faces/face1.jpg" alt="profile" />
        <span class="login-status online"></span>
        
    </div>
    <div class="nav-profile-text d-flex flex-column pr-3">
        <span class="font-weight-medium mb-2">Henry Klein</span>
        <span class="font-weight-normal">$8,753.00</span>
    </div>
    <span class="badge badge-danger text-white ml-3 rounded">3</span>
</a>			

[Footer]

<footer class="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
        <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Iventory Management system @@2024</span>
        <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free</span>
    </div>
</footer>

[HomeHeader]

<div class="page-header flex-wrap">
    <h3 class="mb-0">
        Hi, welcome back! <span class="pl-0 h6 pl-sm-2 text-muted d-inline-block">Your web analytics dashboard template.</span>
    </h3>
    <div class="d-flex">
        <button type="button" class="btn btn-sm bg-white btn-icon-text border">
            <i class="mdi mdi-email btn-icon-prepend"></i> Email
        </button>
        <button type="button" class="btn btn-sm bg-white btn-icon-text border ml-3">
            <i class="mdi mdi-printer btn-icon-prepend"></i> Print
        </button>
        <button type="button" class="btn btn-sm ml-3 btn-success"> Add User </button>
    </div>
</div>

[HomeSection1Col3...]

<div class="row">
    <div class="col-xl-12 col-md-6 stretch-card grid-margin grid-margin-sm-0 pb-sm-3">
        <div class="card bg-warning">
            <div class="card-body px-3 py-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="color-card">
                        <p class="mb-0 color-card-head">Sales</p>
                        <h2 class="text-white">
                            $8,753.<span class="h5">00</span>
                        </h2>
                    </div>
                    <i class="card-icon-indicator mdi mdi-basket bg-inverse-icon-warning"></i>
                </div>
                <h6 class="text-white">18.33% Since last month</h6>
            </div>
        </div>
    </div>
    <div class="col-xl-12 col-md-6 stretch-card grid-margin grid-margin-sm-0 pb-sm-3">
        <div class="card bg-danger">
            <div class="card-body px-3 py-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="color-card">
                        <p class="mb-0 color-card-head">Margin</p>
                        <h2 class="text-white">
                            $5,300.<span class="h5">00</span>
                        </h2>
                    </div>
                    <i class="card-icon-indicator mdi mdi-cube-outline bg-inverse-icon-danger"></i>
                </div>
                <h6 class="text-white">13.21% Since last month</h6>
            </div>
        </div>
    </div>
</div>

Add Breeze Services

using NetcodeHub.Packages.UI.Templates.Breeze.Services;
builder.Services.AddBreezeServices();

Inject the interface in Import.razor

@using NetcodeHub.Packages.UI.Templates.Breeze.Services
@inject IReloadService reloadService

Reload page to activate all JS files if Hide/Show Sidebar fails in all components as landing pages.

 //reload page after first render to set all js active
 protected async override Task OnAfterRenderAsync(bool firstRender)
 => await reloadService.ReloadPageAfterFirstRenderToActivateAllJSFilesAsync(firstRender);

Reload Component based on Condition / Get the Reload Value set already.

 protected async override Task OnAfterRenderAsync(bool firstRender)
 {
     if (firstRender)
     {
         string state = await reloadService.CheckIfReloadExistAsync();
         if (!string.IsNullOrEmpty(state))
         {
         	// Dummy methods call / examples
             await GetChartData1();
             await GetChartData2();
         }
     }
 }