front: add disabled style to osrd menu items

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

front/src/common/OSRDMenu.tsx

@@ -4,6 +4,8 @@ export type OSRDMenuItem = {
   title: string;
   icon: React.ReactNode;
   onClick: () => void;
+  disabled?: boolean;
+  disabledMessage?: string;
 };
 
 type OSRDMenuProps = {
@@ -13,8 +15,15 @@ type OSRDMenuProps = {
 
 const OSRDMenu = ({ menuRef, items }: OSRDMenuProps) => (
   <div ref={menuRef} className="osrd-menu">
-    {items.map(({ title, icon, onClick }) => (
-      <button key={title} type="button" className="menu-item" onClick={onClick}>
+    {items.map(({ title, icon, disabled, disabledMessage, onClick }) => (
+      <button
+        disabled={disabled}
+        title={disabled ? disabledMessage : undefined}
+        key={title}
+        type="button"
+        className="menu-item"
+        onClick={onClick}
+      >
         <span className="icon">{icon}</span>
         <span>{title}</span>
       </button>

front/src/styles/scss/common/components/_osrdMenu.scss

@@ -12,6 +12,10 @@
     0 3px 5px -2px rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px var(--white100);
 
+  button:disabled {
+    opacity: 0.5;
+  }
+
   .menu-item {
     width: 100%;
     height: 44px;