diff --git a/public/app/core/components/sidemenu/BottomSection.tsx b/public/app/core/components/sidemenu/BottomSection.tsx
index 9c43c5de126..5677d5d670b 100644
--- a/public/app/core/components/sidemenu/BottomSection.tsx
+++ b/public/app/core/components/sidemenu/BottomSection.tsx
@@ -75,7 +75,7 @@ export default function BottomSection() {
url={link.url}
>
{link.icon && }
- {link.img &&
}
+ {link.img &&
}
);
})}
diff --git a/public/app/core/components/sidemenu/DropDownChild.tsx b/public/app/core/components/sidemenu/DropDownChild.tsx
index 4f0f2f903cf..c8ec712c198 100644
--- a/public/app/core/components/sidemenu/DropDownChild.tsx
+++ b/public/app/core/components/sidemenu/DropDownChild.tsx
@@ -16,6 +16,11 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }:
const iconClassName = css`
margin-right: ${theme.spacing(1)};
`;
+ const resetButtonStyles = css`
+ background-color: transparent;
+ border: none;
+ width: 100%;
+ `;
const linkContent = (
<>
@@ -24,9 +29,13 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }:
>
);
- let anchor = {linkContent};
+ let element = (
+
+ );
if (url) {
- anchor =
+ element =
!target && url.startsWith('/') ? (
{linkContent}
@@ -38,7 +47,7 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }:
);
}
- return isDivider ?
: {anchor};
+ return isDivider ? : {element};
};
export default DropDownChild;
diff --git a/public/app/core/components/sidemenu/SideMenuDropDown.tsx b/public/app/core/components/sidemenu/SideMenuDropDown.tsx
index 2e6e6219f0c..bec8ecac45f 100644
--- a/public/app/core/components/sidemenu/SideMenuDropDown.tsx
+++ b/public/app/core/components/sidemenu/SideMenuDropDown.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import DropDownChild from './DropDownChild';
import { NavModelItem } from '@grafana/data';
import { IconName, Link } from '@grafana/ui';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
interface Props {
headerText: string;
@@ -21,15 +21,19 @@ const SideMenuDropDown = ({
reverseDirection = false,
subtitleText,
}: Props) => {
+ const resetButtonStyles = css`
+ background-color: transparent;
+ font-size: inherit;
+ `;
const headerContent = {headerText};
const header = headerUrl ? (
{headerContent}
) : (
-
+
+
);
const menuClass = css`
diff --git a/public/app/core/components/sidemenu/SideMenuItem.tsx b/public/app/core/components/sidemenu/SideMenuItem.tsx
index e4d815d1de9..7a39cdb583f 100644
--- a/public/app/core/components/sidemenu/SideMenuItem.tsx
+++ b/public/app/core/components/sidemenu/SideMenuItem.tsx
@@ -1,6 +1,6 @@
import React, { ReactNode } from 'react';
import SideMenuDropDown from './SideMenuDropDown';
-import { Link, useStyles2 } from '@grafana/ui';
+import { Link } from '@grafana/ui';
import { NavModelItem } from '@grafana/data';
import { css, cx } from '@emotion/css';
@@ -25,12 +25,9 @@ const SideMenuItem = ({
target,
url,
}: Props) => {
- const resetButtonStyles = useStyles2(
- () =>
- css`
- background-color: transparent;
- `
- );
+ const resetButtonStyles = css`
+ background-color: transparent;
+ `;
const anchor = url ? (
{
url={link.url}
>
{link.icon && }
- {link.img &&
}
+ {link.img &&
}
);
})}
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 4f4ced24bc6..8acb87b9449 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -74,7 +74,8 @@
// Links within the dropdown menu
> li {
- > a {
+ > a,
+ > button {
display: block;
padding: 3px 20px 3px 15px;
clear: both;
@@ -111,7 +112,8 @@
box-shadow: $menu-dropdown-shadow;
margin-top: 0px;
- > li > a {
+ > li > a,
+ > li > button {
display: flex;
padding: 5px 10px;
border-left: 2px solid transparent;
@@ -125,7 +127,8 @@
&--sidemenu {
li.sidemenu-org-switcher {
- > a {
+ > a,
+ > button {
padding: 8px 10px 8px 15px;
}
}
@@ -141,7 +144,11 @@
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
+.dropdown-submenu:focus > a,
+.dropdown-menu > li > button:hover,
+.dropdown-menu > li > button:focus,
+.dropdown-submenu:hover > button,
+.dropdown-submenu:focus > button {
text-decoration: none;
color: $dropdownLinkColorHover;
background-color: $dropdownLinkBackgroundHover;
@@ -151,7 +158,10 @@
// ------------
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
+.dropdown-menu > .active > a:focus,
+.dropdown-menu > .active > button,
+.dropdown-menu > .active > button:hover,
+.dropdown-menu > .active > button:focus {
color: $dropdownLinkColorActive;
text-decoration: none;
outline: 0;
@@ -163,12 +173,17 @@
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
+.dropdown-menu > .disabled > a:focus,
+.dropdown-menu > .disabled > button,
+.dropdown-menu > .disabled > button:hover,
+.dropdown-menu > .disabled > button:focus {
color: $gray-2;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
+.dropdown-menu > .disabled > a:focus,
+.dropdown-menu > .disabled > button:hover,
+.dropdown-menu > .disabled > button:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
@@ -269,7 +284,8 @@
// pointer-events: none;
// font-size: 11px;
// }
-.dropdown-submenu:hover > a::after {
+.dropdown-submenu:hover > a::after,
+.dropdown-submenu:hover > button::after {
border-left-color: $dropdownLinkColorHover;
}
@@ -314,7 +330,8 @@
}
.dropdown-menu.dropdown-menu--new {
- li a {
+ li a,
+ li button {
padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg;
background: $side-menu-bg;
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 9271b49dcd9..afa778e7304 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -254,10 +254,6 @@ li.sidemenu-org-switcher {
}
.sidemenu-link {
- text-align: left;
- }
-
- .sidemenu-icon {
display: none;
}
@@ -268,7 +264,8 @@ li.sidemenu-org-switcher {
float: none;
margin-bottom: $space-sm;
- > li > a {
+ > li > a,
+ > li > button {
padding-left: 15px;
}
}