Add support for mobile to menu

LANCommander/Components/MainMenu.razor

@@ -0,0 +1,15 @@
+<Header>
+    <div class="logo" style="background: url('/static/logo-dark.svg'); width: 143px; height: 31px; margin: 16px 24px 16px 0; float: left; background-size: contain;" />
+
+    <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal">
+        @ChildContent
+    </Menu>
+</Header>
+
+<MobileMenu>
+    @ChildContent
+</MobileMenu>
+
+@code {
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}

LANCommander/Components/MobileMenu.razor

@@ -0,0 +1,37 @@
+@inject NavigationManager NavigationManager
+
+<div class="mobile-menu">
+    <Header Class="mobile-header">
+        <div class="logo" style="background: url('/static/logo-dark.svg'); width: 143px; height: 31px; background-size: contain;" />
+        <Button Icon="@IconType.Outline.Menu" Type="@ButtonType.Text" OnClick="ToggleMenu" />
+    </Header>
+
+    <Drawer Closable="true" Visible="@MenuDrawerOpen" Placement="@("top")" Class="menu-drawer">
+        <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Vertical">
+            @ChildContent
+        </Menu>
+    </Drawer>
+</div>
+
+@code {
+    [Parameter] public RenderFragment ChildContent { get; set; }
+
+    bool MenuDrawerOpen = true;
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+            NavigationManager.LocationChanged += CloseMenu;
+    }
+
+    void ToggleMenu()
+    {
+        MenuDrawerOpen = !MenuDrawerOpen;
+    }
+
+    void CloseMenu(object? sender, LocationChangedEventArgs e)
+    {
+        MenuDrawerOpen = false;
+        StateHasChanged();
+    }
+}

LANCommander/Shared/MainLayout.razor

@@ -1,18 +1,14 @@
 @inherits LayoutComponentBase
 
 <Layout Class="layout">
-    <Header>
+    <MainMenu>
-        <div class="logo" style="background: url('/static/logo-dark.svg'); width: 143px; height: 31px; margin: 16px 24px 16px 0; float: left; background-size: contain;" />
+        <MenuItem RouterLink="/Dashboard">Dashboard</MenuItem>
+        <MenuItem RouterLink="/Games">Games</MenuItem>
+        <MenuItem RouterLink="/Servers">Servers</MenuItem>
+        <MenuItem RouterLink="/Settings">Settings</MenuItem>
+    </MainMenu>
 
-        <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal">
+    <Content Style="padding: 24px; min-height: 100vh;">
-            <MenuItem RouterLink="/Dashboard">Dashboard</MenuItem>
-            <MenuItem RouterLink="/Games">Games</MenuItem>
-            <MenuItem RouterLink="/Servers">Servers</MenuItem>
-            <MenuItem RouterLink="/Settings">Settings</MenuItem>
-        </Menu>
-    </Header>
-
-    <Content Style="padding: 24px;">
         @Body
     </Content>
 </Layout>

LANCommander/wwwroot/css/site.css

@@ -18,3 +18,66 @@
 .uploader-progress .ant-progress-bg {
     transition: none;
 }
+
+.menu-drawer {
+    margin-top: 63px;
+}
+
+.menu-drawer .ant-drawer-content {
+    background: #001529;
+}
+
+.menu-drawer .ant-drawer-header-no-title {
+    display: none;
+}
+
+.menu-drawer .ant-drawer-body {
+    padding: 0;
+}
+
+.menu-drawer .ant-drawer-wrapper,
+.menu-drawer .ant-drawer-content {
+    height: auto;
+}
+
+.menu-drawer .ant-drawer-content-wrapper {
+    height: auto !important;
+}
+
+.mobile-header .ant-btn {
+    color: #fff;
+    position: absolute;
+    right: 16px;
+}
+
+@media screen and (min-width: 768px) {
+    .mobile-menu {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .mobile-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 2000;
+    }
+
+    .ant-header:not(.mobile-header) {
+        display: none;
+    }
+
+    .ant-header .logo {
+        margin-right: 0 !important;
+        float: none;
+    }
+
+    .ant-layout-content {
+        margin-top: 63px;
+    }
+}