Merge pull request #14981 from grafana/hugoh/sidemenu-should-be-clickable

Added link to side menu header and fixed styling

public/app/core/components/sidemenu/SideMenuDropDown.tsx

@@ -10,7 +10,9 @@ const SideMenuDropDown: FC<Props> = props => {
   return (
     <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">
       <li className="side-menu-header">
-        <span className="sidemenu-item-text">{link.text}</span>
+        <a href={link.url}>
+          <span className="sidemenu-item-text">{link.text}</span>
+        </a>
       </li>
       {link.children &&
         link.children.map((child, index) => {

public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap

@@ -8,11 +8,13 @@ exports[`Render should render children 1`] = `
   <li
     className="side-menu-header"
   >
-    <span
-      className="sidemenu-item-text"
-    >
-      link
-    </span>
+    <a>
+      <span
+        className="sidemenu-item-text"
+      >
+        link
+      </span>
+    </a>
   </li>
   <DropDownChild
     child={
@@ -49,11 +51,13 @@ exports[`Render should render component 1`] = `
   <li
     className="side-menu-header"
   >
-    <span
-      className="sidemenu-item-text"
-    >
-      link
-    </span>
+    <a>
+      <span
+        className="sidemenu-item-text"
+      >
+        link
+      </span>
+    </a>
   </li>
 </ul>
 `;

public/sass/components/_sidemenu.scss

@@ -149,6 +149,12 @@
   color: #ebedf2;
 }
 
+.side-menu-header > a {
+  // Removes left-brand-border-gradient from link
+  border: none !important;
+  padding: 0 !important;
+}
+
 .sidemenu-subtitle {
   padding: 0.5rem 1rem 0.5rem;
   font-size: $font-size-sm;