Drawer, DrwerContainer, DrawerHeader - rework

src/Connected.Components/.config/dotnet-tools.json

@@ -3,7 +3,7 @@
    "isRoot": true,
    "tools": {
       "excubo.webcompiler": {
-         "version": "3.5.0",
+         "version": "3.5.10",
          "commands": [
             "webcompiler"
          ]

src/Connected.Components/Components/Drawer/Drawer.razor

@@ -1,11 +1,25 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
+<p>@_screenBreakpoint.ToString()</p>
+@if (_screenBreakpoint.ToString().ToLower() != "xs")
+{
+    <p>Drawer</p>
+    <aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
     <div @ref="_contentRef" class="drawer-content">
         <CascadingValue Value="this" IsFixed="true">
             @ChildContent
         </CascadingValue>
     </div>
-</aside>
+    
-<Overlay Visible="@OverlayVisible" OnClick="@CloseDrawer" Class="@OverlayClass" DarkBackground="true" LockScroll=false />
+    </aside>
+    <Overlay Visible="@OverlayVisible" OnClick="@CloseDrawer" Class="@CompiledOverlayClass.Build()" DarkBackground="true" LockScroll=false />
+} else {
+    <p>Tabs</p>
+    <Tabs>
+        <CascadingValue Value="this" IsFixed="true">
+            @ChildContent
+        </CascadingValue>
+    </Tabs>
+    
+}

src/Connected.Components/Components/Drawer/Drawer.razor.cs

@@ -3,6 +3,7 @@ using Connected.Extensions;
 using Connected.Services;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
+using System.ComponentModel;
 
 namespace Connected.Components;
 
@@ -12,309 +13,21 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 	private ElementReference _contentRef;
 	private DrawerClipMode _clipMode;
 	private bool? _isOpenWhenLarge = null;
-	private bool _open, _rtl, _isRendered, _initial = true, _keepInitialState, _fixed = true;
+	private bool _open;
-	private Breakpoint _breakpoint = Breakpoint.Md, _screenBreakpoint = Breakpoint.None;
+	private bool _rtl;
+	private bool _isRendered;
+	private bool _initial = true;
+	private bool _keepInitialState;
+	private bool _fixed = true;
+	private Breakpoint _breakpoint = Breakpoint.Md;
+	private Breakpoint _screenBreakpoint = Breakpoint.None;
 	private Guid _breakpointListenerSubscriptionId;
 
-	private bool OverlayVisible => _open && !DisableOverlay &&
+	#region EventCallbacks
-		(Variant == DrawerVariant.Temporary ||
-		 (_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Mini) ||
-		 (_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Responsive));
 
-	protected string Classname =>
-	new CssBuilder("drawer")
-	  .AddClass($"drawer-fixed", Fixed)
-	  .AddClass($"drawer-pos-{GetPosition()}")
-	  .AddClass($"drawer--open", Open)
-	  .AddClass($"drawer--closed", !Open)
-	  .AddClass($"drawer--initial", _initial)
-	  .AddClass($"drawer-{Breakpoint.ToDescription()}")
-	  .AddClass($"drawer-clipped-{_clipMode.ToDescription()}")
-	  .AddClass($"theme-{Color.ToDescription()}", Color != ThemeColor.Default)
-	  .AddClass($"elevation-{Elevation}")
-	  .AddClass($"drawer-{Variant.ToDescription()}")
-	  .AddClass(AdditionalClassList)
-	.Build();
-
-	protected string OverlayClass =>
-	new CssBuilder("drawer-overlay mud-overlay-drawer")
-	  .AddClass($"drawer-pos-{GetPosition()}")
-	  .AddClass($"drawer-overlay--open", Open)
-	  .AddClass($"drawer-overlay-{Variant.ToDescription()}")
-	  .AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
-	  .AddClass($"drawer-overlay--initial", _initial)
-	.Build();
-
-	protected string Stylename =>
-	new StyleBuilder()
-		//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
-		.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
-		.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
-		.AddStyle("--mud-drawer-content-height",
-			string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,
-			Anchor == Anchor.Bottom || Anchor == Anchor.Top)
-		.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
-	.Build();
-
-	[Inject] public IBreakpointService Breakpointistener { get; set; }
-
-	[CascadingParameter] DrawerContainer DrawerContainer { get; set; }
-
-	[CascadingParameter(Name = "RightToLeft")]
-	bool RightToLeft
-	{
-		get => _rtl;
-		set
-		{
-			if (_rtl != value)
-			{
-				_rtl = value;
-				DrawerContainer?.FireDrawersChanged();
-			}
-		}
-	}
-
-	/// <summary>
-	/// If true, drawer position will be fixed. (CSS position: fixed;)
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public bool Fixed
-	{
-		get => _fixed && DrawerContainer is Layout;
-		set
-		{
-			if (_fixed == value)
-				return;
-			_fixed = value;
-		}
-	}
-
-	/// <summary>
-	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Appearance)]
-	public int Elevation { set; get; } = 1;
-
-	/// <summary>
-	/// Side from which the drawer will appear.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public Anchor Anchor { get; set; } = Anchor.Start;
-
-	/// <summary>
-	/// The color of the component. It supports the theme colors.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Appearance)]
-	public ThemeColor Color { get; set; } = ThemeColor.Default;
-
-	/// <summary>
-	/// Variant of the drawer. It specifies how the drawer will be displayed.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public DrawerVariant Variant { get; set; } = DrawerVariant.Responsive;
-
-	/// <summary>
-	/// Child content of component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
-	/// <summary>
-	/// Show overlay for responsive and temporary drawers.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public bool DisableOverlay { get; set; } = false;
-
-	/// <summary>
-	/// Preserve open state for responsive drawer when window resized above <see cref="Breakpoint" />.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public bool PreserveOpenState { get; set; } = false;
-
-	/// <summary>
-	/// Open drawer automatically on mouse enter when <see cref="Variant" /> parameter is set to <see cref="DrawerVariant.Mini" />.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public bool OpenMiniOnHover { get; set; }
-
-	/// <summary>
-	/// Switching point for responsive drawers
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public Breakpoint Breakpoint
-	{
-		get => _breakpoint;
-		set
-		{
-			if (value == _breakpoint)
-				return;
-
-			_breakpoint = value;
-			if (_isRendered)
-			{
-				UpdateBreakpointState(_screenBreakpoint);
-			}
-
-			DrawerContainer?.FireDrawersChanged();
-		}
-	}
-
-	/// <summary>
-	/// Sets the opened state on the drawer. Can be used with two-way binding to close itself on navigation.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public bool Open
-	{
-		get => _open;
-		set
-		{
-			if (_open == value)
-			{
-				return;
-			}
-			_open = value;
-			if (_isRendered && _initial && !_keepInitialState)
-			{
-				_initial = false;
-			}
-			if (_keepInitialState)
-			{
-				_keepInitialState = false;
-			}
-			if (_isRendered && value && (Anchor == Anchor.Top || Anchor == Anchor.Bottom))
-			{
-				_ = UpdateHeight();
-			}
-
-			DrawerContainer?.FireDrawersChanged();
-			OpenChanged.InvokeAsync(_open);
-		}
-	}
 
 	[Parameter] public EventCallback<bool> OpenChanged { get; set; }
 
