Improve PureTheme

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/Themes/Pure/Components/BottomNavbar/BottomNavbarViewComponent.cs

@@ -1,12 +1,22 @@
-using Microsoft.AspNetCore.Mvc;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Toolbars;
 
 namespace Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure.Components.BottomNavbar;
 
 public class BottomNavbarViewComponent : AbpViewComponent
 {
-    public virtual IViewComponentResult Invoke()
+    protected IToolbarManager ToolbarManager { get; }
+
+    public BottomNavbarViewComponent(IToolbarManager toolbarManager)
+    {
+        ToolbarManager = toolbarManager;
+    }
+
+    public virtual async Task<IViewComponentResult> InvokeAsync()
     {
-        return View();
+        var toolbar = await ToolbarManager.GetAsync(PureToolbars.BottomNavigationBar);
+        return View(toolbar);
     }
 }

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/Themes/Pure/Components/BottomNavbar/Default.cshtml

@@ -1,4 +1,12 @@
-@using Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure.Components.BottomToolbar
-<nav class="bottom-navbar">
-    @(await Component.InvokeAsync<BottomToolbarViewComponent>())
-</nav>
+@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Toolbars
+@model Toolbar
+
+@if (Model.Items.Any())
+{
+    <nav class="bottom-navbar">
+        @foreach (var toolbarItem in Model.Items.OrderBy(i => i.Order))
+        {
+            @(await Component.InvokeAsync(toolbarItem.ComponentType))
+        }
+    </nav>
+}

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/Themes/Pure/Components/PageFooter/Default.cshtml

@@ -2,27 +2,26 @@
 @using Volo.Abp.UI.Navigation;
 @using Volo.Abp.Ui.Branding
 @inject IBrandingProvider BrandingProvider
-@inject IMenuManager MenuManager
+@model ApplicationMenu
 @{
-    var menu = await MenuManager.GetAsync(PureMenus.SiteMap);
 }
 
 <div class="container-fluid py-5">
     <div class="container">
         <div class="row mb-5">
