Make logo clickable

Author: axelboc

src/sidebar/Sidebar.module.css

@@ -56,7 +56,19 @@
   letter-spacing: 0.05em;
 }
 
-.logo > span {
+.logoLink {
+  margin: -0.25rem -0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 1.5rem; /* for focus outline */
+  color: inherit;
+  text-decoration: none;
+}
+
+.logoLink[aria-current] {
+  pointer-events: none; /* remove interactivity when already on homepage to avoid confusion */
+}
+
+.logo5 {
   color: var(--color-five);
 }
 

src/sidebar/Sidebar.tsx

@@ -16,7 +16,9 @@ function Sidebar() {
     <div className={styles.sidebar} data-collapsed={isCollapsed || undefined}>
       <div className={styles.sidebarInner}>
         <h1 className={styles.logo} data-reveal>
-          myHDF<span>5</span>
+          <NavLink className={styles.logoLink} to="/">
+            myHDF<span className={styles.logo5}>5</span>
+          </NavLink>
         </h1>
         <nav className={styles.nav} data-reveal>
           <NavLink