-	/// <summary>
-	/// Width of left/right drawer. Only for non-fixed drawers.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Appearance)]
-	public string Width { get; set; }
-
-	/// <summary>
-	/// Width of left/right drawer. Only for non-fixed drawers.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Appearance)]
-	public string MiniWidth { get; set; }
-
-	/// <summary>
-	/// Height of top/bottom temporary drawer
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Appearance)]
-	public string Height { get; set; }
-
-	/// <summary>
-	/// Specify how the drawer should behave inside a MudLayout. It affects the position relative to <b>MudAppbar</b>
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
-	public DrawerClipMode ClipMode
-	{
-		get => _clipMode;
-		set
-		{
-			if (_clipMode == value)
-			{
-				return;
-			}
-			_clipMode = value;
-			if (Fixed)
-			{
-				DrawerContainer?.FireDrawersChanged();
-			}
-			StateHasChanged();
-		}
-	}
-
-	protected override void OnInitialized()
-	{
-		if (Variant != DrawerVariant.Temporary)
-		{
-			DrawerContainer?.Add(this);
-		}
-		base.OnInitialized();
-	}
-
-	protected override async Task OnAfterRenderAsync(bool firstRender)
-	{
-		if (firstRender)
-		{
-			await UpdateHeight();
-			var result = await Breakpointistener.Subscribe(UpdateBreakpointState);
-			var currentBreakpoint = result.Breakpoint;
-
-			_breakpointListenerSubscriptionId = result.SubscriptionId;
-
-			_screenBreakpoint = result.Breakpoint;
-			if (_screenBreakpoint < Breakpoint && _open)
-			{
-				_keepInitialState = true;
-				await OpenChanged.InvokeAsync(false);
-			}
-
-			_isRendered = true;
-			if (string.IsNullOrWhiteSpace(Height) && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
-			{
-				StateHasChanged();
-			}
-		}
-
-		await base.OnAfterRenderAsync(firstRender);
-	}
-
-	public void Dispose()
-	{
-		Dispose(true);
-		GC.SuppressFinalize(this);
-	}
-
-	int _disposeCount;
-	public virtual void Dispose(bool disposing)
-	{
-		if (Interlocked.Increment(ref _disposeCount) == 1)
-		{
-			if (disposing)
-			{
-				DrawerContainer?.Remove(this);
-
-				if (_breakpointListenerSubscriptionId != default)
-				{
-					Breakpointistener.Unsubscribe(_breakpointListenerSubscriptionId).AndForget();
-				}
-			}
-		}
-	}
-
-	private void CloseDrawer()
-	{
-		if (Open)
-		{
-			OpenChanged.InvokeAsync(false);
-		}
-	}
-
 	public async Task OnNavigation()
 	{
 		if (Variant == DrawerVariant.Temporary ||
@@ -332,11 +45,6 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 		InvokeAsync(() => UpdateBreakpointState(breakpoint));
 	}
 
-	private async Task UpdateHeight()
-	{
-		_height = (await _contentRef.MudGetBoundingClientRectAsync())?.Height ?? 0;
-	}
-
 	private async void UpdateBreakpointState(Breakpoint breakpoint)
 	{
 		var isStateChanged = false;
@@ -367,7 +75,12 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 			}
 		}
 
+		if (_breakpoint != _screenBreakpoint)
+		{
+			isStateChanged = true;
+		}
 		_screenBreakpoint = breakpoint;
+
 		if (isStateChanged)
 		{
 			StateHasChanged();
@@ -408,4 +121,310 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 			await OpenChanged.InvokeAsync(false);
 		}
 	}
