From 3084bb268b56b783118e32792dc5005576e2db02 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Fri, 14 Mar 2025 15:12:36 +0100
Subject: [PATCH] Implemented proper mobile sidebar. Fixed mobile view of api
 key page. Removed unused exception

---
 .../Exceptions/MissingPermissionException.cs  | 11 --------
 Moonlight.Client/UI/Partials/AppHeader.razor  | 12 ++------
 Moonlight.Client/UI/Partials/AppSidebar.razor | 28 ++++++++++++-------
 .../UI/Views/Admin/Api/Index.razor            |  2 +-
 4 files changed, 21 insertions(+), 32 deletions(-)
 delete mode 100644 Moonlight.ApiServer/Exceptions/MissingPermissionException.cs

diff --git a/Moonlight.ApiServer/Exceptions/MissingPermissionException.cs b/Moonlight.ApiServer/Exceptions/MissingPermissionException.cs
deleted file mode 100644
index 35cc1af4..00000000
--- a/Moonlight.ApiServer/Exceptions/MissingPermissionException.cs
+++ /dev/null
@@ -1,11 +0,0 @@
-namespace Moonlight.ApiServer.Exceptions;
-
-public class MissingPermissionException : Exception
-{
-    public string Permission { get; set; }
-    
-    public MissingPermissionException(string permission)
-    {
-        Permission = permission;
-    }
-}
\ No newline at end of file
diff --git a/Moonlight.Client/UI/Partials/AppHeader.razor b/Moonlight.Client/UI/Partials/AppHeader.razor
index 8c8c6b83..86635cd0 100644
--- a/Moonlight.Client/UI/Partials/AppHeader.razor
+++ b/Moonlight.Client/UI/Partials/AppHeader.razor
@@ -7,18 +7,11 @@
 @inject AuthenticationStateManager AuthStateManager
 
 <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-gray-800/60 backdrop-blur px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
-    @if (Layout.ShowMobileNavigation)
-    {
-        <button @onclick="Layout.ToggleMobileNavigation" type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
-            <span class="sr-only">Close sidebar</span>
-            <i class="bi bi-x-lg text-xl"></i>
-        </button>
-    }
-    else
+    @if (!Layout.ShowMobileNavigation)
     {
         <button @onclick="Layout.ToggleMobileNavigation" type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
             <span class="sr-only">Open sidebar</span>
-            <i class="bi bi-list text-xl"></i>
+            <i class="icon-menu text-xl"></i>
         </button>
     }
 
@@ -44,7 +37,6 @@
                 </button>
                 
                 <div class="@(ShowProfileNav ? "opacity-100" : "opacity-0 hidden") transition ease-out duration-100 absolute right-0 z-10 mt-2.5 w-44 origin-top-right rounded-md bg-gray-750 py-2 shadow-lg ring-1 ring-gray-100/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-                    <a href="/admin" class="block px-3 py-1 text-sm leading-6 text-gray-100 hover:text-primary-500" role="menuitem" tabindex="-1" id="user-menu-item-0">Your profile</a>
                     <a @onclick="Logout" @onclick:preventDefault href="#" class="block px-3 py-1 text-sm leading-6 text-gray-100 hover:text-primary-500" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</a>
                 </div>
             </div>
diff --git a/Moonlight.Client/UI/Partials/AppSidebar.razor b/Moonlight.Client/UI/Partials/AppSidebar.razor
index 455306e0..f3300302 100644
--- a/Moonlight.Client/UI/Partials/AppSidebar.razor
+++ b/Moonlight.Client/UI/Partials/AppSidebar.razor
@@ -9,17 +9,24 @@
     var url = new Uri(Navigation.Uri);
 }
 
-<div
-    class="relative z-40 lg:hidden transition-opacity @(Layout.ShowMobileNavigation ? "opacity-100" : "opacity-0 hidden")"
-    role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-800/80"></div>
+<div class="relative z-50 lg:hidden transition-opacity ease-linear duration-300 @(Layout.ShowMobileNavigation ? "opacity-100" : "opacity-0 pointer-events-none")" role="dialog" aria-modal="true">
+    <div class="fixed inset-0 bg-gray-900/80"></div>
 
-    <div class="fixed inset-0 flex justify-center bg-gray-900">
-        <div class="relative flex w-full max-w-xs flex-1">
-            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
-                <div class="flex h-16 shrink-0 items-center">a
-                    <img class="h-8 w-auto" src="/logo.svg" alt="Moonlight">
+    <div class="fixed inset-0 flex">
+        <div class="relative mr-16 flex w-full max-w-xs flex-1 transition ease-in-out duration-300 transform @(Layout.ShowMobileNavigation ? "translate-x-0" : "-translate-x-full")">
+            <div class="absolute left-full top-0 flex w-16 justify-center pt-5 ease-in-out duration-300 @(Layout.ShowMobileNavigation ? "opacity-100" : "opacity-0")">
+                <button @onclick="Layout.ToggleMobileNavigation" type="button" class="-m-2.5 p-2.5">
+                    <span class="sr-only">Close sidebar</span>
+                    <i class="icon-x text-lg"></i>
+                </button>
+            </div>
+
+            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
+                <div class="flex h-16 shrink-0 items-center">
+                    <img class="h-8 w-auto" src="/logo.svg"
+                         alt="Your Company">
                 </div>
+                
                 <nav class="flex flex-1 flex-col">
                     <ul role="list" class="flex flex-1 flex-col gap-y-7">
                         @foreach (var group in Items)
@@ -63,6 +70,7 @@
                         }
                     </ul>
                 </nav>
+                
             </div>
         </div>
     </div>
@@ -132,7 +140,7 @@
 
         foreach (var provider in SidebarItemProviders)
             provider.ModifySidebar(sidebarItems);
-        
+
         Items = sidebarItems
             //.Where(x => x.Permission == null || (x.Permission != null && IdentityService.HasPermission(x.Permission)))
             .GroupBy(x => x.Group ?? "")
diff --git a/Moonlight.Client/UI/Views/Admin/Api/Index.razor b/Moonlight.Client/UI/Views/Admin/Api/Index.razor
index d83d5ea7..cf791399 100644
--- a/Moonlight.Client/UI/Views/Admin/Api/Index.razor
+++ b/Moonlight.Client/UI/Views/Admin/Api/Index.razor
@@ -9,7 +9,7 @@
 @inject AlertService AlertService
 @inject ToastService ToastService
 
-<div class="grid grid-cols-1 sm:grid-cols-3 mb-8 gap-x-3">
+<div class="grid grid-cols-1 sm:grid-cols-3 mb-8 gap-x-3 gap-y-2 sm:gap-y-0">
     <div class="col-span-1 card card-body border-l-4 border-primary-500">
         <p class="font-medium tracking-wide text-slate-100">
             API Documentation