layout basic

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -44,6 +44,11 @@
                     <RadzenPanelMenuItem Text="Pager" Icon="format_list_bulleted" Path="datalistpager" />
                 </div>
             </RadzenPanelMenuItem>
+            <RadzenPanelMenuItem Text="Layout" Icon="dashboard">
+                <div onclick="document.querySelector('.navbar-toggler').click()">
+                    <RadzenPanelMenuItem Text="Basic" Icon="dashboard_customize" Path="layout" />
+                </div>
+            </RadzenPanelMenuItem>
         </RadzenPanelMenu>
     </RadzenStack>
 </div>

ComponentPractice/ComponentPractice/Components/Pages/Layout.razor

@@ -0,0 +1,137 @@
+@page "/layout"
+
+@rendermode RenderMode.InteractiveServer
+
+<style>
+    .sample-layout {
+        max-height: 400px;
+    }
+</style>
+
+<RadzenCard class="rz-p-12 rz-m-12">
+    <RadzenText TextStyle="TextStyle.H5">Sidebar, Header and Footer</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
+    <RadzenLayout class="sample-layout">
+        <RadzenHeader>
+            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+                <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)"/>
+                <RadzenLabel Text="Header"/>
+            </RadzenStack>
+        </RadzenHeader>
+        <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
+            <RadzenPanelMenu>
+                <RadzenPanelMenuItem Text="Home" Icon="home" />
+                <RadzenPanelMenuItem Text="User" Icon="account_box" />
+            </RadzenPanelMenu>
+            <div class="rz-p-4">
+                Sidebar
+            </div>
+        </RadzenSidebar>
+        <RadzenBody>
+            <div class="rz-p-4">
+                Body
+            </div>
+        </RadzenBody>
+        <RadzenFooter>
+            Footer
+        </RadzenFooter>
+    </RadzenLayout>
+</RadzenCard>
+
+<RadzenCard class="rz-p-12 rz-m-12">
+    <RadzenText TextStyle="TextStyle.H5">Full-height Sidebar</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
+    <RadzenLayout class="sample-layout">
+        <RadzenHeader>
+            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+                <RadzenSidebarToggle Click="@(() => sidebar2Expanded = !sidebar2Expanded)" />
+                <RadzenLabel Text="Header" />
+            </RadzenStack>
+        </RadzenHeader>
+        <RadzenSidebar @bind-Expanded="@sidebar2Expanded">
+            <RadzenPanelMenu>
+                <RadzenPanelMenuItem Text="Home" Icon="home" />
+                <RadzenPanelMenuItem Text="User" Icon="account_box" />
+            </RadzenPanelMenu>
+            <div class="rz-p-4">
+                Sidebar
+            </div>
+        </RadzenSidebar>
+        <RadzenBody>
+            <div class="rz-p-4">
+                Body
+            </div>
+        </RadzenBody>
+    </RadzenLayout>
+</RadzenCard>
+
+<RadzenCard class="rz-p-12 rz-m-12" >
+    <RadzenText TextStyle="TextStyle.H5">Overlay Sidebar</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
+    <RadzenLayout class="sample-layout" Style="position: relative">
+        <RadzenHeader>
+            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+                <RadzenSidebarToggle Click="@(() => sidebar3Expanded = !sidebar3Expanded)" />
+                <RadzenLabel Text="Header" />
+            </RadzenStack>
+        </RadzenHeader>
+        <RadzenSidebar @bind-Expanded="@sidebar3Expanded" Style="position: absolute">
+            <RadzenPanelMenu>
+                <RadzenPanelMenuItem Text="Home" Icon="home" />
+                <RadzenPanelMenuItem Text="User" Icon="account_box" />
+            </RadzenPanelMenu>
+            <div class="rz-p-4">
+                Sidebar
+            </div>
+        </RadzenSidebar>
+        <RadzenBody>
+            <div class="rz-p-4">
+                Body
+            </div>
+        </RadzenBody>
+        <RadzenFooter>
+            Footer
+        </RadzenFooter>
+    </RadzenLayout>
+</RadzenCard>
+
+<RadzenCard class="rz-p-12 rz-m-12">
+    <RadzenText TextStyle="TextStyle.H5">Icon Sidebar</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
+    <RadzenLayout class="sample-layout">
+        <RadzenHeader>
+            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+                <RadzenSidebarToggle Click="@(() => sidebar4Expanded = !sidebar4Expanded)" />
+                <RadzenLabel Text="Header" />
+            </RadzenStack>
+        </RadzenHeader>
+        <RadzenSidebar Responsive="false" Style="width: max-content">
+            <RadzenPanelMenu DisplayStyle="@(sidebar4Expanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="true">
+                <RadzenPanelMenuItem Text="Home" Icon="home" />
+                <RadzenPanelMenuItem Text="User" Icon="account_box" />
+                <RadzenPanelMenuItem Text="UI Fundamentals" Icon="auto_awesome">
+                    <RadzenPanelMenuItem Text="Themes" Icon="color_lens" />
+                    <RadzenPanelMenuItem Text="Colors" Icon="invert_colors" />
+                </RadzenPanelMenuItem>
+            </RadzenPanelMenu>
+            <div class="rz-p-4">
+                Sidebar
+            </div>
+        </RadzenSidebar>
+        <RadzenBody>
+            <div class="rz-p-4">
+                Body
+            </div>
+        </RadzenBody>
+        <RadzenFooter>
+            Footer
+        </RadzenFooter>
+    </RadzenLayout>
+</RadzenCard>
+
+@code {
+    bool sidebar1Expanded = true;
+    bool sidebar2Expanded = true;
+    bool sidebar3Expanded = true;
+    bool sidebar4Expanded = true;
+}