+
+	protected override void OnInitialized()
+	{
+		if (Variant != DrawerVariant.Temporary)
+		{
+			DrawerContainer?.Add(this);
+		}
+		base.OnInitialized();
+	}
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+			//await UpdateHeight();
+			var result = await Breakpointistener.Subscribe(UpdateBreakpointState);
+			//var currentBreakpoint = result.Breakpoint;
+
+			_breakpointListenerSubscriptionId = result.SubscriptionId;
+
+			var refresh = false;
+
+			if (_screenBreakpoint != result.Breakpoint) refresh = true;
+			_screenBreakpoint = result.Breakpoint;
+			if (_screenBreakpoint < Breakpoint && _open)
+			{
+				_keepInitialState = true;
+				await OpenChanged.InvokeAsync(false);
+			}
+
+			_isRendered = true;
+			if (Anchor == Anchor.Bottom || Anchor == Anchor.Top || _screenBreakpoint == Breakpoint.None)
+			{
+				refresh = true;
+			}
+			if (refresh) StateHasChanged();
+		}
+
+		await base.OnAfterRenderAsync(firstRender);
+	}
+
+	public void Dispose()
+	{
+		Dispose(true);
+		GC.SuppressFinalize(this);
+	}
+
+	int _disposeCount;
+	public virtual void Dispose(bool disposing)
+	{
+		if (Interlocked.Increment(ref _disposeCount) == 1)
+		{
+			if (disposing)
+			{
+				DrawerContainer?.Remove(this);
+
+				if (_breakpointListenerSubscriptionId != default)
+				{
+					Breakpointistener.Unsubscribe(_breakpointListenerSubscriptionId).AndForget();
+				}
+			}
+		}
+	}
+
+	#endregion
+
+	#region Content placeholders
+
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment ChildContent { get; set; }
+
+	[CascadingParameter] DrawerContainer DrawerContainer { get; set; }
+
+	[Inject] public IBreakpointService Breakpointistener { get; set; }
+
+	[CascadingParameter(Name = "RightToLeft")]
+	bool RightToLeft
+	{
+		get => _rtl;
+		set
+		{
+			if (_rtl != value)
+			{
+				_rtl = value;
+				DrawerContainer?.FireDrawersChanged();
+			}
+		}
+	}
+
+	#endregion
+
+	#region Styling properties
+
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("drawer")
+			  .AddClass($"drawer-fixed", Fixed)
+			  .AddClass($"drawer-pos-{GetPosition()}")
+			  .AddClass($"drawer--open", Open)
+			  .AddClass($"drawer--closed", !Open)
+			  .AddClass($"drawer--initial", _initial)
+			  .AddClass($"drawer-{Breakpoint.ToDescription()}")
+			  .AddClass($"drawer-clipped-{_clipMode.ToDescription()}")
+			  //.AddClass($"theme-{Color.ToDescription()}", Color != ThemeColor.Default)
+			  .AddClass($"elevation-{Elevation}")
+			  .AddClass($"drawer-{Variant.ToDescription()}")
+			  .AddClass(ClassList);
+		}
+	}
+
+	protected StyleBuilder CompiledStyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(StyleList);
+			//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
+			//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
+			//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
+			//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
+			//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
+
+		}
+	}
+
+	protected CssBuilder CompiledOverlayClass
+	{
+		get
+		{
+			return new CssBuilder("drawer-overlay mud-overlay-drawer")
+	  .AddClass($"drawer-pos-{GetPosition()}")
+	  .AddClass($"drawer-overlay--open", Open)
+	  .AddClass($"drawer-overlay-{Variant.ToDescription()}")
+	  .AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
+	  .AddClass($"drawer-overlay--initial", _initial);
+		}
+	}
+
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? StyleList { get; set; }
+
+	/// <summary>
+	/// If true, drawer position will be fixed. (CSS position: fixed;)
+	/// </summary>
+	[Parameter]
+	public bool Fixed
+	{
+		get => _fixed && DrawerContainer is Layout;
+		set
+		{
+			if (_fixed == value)
+				return;
+			_fixed = value;
+		}
+	}
+
+	/// <summary>
+	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+	/// </summary>
+	[Parameter]
+	public int Elevation { set; get; } = 1;
+
+	/// <summary>
+	/// Side from which the drawer will appear.
+	/// </summary>
+	[Parameter]
+	public Anchor Anchor { get; set; } = Anchor.Start;
+
+	/*
+	/// <summary>
+	/// The color of the component. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	public ThemeColor Color { get; set; } = ThemeColor.Default;
+	*/
+
+	/// <summary>
+	/// Variant of the drawer. It specifies how the drawer will be displayed.
+	/// </summary>
+	[Parameter]
+	public DrawerVariant Variant { get; set; } = DrawerVariant.Responsive;
+
+	
+	/// <summary>
+	/// Show overlay for responsive and temporary drawers.
+	/// </summary>
+	[Parameter]
+	public bool DisableOverlay { get; set; } = false;
+
+	/// <summary>
+	/// Preserve open state for responsive drawer when window resized above <see cref="Breakpoint" />.
+	/// </summary>
+	[Parameter]
+	public bool PreserveOpenState { get; set; } = false;
+
+	/// <summary>
+	/// Open drawer automatically on mouse enter when <see cref="Variant" /> parameter is set to <see cref="DrawerVariant.Mini" />.
+	/// </summary>
+	[Parameter]
+	public bool OpenMiniOnHover { get; set; }
+
+	/// <summary>
+	/// Specify how the drawer should behave inside a MudLayout. It affects the position relative to <b>MudAppbar</b>
+	/// </summary>
+	[Parameter]
+	public DrawerClipMode ClipMode
+	{
+		get => _clipMode;
+		set
+		{
+			if (_clipMode == value)
+			{
+				return;
+			}
+			_clipMode = value;
+			if (Fixed)
+			{
+				DrawerContainer?.FireDrawersChanged();
+			}
+			StateHasChanged();
+		}
+	}
+
+	private bool OverlayVisible => _open && !DisableOverlay &&
+		(Variant == DrawerVariant.Temporary ||
+		 (_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Mini) ||
+		 (_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Responsive));
+
+	/// <summary>
+	/// Switching point for responsive drawers
+	/// </summary>
+	[Parameter]
+	public Breakpoint Breakpoint
+	{
+		get => _breakpoint;
+		set
+		{
+			if (value == _breakpoint)
+				return;
+
+			_breakpoint = value;
+			if (_isRendered)
+			{
+				UpdateBreakpointState(_screenBreakpoint);
+			}
+
+			DrawerContainer?.FireDrawersChanged();
+		}
+	}
+
+	/// <summary>
+	/// Sets the opened state on the drawer. Can be used with two-way binding to close itself on navigation.
+	/// </summary>
+	[Parameter]
+	public bool Open
+	{
+		get => _open;
+		set
+		{
+			if (_open == value)
+			{
+				return;
+			}
+			_open = value;
+			if (_isRendered && _initial && !_keepInitialState)
+			{
+				_initial = false;
+			}
+			if (_keepInitialState)
+			{
+				_keepInitialState = false;
+			}
+			/*if (_isRendered && value && (Anchor == Anchor.Top || Anchor == Anchor.Bottom))
+			{
+				_ = UpdateHeight();
+			}*/
+
+			DrawerContainer?.FireDrawersChanged();
+			OpenChanged.InvokeAsync(_open);
+		}
+	}
+	private void CloseDrawer()
+	{
+		if (Open)
+		{
+			OpenChanged.InvokeAsync(false);
+		}
+	}
+
+
+	#endregion
+
 }

