NetcodeHub.Packages.UI.Templates.Breeze 1.1.4

dotnet add package NetcodeHub.Packages.UI.Templates.Breeze --version 1.1.4                
NuGet\Install-Package NetcodeHub.Packages.UI.Templates.Breeze -Version 1.1.4                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="NetcodeHub.Packages.UI.Templates.Breeze" Version="1.1.4" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add NetcodeHub.Packages.UI.Templates.Breeze --version 1.1.4                
#r "nuget: NetcodeHub.Packages.UI.Templates.Breeze, 1.1.4"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install NetcodeHub.Packages.UI.Templates.Breeze as a Cake Addin
#addin nuget:?package=NetcodeHub.Packages.UI.Templates.Breeze&version=1.1.4

// Install NetcodeHub.Packages.UI.Templates.Breeze as a Cake Tool
#tool nuget:?package=NetcodeHub.Packages.UI.Templates.Breeze&version=1.1.4                

Instal the package

NetcodeHub.Packages.UI.Templates.Breeze
<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" />
<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:

<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>			
<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>			
<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 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();
         }
     }
 }
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.1.4 285 8/14/2024
1.1.3 539 5/23/2024
1.1.2 111 5/23/2024
1.1.0 109 5/23/2024
1.0.9 200 5/18/2024
1.0.8 737 4/21/2024
1.0.7 116 4/20/2024
1.0.6 148 4/17/2024
1.0.5 148 4/17/2024
1.0.4 169 4/14/2024
1.0.3 166 4/13/2024
1.0.2 164 4/13/2024
1.0.0 165 4/9/2024

This set and retrieve a reload value to/from local storage and reload the page once, after that remove the value from the local storage. Also Reload Service Interface has being integrated with Dependency Injection. Also You can have full page col-12 also in the HomeTemplate