pannel munu and fix layout

ComponentPractice/ComponentPractice/Components/Layout/MainLayout.razor

@@ -1,12 +1,12 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="sidebar">
+    <div class="rz-border-base-300">
         <NavMenu />
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 rz-border-base-300">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 

ComponentPractice/ComponentPractice/Components/Layout/MainLayout.razor.css

@@ -9,7 +9,7 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
 }
 
 .top-row {

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -1,4 +1,6 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@rendermode RenderMode.InteractiveServer
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">ComponentPractice</a>
     </div>
@@ -6,7 +8,31 @@
 
 <input type="checkbox" title="Navigation menu" class="navbar-toggler" />
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+<RadzenStack AlignItems="AlignItems.Center">
+    <div class="nav-scrollable flex-column">
+        <RadzenPanelMenu Multiple="true">
+            <RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
+            <RadzenPanelMenuItem Text="Original" Icon="first_page">
+                <RadzenPanelMenuItem Text="Counter" Icon="trending_up" Path="counter" />
+                <RadzenPanelMenuItem Text="Weather" Icon="cloud" Path="weather" />
+            </RadzenPanelMenuItem>
+            <RadzenPanelMenuItem Text="UI Fundamentals" Icon="water_drop">
+                <RadzenPanelMenuItem Text="Typo" Icon="text_fields" Path="typo" />
+                <RadzenPanelMenuItem Text="Icon" Icon="emoji_emotions" Path="icon" />
+                <RadzenPanelMenuItem Text="Borders" Icon="border_outer" Path="borders" />
+                <RadzenPanelMenuItem Text="SRBS" Icon="sort_by_alpha" Path="srbs" />
+            </RadzenPanelMenuItem>
+            <RadzenPanelMenuItem Text="DataGrid" Icon="calendar_view_month">
+                <RadzenPanelMenuItem Text="Basic" Icon="view_headline" Path="datagrid" />
+                <RadzenPanelMenuItem Text="Advanced" Icon="view_headline" Path="datagridadv" />
+                <RadzenPanelMenuItem Text="REST" Icon="view_headline" Path="datagridrest" />
+                <RadzenPanelMenuItem Text="Editing" Icon="view_headline" Path="datagridedit" />
+            </RadzenPanelMenuItem>
+        </RadzenPanelMenu>
+    </div>
+</RadzenStack>
+
+@* <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
@@ -74,5 +100,5 @@
             </NavLink>
         </div>
     </nav>
-</div>
+</div> *@
 

ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor

@@ -11,7 +11,7 @@
     }
 </style>
 
-<RadzenCard class="rz-p-12" style="width: 1000px;">
+<RadzenCard class="rz-p-12" style="rz-m-12">
     <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>InLine Editing</strong></RadzenText>
     <RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" Text="Add New Order" Click="@InsertRow" Disabled="@(employeesToInsert.Count > 0)" />
     <RadzenDataGrid @ref="grid" TItem="@Employee" Data="@employees" IsLoading="@isLoading" EditMode="DataGridEditMode.Single"