src/Connected.Components/Components/Drawer/DrawerContainer.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="CustomAttributes" style="@Stylename" class="@Classname">
+<div @attributes="CustomAttributes" style="@CompiledStyleList.Build()" class="@CompiledClassList.Build()">
     <CascadingValue Value="this" IsFixed="true">
         @ChildContent
     </CascadingValue>

src/Connected.Components/Components/Drawer/DrawerContainer.razor.cs

@@ -10,44 +10,19 @@ public partial class DrawerContainer : UIComponent
 	protected bool Fixed { get; set; } = false;
 	private List<Drawer> _drawers = new();
 
-	protected virtual string Classname =>
+	#region Event callbacks
-	new CssBuilder()
-		.AddClass(GetDrawerClass(FindLeftDrawer()))
-		.AddClass(GetDrawerClass(FindRightDrawer()))
-		.AddClass(AdditionalClassList)
-	.Build();
 
-	protected string Stylename =>
+	internal void FireDrawersChanged() => StateHasChanged();
-	new StyleBuilder()
+
-		.AddStyle("--mud-drawer-width-left", GetDrawerWidth(FindLeftDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindLeftDrawer())))
+	#endregion
-		.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
+
-		.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
+	#region Content placeholders
-		.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
-	.Build();
 
 	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
 
 	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
 	public RenderFragment ChildContent { get; set; }
 