-            @foreach (var group in menu.Groups)
+            @foreach (var group in Model.Groups)
             {
                 <div class="col-lg-3 col-6">
-                    <div class="card bg-transparent border-0">
-                        <div class="card-header bg-transparent border-0 text-white-50">
+                    <div class="card border-0 mb-3">
+                        <div class="card-header bg-transparent border-0">
                             @group.DisplayName
                         </div>
                         <ul class="list-group list-group-flush">
-                            @foreach (var item in menu.Items.Where(m => m.GroupName == group.Name))
+                            @foreach (var item in Model.Items.Where(m => m.GroupName == group.Name))
                             {
                                 var url = Url.IsLocalUrl(item.Url) ? Url.Content(item.Url.EnsureStartsWith('~')) : item.Url;
                                 <li class="list-group-item border-0 bg-transparent">
-                                    <a class="nav-link text-white underline-animate d-inline" href="@url">
+                                    <a class="underline-animate d-inline" href="@url">
                                         @item.DisplayName
                                     </a>
                                 </li>
@@ -40,7 +39,7 @@
                 <li class="list-inline-item">@BrandingProvider.AppName Co., Ltd.</li>
             </ul>
             <ul class="list-inline ms-md-auto">
-                <li class="list-inline-item">Web Design By <a href="//dignite.com" class="text-reset underline-animate">Dignite</a></li>
+                <li class="list-inline-item">Web Design By <a href="//dignite.com" class="text-reset text-decoration-none">Dignite</a></li>
             </ul>
         </div>
     </div>

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/Themes/Pure/Components/PageFooter/PageFooterViewComponent.cs

@@ -1,12 +1,24 @@
-using Microsoft.AspNetCore.Mvc;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.UI.Navigation;
 
 namespace Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure.Components.PageFooter;
 
 public class PageFooterViewComponent : AbpViewComponent
 {
-    public virtual IViewComponentResult Invoke()
+    private readonly IMenuManager _menuManager;
+
+    public PageFooterViewComponent(IMenuManager menuManager)
+    {
+        _menuManager = menuManager;
+    }
+
+
+
+    public virtual async Task<IViewComponentResult> InvokeAsync()
     {
-        return View();
+        var menu = await _menuManager.GetAsync(PureMenus.SiteMap);
+        return View(menu);
     }
 }

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/Themes/Pure/Layouts/Public.cshtml

@@ -35,7 +35,7 @@
 
 <!DOCTYPE html>
 
-<html lang="@CultureInfo.CurrentUICulture.Name" dir="@rtl" data-bs-theme="dark">
+<html lang="@CultureInfo.CurrentUICulture.Name" dir="@rtl">
 <head>
     @await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Public)
 

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/Themes/Pure/Views/PageNavbar.cshtml

@@ -60,7 +60,7 @@
 
     <div class="navbar-toolbar order-1 order-md-2">
         <div class="d-lg-none">
-            <button class="btn btn-sm px-2 ms-3" type="button" data-bs-toggle="collapse" data-bs-target="#page-navbar-collapse" aria-controls="page-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="btn px-2 ms-3" type="button" data-bs-toggle="collapse" data-bs-target="#page-navbar-collapse" aria-controls="page-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                 <i class="fa fa-chevron-down mx-1" aria-hidden="true"></i>
             </button>
         </div>

modules/pure-theme/src/Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure/wwwroot/themes/pure/public.css

@@ -57,16 +57,18 @@ body.abp-public-layout > .container-fluid {
 .pure-navbar-wrapper {
     position: absolute;
     width: 100%;
-    top: 0px;
+    top: .75rem;
     transition: all .3s ease 0s;
     border-radius: 1.75rem;
-    min-height: var(--body-padding-top);
     z-index: 1022;
     width: calc(100% - 2rem);
     margin-left: 1rem;
     margin-right: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
+    background-color: rgba(var(--bs-body-bg-rgb),.8);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 }
 .pure-navbar-wrapper .navbar-brand {
     transition: all .3s ease 0s;
@@ -107,6 +109,7 @@ body.abp-public-layout > .container-fluid {
     background-color: rgba(var(--bs-body-bg-rgb),.8);
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
+    z-index: 1022;
 }
 
 @media (max-width: 991px) {
@@ -116,6 +119,7 @@ body.abp-public-layout > .container-fluid {
         margin-right: 0rem;
         padding-left: 0rem;
         padding-right: 0rem;
+        border-radius: 0rem;
         background-color: rgba(var(--bs-body-bg-rgb),.9);
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
@@ -243,6 +247,30 @@ body.abp-public-layout > .container-fluid {
     backdrop-filter: blur(10px);
     box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 }
+@media (min-width: 992px) {
+
+    /**** nav-like style ****/
+    .page-navbar .navbar-nav .nav-link {
+        margin-right: 1rem;
+        margin-left: 1rem;
+        padding-left: 0rem;
+        padding-right: 0rem;
+        position: relative;
+        /* Animation of the underline */
+        background: linear-gradient(90deg, var(--bs-nav-link-color), var(--bs-nav-link-color));
+        background-size: 0 1px;
+        background-repeat: no-repeat;
+        background-position: 0 100%;
+        transition: 0.5s all;
+    }
+
+    .page-navbar .navbar-nav .nav-link:hover,
+    .page-navbar .navbar-nav .nav-link:focus,
+    .page-navbar .navbar-nav .nav-link.active,
+    .page-navbar .navbar-nav .nav-link.show {
+        background-size: 100% 1px;
+    }
+}
 
 /** Animation of underline **/
 .underline-animate {
@@ -253,38 +281,47 @@ body.abp-public-layout > .container-fluid {
     transition: 0.5s all;
     text-decoration: none;
 }
-.underline-animate:hover {
-    background-size: 100% 1px;
-}
-.underline-animate.fw-medium,
-.underline-animate.fw-semibold{
-    background-size: 0 2px;
-}
-.underline-animate.fw-medium:hover,
-.underline-animate.fw-semibold:hover{
-    background-size: 100% 2px;
-}
-.underline-animate.fw-bolder {
-    background-size: 0 4px;
-}
-.underline-animate.fw-bolder:hover {
-    background-size: 100% 4px;
-}
-.underline-animate.text-white {
-    background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,1));
-    background-size: 0 1px;
-    background-repeat: no-repeat;
-    background-position: 0 100%;
-}
-.underline-animate.text-white:hover {
-    background-size: 100% 1px;
-}
-.underline-animate.text-black {
-    background: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,1));
-    background-size: 0 1px;
-    background-repeat: no-repeat;
-    background-position: 0 100%;
-}
-.underline-animate.text-black:hover {
-    background-size: 100% 1px;
-}
+
+    .underline-animate:hover {
+        background-size: 100% 1px;
+    }
+
+    .underline-animate.fw-medium,
+    .underline-animate.fw-semibold {
+        background-size: 0 2px;
+    }
+
+        .underline-animate.fw-medium:hover,
+        .underline-animate.fw-semibold:hover {
+            background-size: 100% 2px;
+        }
+
+    .underline-animate.fw-bolder {
+        background-size: 0 4px;
+    }
+
+        .underline-animate.fw-bolder:hover {
+            background-size: 100% 4px;
+        }
+
+    .underline-animate.text-white {
+        background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,1));
+        background-size: 0 1px;
+        background-repeat: no-repeat;
+        background-position: 0 100%;
+    }
+
+        .underline-animate.text-white:hover {
+            background-size: 100% 1px;
+        }
+
+    .underline-animate.text-black {
+        background: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,1));
+        background-size: 0 1px;
+        background-repeat: no-repeat;
+        background-position: 0 100%;
+    }
+
+        .underline-animate.text-black:hover {
+            background-size: 100% 1px;
+        }