feat: Ctrl+M now opens/closes sidebar (#605)

## Description

Added check for eventListener that opens/closes the sidebar if Ctrl+M
are pressed.

Fixes IntelliTect-dev/EssentialCSharp.Tooling#449

Author: Joshua-Lester3

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -94,8 +94,11 @@
             <header class="header-background">
                 <div class="banner d-flex justify-content-between">
                     <div class="d-flex align-items-center menu-position">
-                        <button class="menu-btn" v-on:click="sidebarShown = !sidebarShown">
+                        <button class="menu-btn has-tooltip" v-on:click="sidebarShown = !sidebarShown">
                             <i class="fa fa-bars fa-lg icon-light"></i>
+                            <span class="tooltip-text sidebar-tooltip-text">
+                                <b>Ctrl + M</b>
+                            </span>
                         </button>
                         <div class="d-none d-lg-block">
                             <ul class="nav align-items-center">

EssentialCSharp.Web/Views/Shared/_LoginPartial.cshtml

@@ -4,13 +4,13 @@
 @inject SignInManager<EssentialCSharpWebUser> SignInManager
 @inject UserManager<EssentialCSharpWebUser> UserManager
 
-<div class="menu-tooltip text-nowrap">
+<div class="has-tooltip text-nowrap">
     @if (SignInManager.IsSignedIn(User))
     {
-        <div class="menu-tooltip">
+        <div class="has-tooltip">
             <a id="manage" class="nav-link text-light" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
         </div>
-        <div class="menu-tooltip">
+        <div class="has-tooltip">
             <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                 <button id="logout" type="submit" class="nav-link btn btn-link text-light border-0">
                     <i class="fa fa-right-from-bracket icon-light"></i>
@@ -21,7 +21,7 @@
     }
     else
     {
-        <div class="menu-tooltip">
+        <div class="has-tooltip">
             <a class="nav-link text-light" id="login" asp-area="Identity" asp-page="/Account/Login"><i class="fa fa-right-to-bracket icon-light"></i> Login</a>
         </div>
     }

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -228,12 +228,12 @@ a:hover {
   white-space: nowrap;
 }
 
-.menu-tooltip {
+.has-tooltip {
   position: relative;
   display: inline-block;
 }
 
-.menu-tooltip .tooltip-text {
+.has-tooltip .tooltip-text {
   visibility: hidden;
   width: 120px;
   background-color: var(--grey-lighten-1);
@@ -250,11 +250,11 @@ a:hover {
   z-index: 1;
 }
 
-.menu-tooltip:hover .tooltip-text {
+.has-tooltip:hover .tooltip-text {
   visibility: visible;
 }
 
-.menu-tooltip .tooltip-text::after {
+.has-tooltip .tooltip-text::after {
   content: " ";
   position: absolute;
   bottom: 100%; /* At the top of the tooltip */
@@ -265,6 +265,34 @@ a:hover {
   border-color: transparent transparent var(--grey-lighten-1) transparent;
 }
 
+.has-tooltip:hover .sidebar-tooltip-text {
+  transition-delay: 1s;
+  transition-property: visibility;
+}
+
+.has-tooltip .sidebar-tooltip-text {
+  width: 90px;
+  position: relative;
+  left: 5rem;
+  border-radius: 10px;
+  padding: 10px;
+  white-space: normal;
+}
+
+.has-tooltip .sidebar-tooltip-text:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-width: 5px;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid var(--grey-lighten-1);
+  left: -9%;
+  bottom: 30%;
+}
+
 .nav-link {
     color: white;
 }

EssentialCSharp.Web/wwwroot/js/site.js

@@ -177,6 +177,10 @@ const app = createApp({
                     goToPrevious();
                 }
             }
+
+            if (e.code == "KeyM" && e.ctrlKey) {
+                sidebarShown.value = !sidebarShown.value;
+            }
         });
 
         const sidebarShown = ref(false);