-	internal void FireDrawersChanged() => StateHasChanged();
-
-	internal void Add(Drawer drawer)
-	{
-		if (Fixed && !drawer.Fixed)
-			return;
-
-		_drawers.Add(drawer);
-		StateHasChanged();
-	}
-
-	internal void Remove(Drawer drawer)
-	{
-		_drawers.Remove(drawer);
-		StateHasChanged();
-	}
-
 	private string GetDrawerClass(Drawer drawer)
 	{
 		if (drawer == null)
@@ -65,22 +40,6 @@ public partial class DrawerContainer : UIComponent
 		return className;
 	}
 
-	private string GetDrawerWidth(Drawer drawer)
-	{
-		if (drawer == null)
-			return string.Empty;
-
-		return drawer.Width;
-	}
-
-	private string GetMiniDrawerWidth(Drawer drawer)
-	{
-		if (drawer == null)
-			return string.Empty;
-
-		return drawer.MiniWidth;
-	}
-
 	private Drawer FindLeftDrawer()
 	{
 		var anchor = RightToLeft ? Anchor.End : Anchor.Start;
@@ -104,4 +63,79 @@ public partial class DrawerContainer : UIComponent
 		var anchor = RightToLeft ? Anchor.Start : Anchor.End;
 		return _drawers.FirstOrDefault(d => d.Variant == DrawerVariant.Mini && (d.Anchor == anchor || d.Anchor == Anchor.Right));
 	}
