BarToggler: fix visibility for Tailwind provider (#5984)

Megabit · Feb 24, 2025 · 65cdd6e · 65cdd6e
1 parent 4d0320a
commit 65cdd6e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 3 deletions.
diff --git a/Source/Blazorise.Tailwind/Components/BarToggler.razor b/Source/Blazorise.Tailwind/Components/BarToggler.razor
@@ -0,0 +1,9 @@
+@inherits Blazorise.BarToggler
+<a @ref="@ElementRef" id="@ElementId" role="button" class="@ClassNames" style="@StyleNames" @onclick="@ClickHandler" @attributes="@Attributes">
+    <span>
+        @ChildContent
+    </span>
+    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+    </svg>
+</a>
diff --git a/Source/Blazorise.Tailwind/Config.cs b/Source/Blazorise.Tailwind/Config.cs
@@ -60,6 +60,7 @@ public static IServiceCollection AddTailwindComponents( this IServiceCollection
         { typeof( Blazorise.BarLink ), typeof( Components.BarLink ) },
         { typeof( Blazorise.BarMenu ), typeof( Components.BarMenu ) },
         { typeof( Blazorise.BarStart ), typeof( Components.BarStart ) },
+        { typeof( Blazorise.BarToggler ), typeof( Components.BarToggler ) },
         { typeof( Blazorise.Breadcrumb ), typeof( Components.Breadcrumb ) },
         { typeof( Blazorise.BreadcrumbItem ), typeof( Components.BreadcrumbItem ) },
         { typeof( Blazorise.BreadcrumbLink ), typeof( Components.BreadcrumbLink ) },

diff --git a/Source/Blazorise.Tailwind/Providers/TailwindClassProvider.cs b/Source/Blazorise.Tailwind/Providers/TailwindClassProvider.cs
@@ -1047,8 +1047,11 @@ public override string BarBrand( BarMode mode ) => mode == Blazorise.BarMode.Hor
         ? "b-bar-brand flex items-center"
         : "b-bar-brand";
 
-    public override string BarToggler( BarMode mode, BarTogglerMode togglerMode ) => mode == Blazorise.BarMode.Horizontal ? "b-bar-toggler navbar-toggler" :
-        togglerMode == BarTogglerMode.Popout ? "b-bar-toggler-popout" : "b-bar-toggler-inline";
+    public override string BarToggler( BarMode mode, BarTogglerMode togglerMode ) => mode == Blazorise.BarMode.Horizontal
+        ? "b-bar-toggler navbar-toggler inline-flex items-center p-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:focus:ring-gray-600"
+        : togglerMode == BarTogglerMode.Popout
+            ? "b-bar-toggler-popout"
+            : "b-bar-toggler-inline inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:focus:ring-gray-600";
 
     public override string BarTogglerCollapsed( BarMode mode, BarTogglerMode togglerMode, bool isShow ) => isShow || mode != Blazorise.BarMode.Horizontal ? null : "collapsed";
 

diff --git a/Source/Blazorise.Tailwind/Styles/components/_bar.scss b/Source/Blazorise.Tailwind/Styles/components/_bar.scss
@@ -24,3 +24,11 @@
         }
     }
 }
+
+.b-bar-vertical-inline,
+.b-bar-vertical-popout,
+.b-bar-vertical-small {
+    .b-bar-toggler-inline {
+        padding: 0.5rem;
+    }
+}
diff --git a/Source/Blazorise.Tailwind/wwwroot/blazorise.tailwind.css b/Source/Blazorise.Tailwind/wwwroot/blazorise.tailwind.css
@@ -79,6 +79,12 @@
   margin-right: 0.1rem;
 }
 
+.b-bar-vertical-inline .b-bar-toggler-inline,
+.b-bar-vertical-popout .b-bar-toggler-inline,
+.b-bar-vertical-small .b-bar-toggler-inline {
+  padding: 0.5rem;
+}
+
 .b-breadcrumb .b-breadcrumb-item:first-child > div > svg {
   display: none;
 }

diff --git a/Source/Blazorise.Tailwind/wwwroot/blazorise.tailwind.min.css b/Source/Blazorise.Tailwind/wwwroot/blazorise.tailwind.min.css