From 2c7ab27ca2cc371e2e96bfa05b2fee4ada96d631 Mon Sep 17 00:00:00 2001
From: Joshua Lester <jlester3@ewu.edu>
Date: Tue, 8 Oct 2024 16:12:25 -0700
Subject: [PATCH 1/6] Ctrl+M now opens/closes sidebar

---
 EssentialCSharp.Web/wwwroot/js/site.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/EssentialCSharp.Web/wwwroot/js/site.js b/EssentialCSharp.Web/wwwroot/js/site.js
index c76f5c54..4d0bde8e 100644
--- a/EssentialCSharp.Web/wwwroot/js/site.js
+++ b/EssentialCSharp.Web/wwwroot/js/site.js
@@ -171,6 +171,10 @@ const app = createApp({
                     goToPrevious();
                 }
             }
+            debugger;
+            if (e.code == "KeyM" && e.ctrlKey) {
+                sidebarShown.value = !sidebarShown.value;
+            }
         });
 
         const sidebarShown = ref(false);

From e06b6646eea8e62ec499d9231152008c4a50114a Mon Sep 17 00:00:00 2001
From: Joshua Lester <jlester3@ewu.edu>
Date: Tue, 8 Oct 2024 16:14:32 -0700
Subject: [PATCH 2/6] Remove debugger

---
 EssentialCSharp.Web/wwwroot/js/site.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/EssentialCSharp.Web/wwwroot/js/site.js b/EssentialCSharp.Web/wwwroot/js/site.js
index 4d0bde8e..2f1f34ea 100644
--- a/EssentialCSharp.Web/wwwroot/js/site.js
+++ b/EssentialCSharp.Web/wwwroot/js/site.js
@@ -171,7 +171,7 @@ const app = createApp({
                     goToPrevious();
                 }
             }
-            debugger;
+
             if (e.code == "KeyM" && e.ctrlKey) {
                 sidebarShown.value = !sidebarShown.value;
             }

From c9208cea96a8bb9e8755890085127931929f60e4 Mon Sep 17 00:00:00 2001
From: Joshua Lester <jlester3@ewu.edu>
Date: Thu, 10 Oct 2024 13:42:49 -0700
Subject: [PATCH 3/6] Added tooltip for sidebar button

---
 .../Views/Shared/_Layout.cshtml               |  7 ++++--
 EssentialCSharp.Web/wwwroot/css/styles.css    | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 9e1b56a1..165bce7a 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/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 sidebar-tooltip" v-on:click="sidebarShown = !sidebarShown">
                             <i class="fa fa-bars fa-lg icon-light"></i>
+                            <span class="sidebar-tooltip-text">
+                            <b>Ctrl + M</b>
+                            </span>
                         </button>
                         <div class="d-none d-lg-block">
                             <ul class="nav align-items-center">
@@ -302,7 +305,7 @@
             <details :open="expandedTocs.has(item.key)"
                      v-on:toggle="!$event.target.open ? expandedTocs.delete(item.key) : expandedTocs.add(item.key)">
                 <summary :class="{
-                         'toc-content' : item.level==0,
+                         'toc-content' : item.level= =0,
                          'nested' : item.level>
                     0,
                     'current-section': currentPage.some(p => p.key == item.key),
diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
index b0ba51c4..b894d5db 100644
--- a/EssentialCSharp.Web/wwwroot/css/styles.css
+++ b/EssentialCSharp.Web/wwwroot/css/styles.css
@@ -265,6 +265,29 @@ a:hover {
   border-color: transparent transparent var(--grey-lighten-1) transparent;
 }
 
+.sidebar-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.sidebar-tooltip:hover .sidebar-tooltip-text {
+  visibility: visible;
+}
+
+.sidebar-tooltip .sidebar-tooltip-text {
+  visibility: hidden;
+  position: absolute;
+  width: 80px;
+  color: var(--primary-color);
+  font-size: 1rem;
+  background-color: var(--grey-lighten-1);
+  border-radius: 10px;
+  padding: 10px;
+  white-space: normal;
+  left: 2rem; 
+  bottom: -9px;
+}
+
 .nav-link {
     color: white;
 }

From 93d8d7e400dc1b5e26e7920cb16b34091470924e Mon Sep 17 00:00:00 2001
From: Joshua Lester <jlester3@ewu.edu>
Date: Thu, 10 Oct 2024 14:05:53 -0700
Subject: [PATCH 4/6] Delay + commit for without keys

---
 EssentialCSharp.Web/Views/Shared/_Layout.cshtml | 4 +++-
 EssentialCSharp.Web/wwwroot/css/styles.css      | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 165bce7a..99d8975b 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -97,7 +97,9 @@
                         <button class="menu-btn sidebar-tooltip" v-on:click="sidebarShown = !sidebarShown">
                             <i class="fa fa-bars fa-lg icon-light"></i>
                             <span class="sidebar-tooltip-text">
-                            <b>Ctrl + M</b>
+                                <b>Navigation</b>
+                                <br />
+                                Or Ctrl + M
                             </span>
                         </button>
                         <div class="d-none d-lg-block">
diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
index b894d5db..2a975f9a 100644
--- a/EssentialCSharp.Web/wwwroot/css/styles.css
+++ b/EssentialCSharp.Web/wwwroot/css/styles.css
@@ -271,13 +271,15 @@ a:hover {
 }
 
 .sidebar-tooltip:hover .sidebar-tooltip-text {
+  transition-delay: 1s;
+  transition-property: visibility;
   visibility: visible;
 }
 
 .sidebar-tooltip .sidebar-tooltip-text {
   visibility: hidden;
   position: absolute;
-  width: 80px;
+  width: 150px;
   color: var(--primary-color);
   font-size: 1rem;
   background-color: var(--grey-lighten-1);
@@ -285,7 +287,7 @@ a:hover {
   padding: 10px;
   white-space: normal;
   left: 2rem; 
-  bottom: -9px;
+  bottom: -35px;
 }
 
 .nav-link {

From 55afbb1f79d8da36ad27a2d2ab56248c0612eebb Mon Sep 17 00:00:00 2001
From: Joshua Lester <jlester3@ewu.edu>
Date: Thu, 10 Oct 2024 15:14:17 -0700
Subject: [PATCH 5/6] Revert "Delay + commit for without keys"

This reverts commit 93d8d7e400dc1b5e26e7920cb16b34091470924e.
---
 EssentialCSharp.Web/Views/Shared/_Layout.cshtml | 4 +---
 EssentialCSharp.Web/wwwroot/css/styles.css      | 6 ++----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 99d8975b..165bce7a 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -97,9 +97,7 @@
                         <button class="menu-btn sidebar-tooltip" v-on:click="sidebarShown = !sidebarShown">
                             <i class="fa fa-bars fa-lg icon-light"></i>
                             <span class="sidebar-tooltip-text">
-                                <b>Navigation</b>
-                                <br />
-                                Or Ctrl + M
+                            <b>Ctrl + M</b>
                             </span>
                         </button>
                         <div class="d-none d-lg-block">
diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
index 2a975f9a..b894d5db 100644
--- a/EssentialCSharp.Web/wwwroot/css/styles.css
+++ b/EssentialCSharp.Web/wwwroot/css/styles.css
@@ -271,15 +271,13 @@ a:hover {
 }
 
 .sidebar-tooltip:hover .sidebar-tooltip-text {
-  transition-delay: 1s;
-  transition-property: visibility;
   visibility: visible;
 }
 
 .sidebar-tooltip .sidebar-tooltip-text {
   visibility: hidden;
   position: absolute;
-  width: 150px;
+  width: 80px;
   color: var(--primary-color);
   font-size: 1rem;
   background-color: var(--grey-lighten-1);
@@ -287,7 +285,7 @@ a:hover {
   padding: 10px;
   white-space: normal;
   left: 2rem; 
-  bottom: -35px;
+  bottom: -9px;
 }
 
 .nav-link {

From 0acade6c7d46e463e07c0205a9688617a2f4c589 Mon Sep 17 00:00:00 2001
From: Joshua Lester <jlester3@ewu.edu>
Date: Fri, 11 Oct 2024 08:24:13 -0700
Subject: [PATCH 6/6] Refactored CSS for tooltips

---
 .../Views/Shared/_Layout.cshtml               |  8 ++--
 .../Views/Shared/_LoginPartial.cshtml         |  8 ++--
 EssentialCSharp.Web/wwwroot/css/styles.css    | 45 ++++++++++---------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 165bce7a..04a9367b 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -94,10 +94,10 @@
             <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 sidebar-tooltip" 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="sidebar-tooltip-text">
-                            <b>Ctrl + M</b>
+                            <span class="tooltip-text sidebar-tooltip-text">
+                                <b>Ctrl + M</b>
                             </span>
                         </button>
                         <div class="d-none d-lg-block">
@@ -305,7 +305,7 @@
             <details :open="expandedTocs.has(item.key)"
                      v-on:toggle="!$event.target.open ? expandedTocs.delete(item.key) : expandedTocs.add(item.key)">
                 <summary :class="{
-                         'toc-content' : item.level= =0,
+                         'toc-content' : item.level==0,
                          'nested' : item.level>
                     0,
                     'current-section': currentPage.some(p => p.key == item.key),
diff --git a/EssentialCSharp.Web/Views/Shared/_LoginPartial.cshtml b/EssentialCSharp.Web/Views/Shared/_LoginPartial.cshtml
index 0fc05c39..bf16e4c3 100644
--- a/EssentialCSharp.Web/Views/Shared/_LoginPartial.cshtml
+++ b/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>
     }
diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
index b894d5db..497960ab 100644
--- a/EssentialCSharp.Web/wwwroot/css/styles.css
+++ b/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,27 +265,32 @@ a:hover {
   border-color: transparent transparent var(--grey-lighten-1) transparent;
 }
 
-.sidebar-tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.sidebar-tooltip:hover .sidebar-tooltip-text {
-  visibility: visible;
+.has-tooltip:hover .sidebar-tooltip-text {
+  transition-delay: 1s;
+  transition-property: visibility;
 }
 
-.sidebar-tooltip .sidebar-tooltip-text {
-  visibility: hidden;
-  position: absolute;
-  width: 80px;
-  color: var(--primary-color);
-  font-size: 1rem;
-  background-color: var(--grey-lighten-1);
+.has-tooltip .sidebar-tooltip-text {
+  width: 90px;
+  position: relative;
+  left: 5rem;
   border-radius: 10px;
   padding: 10px;
   white-space: normal;
-  left: 2rem; 
-  bottom: -9px;
+}
+
+.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 {