+
+	#endregion
+
+	#region Styling properties
+
+	protected virtual CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder()
+			  .AddClass(ClassList);
+		}
+	}
+
+	/*
+	protected virtual string Classname =>
+	new CssBuilder()
+		/*.AddClass(GetDrawerClass(FindLeftDrawer()))
+		.AddClass(GetDrawerClass(FindRightDrawer()))
+		.AddClass(ClassList)
+	.Build();
+
+	protected string Stylename =>
+	new StyleBuilder()
+		.AddStyle(StyleList)
+		.AddStyle("--mud-drawer-width-left", GetDrawerWidth(FindLeftDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindLeftDrawer())))
+		.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
+		.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
+		.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
+	.Build();*/
+
+	protected StyleBuilder CompiledStyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(StyleList);
+			//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
+			//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
+			//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
+			//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
+			//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
+
+		}
+	}
+
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? StyleList { get; set; }
+
+	#endregion
+
+
+	internal void Add(Drawer drawer)
+	{
+		if (Fixed && !drawer.Fixed)
+			return;
+
+		_drawers.Add(drawer);
+		StateHasChanged();
+	}
+
+	internal void Remove(Drawer drawer)
+	{
+		_drawers.Remove(drawer);
+		StateHasChanged();
+	}
 }

src/Connected.Components/Components/Drawer/DrawerHeader.razor

@@ -3,13 +3,13 @@
 
 @if (LinkToIndex)
 {
-    <a @attributes="CustomAttributes" class="@Classname" href="/">
+    <a @attributes="CustomAttributes" class="@CompiledClassList.Build()" href="/">
         @ChildContent
     </a>
 }
 else
 {
-    <div @attributes="CustomAttributes" class="@Classname">
+    <div @attributes="CustomAttributes" class="@CompiledClassList.Build()">
         @ChildContent
     </div>
 }

src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs

@@ -1,34 +1,58 @@
-using Connected.Annotations;
+using Connected.Utilities;
-using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 public partial class DrawerHeader : UIComponent
 {
-	protected string Classname =>
+	#region Event callbacks
-	new CssBuilder("drawer-header")
+	#endregion
-		.AddClass($"drawer-header-dense", Dense)
+
-	  .AddClass(AdditionalClassList)
+	#region Content placeholders
-	.Build();
 
 	/// <summary>
 	/// If true, compact padding will be used, same as the Appbar.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Drawer.Appearance)]
 	public bool Dense { get; set; }
 
 	/// <summary>
 	/// Child content of component.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
 	public RenderFragment ChildContent { get; set; }
 
 	/// <summary>
 	/// If true, the component will link to index page with an a element instead of div.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Drawer.Behavior)]
 	public bool LinkToIndex { get; set; }
+
+	#endregion
+
+	#region Styling properties
+
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? StyleList { get; set; }
+
+	#endregion
+
+	protected virtual CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("drawer-header")
+				.AddClass($"drawer-header-dense", Dense)
+			  .AddClass(ClassList);
+		}
+	}
+	
 }

src/Connected.Components/Components/Layout/Layout.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits DrawerContainer
 
