Add coming soon message for disabled elements

src/components/Menu/menu.css

@@ -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;
+}

src/routes/dashboard.tsx

@@ -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>