update main layout

ComponentPractice/ComponentPractice/Components/Layout/MainLayout.razor

@@ -1,20 +1,13 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    <div class="rz-border-base-300">
-        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4 rz-border-base-300">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+<RadzenLayout>
+    <NavMenu />
+    <RadzenBody>
+        <div class="rz-p-4">
+           @Body
         </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
+    </RadzenBody>
+</RadzenLayout>
 
 <div id="blazor-error-ui">
     An unhandled error has occurred.

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -1,25 +1,22 @@
 @rendermode RenderMode.InteractiveServer
 
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">ComponentPractice</a>
-    </div>
-</div>
-
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
-
-
- <div class="nav-scrollable">
+<RadzenHeader>
+    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+        <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
+        <RadzenLabel Text="Radzen Component Practice" />
+    </RadzenStack>
+</RadzenHeader>
+<RadzenSidebar class="rz-p-2" Responsive="false" Style="width: max-content">
     <RadzenStack AlignItems="AlignItems.Center">
-        <RadzenPanelMenu Multiple="true">
+        <RadzenPanelMenu Multiple="true" DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)">
             <div onclick="document.querySelector('.navbar-toggler').click()">
                 <RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
             </div>
             <RadzenPanelMenuItem Text="Original" Icon="first_page">
-            <div onclick="document.querySelector('.navbar-toggler').click()">
-                <RadzenPanelMenuItem Text="Counter" Icon="trending_up" Path="counter" />
-                <RadzenPanelMenuItem Text="Weather" Icon="cloud" Path="weather" />
-            </div>
+                <div onclick="document.querySelector('.navbar-toggler').click()">
+                    <RadzenPanelMenuItem Text="Counter" Icon="trending_up" Path="counter" />
+                    <RadzenPanelMenuItem Text="Weather" Icon="cloud" Path="weather" />
+                </div>
             </RadzenPanelMenuItem>
             <RadzenPanelMenuItem Text="UI Fundamentals" Icon="water_drop">
                 <div onclick="document.querySelector('.navbar-toggler').click()">
@@ -51,5 +48,8 @@
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
     </RadzenStack>
-</div>
+</RadzenSidebar>
 
+@code {
+    bool sidebarExpanded = true;
+}