From 704b499f646faf35834fd87aaa108351a00a48be Mon Sep 17 00:00:00 2001
From: Pat Hartl <pat@pathar.tl>
Date: Sun, 3 Sep 2023 17:55:44 -0500
Subject: [PATCH] Add support for mobile to menu

---
 LANCommander/Components/MainMenu.razor   | 15 ++++++
 LANCommander/Components/MobileMenu.razor | 37 ++++++++++++++
 LANCommander/Shared/MainLayout.razor     | 18 +++----
 LANCommander/wwwroot/css/site.css        | 63 ++++++++++++++++++++++++
 4 files changed, 122 insertions(+), 11 deletions(-)
 create mode 100644 LANCommander/Components/MainMenu.razor
 create mode 100644 LANCommander/Components/MobileMenu.razor

diff --git a/LANCommander/Components/MainMenu.razor b/LANCommander/Components/MainMenu.razor
new file mode 100644
index 0000000..d02d5f8
--- /dev/null
+++ b/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; }
+}
\ No newline at end of file
diff --git a/LANCommander/Components/MobileMenu.razor b/LANCommander/Components/MobileMenu.razor
new file mode 100644
index 0000000..9668c74
--- /dev/null
+++ b/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();
+    }
+}
\ No newline at end of file
diff --git a/LANCommander/Shared/MainLayout.razor b/LANCommander/Shared/MainLayout.razor
index 3f4be74..f3cf355 100644
--- a/LANCommander/Shared/MainLayout.razor
+++ b/LANCommander/Shared/MainLayout.razor
@@ -1,18 +1,14 @@
 @inherits LayoutComponentBase
 
 <Layout Class="layout">
-    <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;" />
+    <MainMenu>
+        <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">
-            <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;">
+    <Content Style="padding: 24px; min-height: 100vh;">
         @Body
     </Content>
 </Layout>
\ No newline at end of file
diff --git a/LANCommander/wwwroot/css/site.css b/LANCommander/wwwroot/css/site.css
index 5ff19e9..ee8590a 100644
--- a/LANCommander/wwwroot/css/site.css
+++ b/LANCommander/wwwroot/css/site.css
@@ -17,4 +17,67 @@
 
 .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;
+    }
 }
\ No newline at end of file