Merge pull request #212 from DennisvHest/84-ability-to-change-the-wid…

…th-of-the-sidebar

84 ability to change the width of the sidebar

MapMaven/Components/PlayerProfileInfo.razor.css

@@ -11,6 +11,5 @@
     top: 0;
     width: 100%;
     height: auto;
-    z-index: -1;
     filter: blur(10px);
 }

MapMaven/Components/Playlists/PlaylistList.razor

@@ -51,7 +51,7 @@
         {
             <MudProgressCircular Color="Color.Info" Size="Size.Small" Indeterminate="true" Class="align-self-center" />
         }
-        <div class="full-height" style="overflow-y: auto;">
+        <div class="full-height" style="overflow-y: auto; margin-right: 8px;">
             @if (string.IsNullOrEmpty(PlaylistSearchText))
             {
                 <MudTreeView T="Playlist" @ref="PlaylistTreeView" SelectedValue="SelectedPlaylist" SelectedValueChanged="OnPlaylistSelect" Color="Color.Primary" ExpandOnClick="true" AutoExpand="true">

MapMaven/Components/SideNav.razor

@@ -1,6 +1,7 @@
 @inherits ReactiveComponent
 
-<MudDrawer Open="true" Elevation="1" Class="sidenav">
+<MudDrawer Open="true" Elevation="1" Class="sidenav" Style="width: var(--main-drawer-width-left)">
+    <div class="resizer-handle"></div>
     <PlayerProfile></PlayerProfile>
     <MudNavMenu Color="Color.Primary" Bordered="true" Class="full-height d-flex flex-column fill-remaining-space">
         @if (!string.IsNullOrEmpty(PlayerId))
@@ -40,4 +41,4 @@
             </MudNavLink>
         </div>
     </MudNavMenu>
-</MudDrawer>
+</MudDrawer>

MapMaven/Components/SideNav.razor.cs

@@ -1,20 +1,24 @@
 using MapMaven.Core.Services.Interfaces;
 using MapMaven.Core.Services.Leaderboards;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using MudBlazor;
 
 namespace MapMaven.Components
 {
     public partial class SideNav
     {
         [Inject]
-        protected IPlaylistService PlaylistService { get; set; }
+        IPlaylistService PlaylistService { get; set; }
 
         [Inject]
         ILeaderboardService ScoreSaberService { get; set; }
 
         [Inject]
-        public IDialogService DialogService { get; set; }
+        IDialogService DialogService { get; set; }
+
+        [Inject]
+        IJSRuntime JS { get; set; }
 
         public string? PlayerId { get; set; } = null;
 
@@ -23,6 +27,12 @@ protected override void OnInitialized()
             SubscribeAndBind(ScoreSaberService.PlayerIdObservable, playerId => PlayerId = playerId);
         }
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+                await JS.InvokeVoidAsync("window.sideNavResizer.initialize");
+        }
+
         protected void OnMapsNavigation()
         {
             PlaylistService.SetSelectedPlaylist(null);

MapMaven/Components/SideNav.razor.js

@@ -0,0 +1,55 @@
+window.sideNavResizer = (function () {
+    const minSideNavWidth = 250;
+    const maxSideNavWidth = 700;
+
+    let sideNavWidth = localStorage.getItem("sideNavWidth") ?? minSideNavWidth;
+
+    setDrawerWidthNoThrottle(sideNavWidth);
+
+    const setDrawerWidth = throttle(setDrawerWidthNoThrottle, 30);
+
+    function setDrawerWidthNoThrottle(width) {
+        // Set the side nav width to the current mouse position
+        sideNavWidth = width;
+        document.documentElement.style.setProperty("--main-drawer-width-left", `${width}px`);
+    }
+
+    function startSideNavResize(event) {
+        // Start tracking mouse movement
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", stopSideNavResize);
+    }
+
+    function onMouseMove(event) {
+        if (event.clientX >= minSideNavWidth && event.clientX <= maxSideNavWidth)
+            setDrawerWidth(event.clientX);
+    }
+
+    function stopSideNavResize() {
+        document.removeEventListener("mouseup", stopSideNavResize);
+        document.removeEventListener("mousemove", onMouseMove);
+
+        localStorage.setItem("sideNavWidth", sideNavWidth);
+    }
+
+    function throttle(mainFunction, delay) {
+        let timerFlag = null;
+
+        return (...args) => {
+            if (timerFlag === null)
+                mainFunction(...args);
+            timerFlag = setTimeout(() => {
+                timerFlag = null;
+            }, delay);
+        }
+    };
+
+    function initialize() {
+        const resizerHandle = document.querySelector(".resizer-handle");
+        resizerHandle.addEventListener("mousedown", startSideNavResize);
+    }
+
+    return {
+        initialize: initialize
+    }
+})()

MapMaven/wwwroot/css/app.css

@@ -1,4 +1,8 @@
-body {
+html {
+    --main-drawer-width-left: 250px;
+}
+
+body {
     user-select: none;
 }
 
@@ -89,6 +93,23 @@
     width: 100%;
 }
 
+.mud-main-content {
+    margin-left: var(--main-drawer-width-left) !important;
+}
+
+.resizer-handle {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    width: 8px;
+    z-index: 9999999;
+}
+
+.resizer-handle:hover, .resizer-handle:active {
+    background-color: rgba(255, 255, 255, 0.3);
+    cursor: e-resize;
+}
+
 /* MudBlazor overrides */
 .mud-main-content {
     height: 100vh;

MapMaven/wwwroot/index.html

@@ -40,6 +40,8 @@
             }
         }
     </style>
+
+    <script src="./Components/SideNav.razor.js"></script>
 </head>
 
 <body style="background-color: #0f0f0f">