Add coming soon message for disabled elements

This commit is contained in:
Arnaud 2024-10-24 13:40:42 +02:00
parent 21fe557157
commit eb450931a9
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
2 changed files with 40 additions and 3 deletions

View File

@ -275,3 +275,23 @@
/* position: inherit; */
}
}
.menu a {
position: relative;
}
.menu a[data-title]:hover::after {
content: attr(data-title);
background-color: #2f2f2f;
color: #fff;
padding: 8px;
border-radius: 4px;
font-size: 12px;
line-height: 14px;
display: block;
position: absolute;
white-space: nowrap;
position: absolute;
right: 1rem;
z-index: 1;
}

View File

@ -63,7 +63,12 @@ const Layout = () => {
{
type: "item",
Component: (p: MenuItemComponentProps) => (
<Link to="/dashboard/nodes" {...p}>
<Link
to="/dashboard/nodes"
{...p}
disabled={true}
aria-disabled={true}
data-title="Coming soon">
<span className="menu-icon">
<NodesIcon />
</span>
@ -74,7 +79,13 @@ const Layout = () => {
{
type: "item",
Component: (p: MenuItemComponentProps) => (
<Link to="/dashboard/analytics" {...p}>
<Link
to="/dashboard/analytics"
{...p}
disabled={true}
aria-disabled={true}
title="Coming soon"
data-title="Coming soon">
<span className="menu-icon">
<AnalyticsIcon />
</span>
@ -85,7 +96,13 @@ const Layout = () => {
{
type: "item",
Component: (p: MenuItemComponentProps) => (
<Link to="/dashboard/device" {...p}>
<Link
to="/dashboard/device"
{...p}
disabled={true}
aria-disabled={true}
title="Coming soon"
data-title="Coming soon">
<span className="menu-icon">
<DeviceIcon />
</span>