fix: menu title padding and layout demo (#186)

components/layout/Sider.razor

@@ -14,7 +14,7 @@
             @ChildContent
         </div>
     </CascadingValue>
-    @if (Collapsible && Breakpoint != null)
+    @if (Collapsible && !NoTrigger)
     {
         <div class="ant-layout-sider-trigger" style="width: @($"{width}px")" @onclick="ToggleCollapsed">
             @Trigger

components/layout/Sider.razor.cs

@@ -22,6 +22,8 @@ namespace AntDesign
 
         [Parameter] public RenderFragment Trigger { get; set; }
 
+        [Parameter] public bool NoTrigger { get; set; }
+
         [CascadingParameter] public Layout Parent { get; set; }
 
         [Parameter] public BreakpointType Breakpoint { get; set; }
@@ -82,11 +84,10 @@ namespace AntDesign
         {
             base.OnInitialized();
             Parent?.HasSider();
-            if (Trigger == null)
+            if (Trigger == null && !NoTrigger)
             {
                 Trigger = defaultTrigger;
             }
-
             isCollapsed = Collapsed;
             SetClass();
         }

components/menu/MenuItem.razor

@@ -2,7 +2,7 @@
 @inherits AntDomComponentBase
 
 <CascadingValue Value="this">
-    <li class="@ClassMapper.Class" role="menuitem" style="@Style" @onclick="HandleOnClick" @key="Key">
+    <li class="@ClassMapper.Class" role="menuitem" style=" @(PaddingLeft>0? $"padding-left:{PaddingLeft}px;":"") @Style" @onclick="HandleOnClick" @key="Key">
         @ChildContent
     </li>
 </CascadingValue>

components/menu/MenuItem.razor.cs

@@ -33,6 +33,8 @@ namespace AntDesign
         public bool IsSelected { get; private set; }
         private string _key;
 
+        private int PaddingLeft => RootMenu.InternalMode == MenuMode.Inline ? ((ParentMenu?.Level ?? 0) + 1) * 24 : 0;
+
         private void SetClass()
         {
             string prefixCls = $"{RootMenu.PrefixCls}-item";

components/menu/SubMenu.razor

@@ -9,7 +9,7 @@
 @if (RootMenu.InternalMode == MenuMode.Inline)
 {
     <li class="@ClassMapper.Class" role="menuitem" @key="Key" style="position:relative;@Style">
-        <div class="@(prefixCls)-title" role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
+        <div class="@(prefixCls)-title" style="padding-left: @(PaddingLeft)px; " role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
 
             @if (Title.IsT0)
             {

components/menu/SubMenu.razor.cs

@@ -38,6 +38,10 @@ namespace AntDesign
         [Parameter]
         public EventCallback<MouseEventArgs> OnTitleClicked { get; set; }
 
+        internal int Level => RootMenu.InternalMode == MenuMode.Inline ? (Parent?.Level ?? 0) + 1 : 0;
+
+        private int PaddingLeft => Level * 24;
+
         private ClassMapper SubMenuMapper { get; } = new ClassMapper();
 
         private bool _isSelected;

site/AntBlazor.Docs/Demos/Layout/demo/CustomTrigger.razor

@@ -9,7 +9,7 @@
 }
 
 <Layout>
-    <Sider Collapsible Collapsed=@collapsed>
+    <Sider Collapsible Collapsed=@collapsed NoTrigger>
         <div class="logo" />
         <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[]{"1"})>
             <MenuItem Key="1">

site/AntBlazor.Docs/Demos/Menu/demo/Horizontal.razor

@@ -28,7 +28,7 @@
 {
     RenderFragment sub1Title =
         @<Template>
-            <AntIcon Type="appstore" Theme="outline"></AntIcon>
+            <AntIcon Type="setting" Theme="outline"></AntIcon>
             Navigation Three - Submenu
         </Template>;
 }

site/AntBlazor.Docs/Demos/Menu/demo/Inline.razor

@@ -1,4 +1,4 @@
-<Menu Style="width: 256;"
+<Menu Style="width: 256px;"
       DefaultSelectedKeys=@(new[]{"1"})
       DefaultOpenKeys=@(new[]{"sub1"})
       Mode=@MenuMode.Inline>

site/AntBlazor.Docs/Demos/Menu/demo/InlineCollapsed.razor

@@ -1,4 +1,4 @@
-<div style="width: 256;">
+<div style="width: 256px;">
     <Button Type="primary" OnClick="ToggleCollapsed" Style="margin-bottom: 16px">
         @if (collapsed)
         {
@@ -25,7 +25,7 @@
             <span>Option 2</span>
         </MenuItem>
         <MenuItem Key="3">
-            <AntIcon Type="contaainer" Theme="outline"></AntIcon>
+            <AntIcon Type="container" Theme="outline"></AntIcon>
             <span>Option 3</span>
         </MenuItem>
         <SubMenu Key="sub1" Title=sub1Title >

site/AntBlazor.Docs/Pages/Mock.razor

@@ -1,12 +1,18 @@
 @page "/mock"
 @using System.Reflection
+@using System.Net
 @layout BlankLayout;
 
+<div id="@DemoId">
+    @ShowCaseContent
+</div>
 
-@ShowCaseContent
 
 @code
 {
+    [Parameter]
+    public string DemoId { get; set; }
+
     [Parameter]
     public string Type { get; set; }
 

site/AntBlazor.Docs/Shared/CodeBox.razor

@@ -1,12 +1,13 @@
 @using System.Reflection
 @using AntDesign.JsInterop
+@using System.Net
 @inherits ComponentBase
 
 <div class="code-box" id="@DemoId">
     <section class="code-box-demo">
         @if (Demo.Iframe > 0)
         {
-            <MockBrowser Height="@Demo.Iframe.Value" WithUrl="@($"/mock?type={Demo.Type}")" />
+            <MockBrowser Height="@Demo.Iframe.Value" WithUrl="@($"/mock?demoId={@DemoId}&type={Demo.Type}")" />
         }
         else
         {
@@ -45,17 +46,15 @@
             <HighlightedCode Code="@Demo.Code" CanLoad="codeExpand" Language="html"></HighlightedCode>
         </div>
     </section>
-    <Style>
+    <style>
         @Demo.Style
-    </Style>
+    </style>
 </div>
 
 @inject InteropService InteropService
 
 @code {
 
-
-
     [Parameter]
     public string ComponentName { get; set; }