refactor

src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor

@@ -1,14 +1,16 @@
 <AppBar Class="hidden-sm-and-down" BarHeight="100" LogoHeight="42">
     <SectionOutlet SectionName="document" />
 
-    <MInteractiveKeyTrigger WithWrapper
-                            Class="nav-menus"
-                            Style="position: relative"
-                            QueryName="nav-menu"
-                            QueryOptions="navMenuQueryOptions"
-                            QueryValue="@QueryValue"
-                            InteractiveComponentType="typeof(NavMenu)"
-                            InteractiveParameters="ProductNavMenuParameters">
+    <MInteractiveTriggers Class="nav-menus"
+                          WithPopup
+                          Left="NavMenuLeft"
+                          PopupClass="menu-list"
+                          TValue="string"
+                          QueryName="nav-menu"
+                          QueryValue="@QueryValue"
+                          InteractiveValue="navMenuInteractiveValues"
+                          InteractiveComponentType="typeof(NavMenu)"
+                          InteractiveComponentParameters="ProductNavMenuParameters">
         <MButton Id="@($"{context}-nav-menu")" Class="mr-9 h8 emphasis2--text" Text>
             @(context switch
             {
@@ -17,7 +19,7 @@
                 _         => context
             })
         </MButton>
-    </MInteractiveKeyTrigger>
+    </MInteractiveTriggers>
 
     <MButton Text Class="h8 emphasis2--text" Href="/aboutus">
         关于我们
@@ -33,16 +35,15 @@
     [SupplyParameterFromQuery(Name = "nav-menu")]
     private string? QueryValue { get; set; }
 
-    private static string[] navMenuQueryOptions = { "product", "study" };
+    private static string[] navMenuInteractiveValues = { "product", "study" };
 
     private bool IsProductNavMenu => QueryValue?.Equals("product", StringComparison.OrdinalIgnoreCase) is true;
 
     private Dictionary<string, object> ProductNavMenuParameters => new()
     {
         { nameof(NavMenu.Items), IsProductNavMenu ? ProductNavItems : StudyNavItems },
-        { nameof(NavMenu.Style), IsProductNavMenu ? "transform: translateX(-388px);" : "transform: translateX(-286px);" },
-        { nameof(NavMenu.ActivatorSelectors), navMenuQueryOptions.Select(s => $"#{s}-nav-menu").ToArray() },
-        { nameof(NavMenu.QueryName), "nav-menu" }
     };
 
+    private int NavMenuLeft => IsProductNavMenu ? -388 : -286;
+
 }

src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor

@@ -0,0 +1,16 @@
+@rendermode InteractiveServer
+@inherits MInteractivePopup
+
+<div class="mt-2 @Class" style="@Style" id="follow-us-image">
+    <img src="@Image" />
+</div>
+
+@code {
+
+    [Parameter] [EditorRequired] public string Image { get; set; } = null!;
+
+    [Parameter] public string? Style { get; set; }
+
+    [Parameter] public string? Class { get; set; }
+
+}

src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor

@@ -11,9 +11,9 @@
         </svg>
         <div class="rectangle-723"></div>
     </div>
-    
+
     <MobileAppBar NavItems="AllNavItems" />
-    
+
     <DesktopAppBar ProductNavItems="productNavItems"
                    StudyNavItems="studyNavItems" />
 
@@ -128,8 +128,20 @@
                             <MCard Color="transparent" Flat Dark Class="footer-content__item footer-content__focus">
                                 <MCardTitle>关注我们</MCardTitle>
                                 <MCardText>
-                                    @* <WeChatBtn /> *@
-                                    @* <QQChatBtn /> *@
+                                    <MInteractiveTriggers Class="d-inline"
+                                                          QueryName="@nameof(FollowUs)"
+                                                          QueryValue="@FollowUs"
+                                                          InteractiveValue="@(new[] { "wechat", "qq" })"
+                                                          InteractiveComponentType="typeof(FollowUsBtn)"
+                                                          InteractiveComponentParameters="@FollowUsParameters">
+                                        <MButton Outlined
+                                                 Icon
+                                                 Color="white"
+                                                 Class="follow-us-icon mr-9">
+                                            <MIcon>@(context == "wechat" ? "mdi-wechat" : "mdi-qqchat")</MIcon>
+                                        </MButton>
+                                    </MInteractiveTriggers>
+
                                     <MButton Class="follow-us-icon"
                                              Outlined
                                              Icon
@@ -167,6 +179,15 @@
 
 @code {
 
+    [SupplyParameterFromQuery]
+    private string? FollowUs { get; set; }
+
+    private Dictionary<string, object> FollowUsParameters => new()
+    {
+        { nameof(FollowUsBtn.Image), FollowUs == "wechat" ? "https://cdn.masastack.com/images/contact.png" : "https://cdn.masastack.com/images/contact-qq.png" },
+        { nameof(FollowUsBtn.Class), FollowUs }
+    };
+
     private static readonly List<NavItem> productNavItems =
     [
         new NavItem("产品中心"),

src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor

@@ -6,8 +6,9 @@
                    Fixed
                    Temporary
                    Right
-                   Width="315">
-    <MList Class="menu-list mt-1" Style="height: 100%; overflow-y: auto; padding-top:24px;" Elevation="0" Subheader TwoLine Routable>
+                   Width="315"
+                   NoSsr>
+    <MList Class="mt-1" Style="height: 100%; overflow-y: auto; padding-top:24px;" Elevation="0" Subheader TwoLine Routable>
         @foreach (var item in NavItems)
         {
             @if (item.IsSubheader)