-<div @attributes="CustomAttributes" class="@Classname" style="@Stylename">
+<div @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
     <CascadingValue IsFixed="true" Value="@this">
         @ChildContent
     </CascadingValue>

src/Connected.Components/Components/Layout/Layout.razor.cs

@@ -1,13 +1,33 @@
 using Connected.Utilities;
+using System.Net;
 
 namespace Connected.Components;
 
 public partial class Layout : DrawerContainer
 {
-	protected override string Classname =>
+	protected virtual CssBuilder CompiledClassList
-	new CssBuilder("layout")
+	{
-		.AddClass(base.Classname)
+		get
-		.Build();
+		{
+			return new CssBuilder("layout")
+			  .AddClass(base.ClassList);
+		}
+	}
+
+	protected StyleBuilder CompiledStyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(base.StyleList);
+			//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
+			//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
+			//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
+			//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
+			//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
+
+		}
+	}
 
 	public Layout()
 	{

src/Connected.Components/Navigation.cs

@@ -0,0 +1,119 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Connected;
+internal class Navigation
+{
+	private const int MaxPagesOnList = 256;
+	private readonly NavigationManager _navigationManager;
+
+	[Inject]
+	private IJSRuntime JS { get; set; }
+
+	private List<string> _backPages;
+	private List<string> _forwardPages;
+
+	public Navigation(NavigationManager navigationManager)
+	{
+		_navigationManager = navigationManager;
+		_backPages = new List<string>();
+		_forwardPages = new List<string>();
+	}
+
+	/// <summary>
+	/// Navigates to the specified url.
+	/// </summary>
+	/// <param name="url">The destination url (relative or absolute).</param>
+	public async Task NavigateTo(string url, Target target=Target._self)
+	{
+		if (!target.Equals("_self"))
+		{
+			if (!url.Equals(_navigationManager.Uri))
+				_backPages.Add(_navigationManager.Uri);
+			_navigationManager.NavigateTo(url);
+		} else
+		{
+			if (JS is not null)
+				await JS.InvokeVoidAsync("open", url, target.ToString());
+		}
+	}
+
+	/// <summary>
+	/// Returns true if it is possible to navigate to the previous url.
+	/// </summary>
+	private bool CanNavigateBack()
+	{
+		return (_backPages.Count > 1);
+	}
+
+	private bool CanNavigateForward()
+	{
+		return (_forwardPages.Count > 1);
+	}
+
+	private void UpdateBackPageList()
+	{
+		string url = _navigationManager.Uri;
+		_backPages.Add(url);
+		if (_backPages.Count() > MaxPagesOnList)
+		{
+			_backPages.RemoveAt(0);
+		}
+	}
+
+	private string GetFromBackPageList()
+	{
+		string result = _backPages.Last();
+		_backPages.RemoveAt(_backPages.Count()-1);
+		return result;
+	}
+
+	private string GetFromForwardPageList()
+	{
+		string result = _forwardPages.Last();
+		_forwardPages.RemoveAt(_forwardPages.Count() - 1);
+		return result;
+	}
+
+	private void UpdateForwardPageList()
+	{
+		string url = _navigationManager.Uri;
+		_forwardPages.Add(url);
+		if (_forwardPages.Count() > MaxPagesOnList)
+		{
+			_forwardPages.RemoveAt(0);
+		}
+	}
+
+	/// <summary>
+	/// Navigates to the previous url if possible or does nothing if it is not.
+	/// </summary>
+	public void Back()
+	{
+		if (!CanNavigateBack()) return;
+		var backPageUrl = GetFromBackPageList();
+		UpdateForwardPageList();
+
+		NavigateTo(backPageUrl);
+	}
+
+	/// <summary>
+	/// Navigates to the forward url if possible or does nothing if it is not.
+	/// </summary>
+	public void Forward()
+	{
+		if (!CanNavigateForward()) return;
+		var forwardPageUrl = GetFromForwardPageList();
+		UpdateBackPageList();
+
+		NavigateTo(forwardPageUrl);
+	}
+}
+
+enum Target
+{
+	_self,
+	_blank,
+	_parent,
+	_top
+}