diff --git a/Client/Elements/MenuItem.razor b/Client/Elements/MenuItem.razor
new file mode 100644
index 0000000..e121659
--- /dev/null
+++ b/Client/Elements/MenuItem.razor
@@ -0,0 +1,29 @@
+@using Biskilog_Accounting.Client.Models;
+@if (Item.Children.Count == 0)
+{
+
+}
+else
+{
+
+
+
+
+}
\ No newline at end of file
diff --git a/Client/Elements/MenuItem.razor.cs b/Client/Elements/MenuItem.razor.cs
new file mode 100644
index 0000000..a838aa3
--- /dev/null
+++ b/Client/Elements/MenuItem.razor.cs
@@ -0,0 +1,45 @@
+using Biskilog_Accounting.Client.Models;
+using Microsoft.AspNetCore.Components;
+using System.Linq;
+
+namespace Biskilog_Accounting.Client.Elements
+{
+ public partial class MenuItem
+ {
+ [Parameter]
+ public NavItem Item { get; set; }
+ [Parameter]
+ public double ActiveId { get; set; }
+ [Parameter]
+ public EventCallback ActiveChanged { get; set; }
+ private string m_expand { get; set; } = string.Empty;
+
+ protected override void OnParametersSet()
+ {
+ //Collapse expanded parents if none of its child is active
+ if (!Item.Children.Any(i => i.Id == ActiveId))
+ {
+ m_expand = string.Empty;
+ }
+ base.OnParametersSet();
+ }
+ private void Toggle()
+ {
+ if (String.IsNullOrEmpty(m_expand))
+ {
+ m_expand = "menu-item-animating open";
+ }
+ else
+ {
+ m_expand = "";
+ }
+ }
+
+ private void ItemClick(double a_id)
+ {
+ ActiveId = a_id;
+ ActiveChanged.InvokeAsync(a_id);
+ }
+
+ }
+}
diff --git a/Client/Elements/Sidebar.razor b/Client/Elements/Sidebar.razor
index 02035ac..efc9935 100644
--- a/Client/Elements/Sidebar.razor
+++ b/Client/Elements/Sidebar.razor
@@ -1,4 +1,5 @@
-