Side nav labels on hover (#1290)

* updated names for tooltip flyout

* side tooltip text working

* tooltip text on side nav wrkng, using common names

* updated styles for playwright

* passing all css lint tests

* changed side nav to width:20%

* adjusted z-index on badge page for nav tooltip

* updated clickable "hitbox"

* Styling

---------

Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>

app/components/layout/SideNav.tsx

@@ -11,20 +11,25 @@ export function SideNav() {
     <nav className="layout__side-nav">
       {navItems.map((item) => {
         return (
-          <Link
-            to={item.url}
-            key={item.name}
-            prefetch={item.prefetch ? "render" : undefined}
-          >
+          <div className="nav-item" key={item.name}>
             <div className="layout__side-nav-image-container">
-              <Image
-                path={navIconUrl(item.name)}
-                height={32}
-                width={32}
-                alt={t(`common:pages.${item.name}` as any)}
-              />
+              <Link
+                to={item.url}
+                key={item.name}
+                prefetch={item.prefetch ? "render" : undefined}
+              >
+                <Image
+                  path={navIconUrl(item.name)}
+                  height={32}
+                  width={32}
+                  alt={t(`common:pages.${item.name}` as any)}
+                />
+              </Link>
+              <span className="layout__tooltip-text">
+                {t(`common:pages.${item.name}` as any)}
+              </span>
             </div>
-          </Link>
+          </div>
         );
       })}
     </nav>

app/routes/index.tsx

@@ -101,7 +101,7 @@ export default function FrontPage() {
                 path={navIconUrl(item.name)}
                 height={48}
                 width={48}
-                alt=""
+                alt={item.name}
               />
             </div>
             <div>{t(`common:pages.${item.name}` as any)}</div>

app/styles/badges.css

@@ -1,4 +1,6 @@
 .badges__container {
+  position: relative;
+  z-index: -1;
   display: flex;
   flex-direction: column;
   align-items: center;

app/styles/layout.css

@@ -238,6 +238,7 @@
 .layout__side-nav {
   position: fixed;
   display: flex;
+  width: 21%;
   height: 100vh;
   flex-direction: column;
   justify-content: center;
@@ -246,18 +247,49 @@
   padding-inline: var(--s-4);
 }
 
+.nav-item {
+  pointer-events: none;
+}
+
 .layout__side-nav-image-container {
+  position: relative;
   display: grid;
   width: 40px;
   height: 40px;
   border-radius: var(--rounded);
   background-color: var(--bg-lighter);
   place-items: center;
+  pointer-events: auto;
   transition: all 0.2s ease-out;
 }
 
 .layout__side-nav-image-container:hover {
   background-color: var(--theme-transparent);
+  cursor: pointer;
+}
+
+.layout__tooltip-text {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: calc(100% + var(--s-2));
+  width: max-content;
+  border: 2px solid var(--border);
+  border-radius: var(--rounded);
+  background-color: var(--bg-darker);
+  font-size: var(--fonts-sm);
+  font-weight: var(--semi-bold);
+  opacity: 0;
+  padding-inline: var(--s-2-5);
+  pointer-events: none;
+  text-align: center;
+  transform: translateY(-50%);
+  transition: opacity 0.3s;
+}
+
+.layout__side-nav-image-container:hover .layout__tooltip-text {
+  z-index: 5;
+  opacity: 1;
 }
 
 @media screen and (display-mode: standalone) {