Adding disabled sidebar item (#399)

* Adding disabled sidebar item * Optimize code --------- Co-authored-by: VINEETH ASOK KUMAR <[email protected]>
ClickHouse · Apr 25, 2024 · 5c97b1b · 5c97b1b
1 parent 4852973
commit 5c97b1b
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 70 deletions.
diff --git a/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx b/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx
@@ -16,6 +16,7 @@ export const Playground = {
   args: {
     icon: "code-in-square",
     selected: false,
-    label: <a href="/profile">Untitled Query</a>,
+    disabled: false,
+    label: <a href="https://clickhouse.com/">Untitled Query</a>,
   },
 };
diff --git a/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx b/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx
@@ -6,20 +6,25 @@ import { IconWrapper } from "../Collapsible/IconWrapper";
 export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLDivElement> {
   label: ReactNode;
   selected?: boolean;
+  disabled?: boolean;
   level?: number;
   icon?: IconName;
   iconDir?: HorizontalDirection;
   type?: "main" | "sqlSidebar";
 }
 
 const SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(
-  ({ label, level = 0, icon, selected, iconDir, type = "main", ...props }, ref) => {
+  (
+    { label, level = 0, icon, selected, iconDir, disabled, type = "main", ...props },
+    ref
+  ) => {
     return (
       <SidebarItemWrapper
         $level={level}
         data-selected={selected}
         $type={type}
         ref={ref}
+        aria-disabled={disabled}
         {...props}
       >
         <IconWrapper
@@ -48,7 +53,7 @@ export const SidebarItemWrapper = styled.div<{
   white-space: nowrap;
   overflow: hidden;
   flex-wrap: nowrap;
-  cursor: pointer;
+
   ${({ theme, $collapsible = false, $level, $type }) => {
     const itemType = $level === 0 ? "item" : "subItem";
     return `
@@ -65,21 +70,50 @@ export const SidebarItemWrapper = styled.div<{
       theme.click.sidebar[$type].navigation[itemType].color.background.default
     };
     color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
+    span a {
+      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
+    cursor: pointer;
+      text-decoration: none;
+    }
+    cursor: pointer;
+    pointer-events: all;
+
     &:hover, &:focus {
       font: ${theme.click.sidebar.navigation[itemType].typography.hover};
       background-color: ${
         theme.click.sidebar[$type].navigation[itemType].color.background.hover
       };
       color: ${theme.click.sidebar[$type].navigation[itemType].color.text.hover};
+      pointer-events: auto;
     }
 
-    &:active, &[data-selected="true"]  {
+    &:active, &[data-selected="true"] {
       font: ${theme.click.sidebar.navigation[itemType].typography.active};
       background-color: ${
         theme.click.sidebar[$type].navigation[itemType].color.background.active
       };
       color: ${theme.click.sidebar[$type].navigation[itemType].color.text.active};
+      pointer-events: all;
+    }
+
+    &[aria-disabled=true],
+    &[aria-disabled=true]:hover,
+    &[aria-disabled=true]:focus,
+    &[aria-disabled=true]:active,
+    &[aria-disabled=true]:focus-within,
+    &[aria-disabled=true][data-selected="true"] {
+
+      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};
+      pointer-events: none;
+
+      span a {
+        color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};
+        cursor: not-allowed;
+        text-decoration: none;
+      }
+      cursor: not-allowed;
     }
+
     @media (max-width: 640px) {
       gap: ${theme.click.sidebar.navigation[itemType].mobile.space.gap};
       padding: ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${
@@ -90,29 +124,15 @@ export const SidebarItemWrapper = styled.div<{
         : theme.click.image.sm.size.width
     };
       font: ${theme.click.sidebar.navigation[itemType].mobile.typography.default};
-
       &:hover, &:focus {
         font: ${theme.click.sidebar.navigation[itemType].mobile.typography.hover};
       }
-
       &:active, &[data-selected="true"] {
         font: ${theme.click.sidebar.navigation[itemType].mobile.typography.active};
       }
     }
   `;
   }}
-  a {
-    color: inherit;
-    text-decoration: none;
-
-    &:active {
-      color: inherit;
-    }
-  }
-  &:hover [data-trigger-icon],
-  [data-open="true"][data-trigger-icon] {
-    visibility: visible;
-  }
 `;
 
 export { SidebarNavigationItem };
diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -1798,10 +1798,12 @@
                 "default": string,
                 "hover": string,
                 "active": string,
-                "muted": string
+                "muted": string,
+                "disabled": string
               },
               "icon": {
-                "default": string
+                "default": string,
+                "disabled": string
               }
             }
           },
@@ -1816,13 +1818,19 @@
             "color": {
               "text": {
                 "default": string,
+                "disabled": string,
                 "hover": string,
                 "active": string
               },
               "background": {
                 "default": string,
+                "disabled": string,
                 "hover": string,
                 "active": string
+              },
+              "icon": {
+                "default": string,
+                "disabled": string
               }
             }
           },
@@ -1856,23 +1864,19 @@
                 "default": string,
                 "hover": string,
                 "active": string,
-                "muted": string
+                "muted": string,
+                "disabled": string
               },
               "icon": {
-                "default": string
+                "default": string,
+                "disabled": string
               }
             }
           },
-          "title": {
-            "color": {
-              "default": string,
-              "hover": string,
-              "active": string
-            }
-          },
           "subItem": {
             "color": {
               "text": {
+                "disabled": string,
                 "default": string,
                 "hover": string,
                 "active": string
@@ -1884,6 +1888,13 @@
               }
             }
           },
+          "title": {
+            "color": {
+              "default": string,
+              "hover": string,
+              "active": string
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json
@@ -461,10 +461,12 @@
                 "default": "#f6f7fa",
                 "hover": "#ffffff",
                 "active": "#ffffff",
-                "muted": "#696e79"
+                "muted": "#696e79",
+                "disabled": "#a0a0a0"
               },
               "icon": {
-                "default": "#e4e2e9"
+                "default": "#e4e2e9",
+                "disabled": "#a0a0a0"
               }
             },
             "background": {
@@ -535,13 +537,6 @@
               }
             }
           },
-          "title": {
-            "color": {
-              "default": "#696e79",
-              "hover": "#696e79",
-              "active": "#696e79"
-            }
-          },
           "subItem": {
             "color": {
               "text": {
@@ -556,6 +551,13 @@
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json
@@ -883,10 +883,12 @@
                 "default": "#ffffff",
                 "hover": "#ffffff",
                 "active": "#ffffff",
-                "muted": "#b3b6bd"
+                "muted": "#b3b6bd",
+                "disabled": "#808080"
               },
               "icon": {
-                "default": "#b3b6bd"
+                "default": "#b3b6bd",
+                "disabled": "#808080"
               }
             }
           },
@@ -901,11 +903,13 @@
             "color": {
               "text": {
                 "default": "#b3b6bd",
+                "disabled": "#808080",
                 "hover": "#ffffff",
                 "active": "#ffffff"
               },
               "background": {
                 "default": "rgba(0,0,0,0)",
+                "disabled": "rgba(0,0,0,0)",
                 "hover": "lch(19.1 0 0)",
                 "active": "rgba(0,0,0,0)"
               }
@@ -941,23 +945,19 @@
                 "default": "#ffffff",
                 "hover": "#ffffff",
                 "active": "#ffffff",
-                "muted": "#b3b6bd"
+                "muted": "#b3b6bd",
+                "disabled": "#808080"
               },
               "icon": {
-                "default": "#b3b6bd"
+                "default": "#b3b6bd",
+                "disabled": "#808080"
               }
             }
           },
-          "title": {
-            "color": {
-              "default": "#b3b6bd",
-              "hover": "#b3b6bd",
-              "active": "#b3b6bd"
-            }
-          },
           "subItem": {
             "color": {
               "text": {
+                "disabled": "#808080",
                 "default": "#b3b6bd",
                 "hover": "#ffffff",
                 "active": "#ffffff"
@@ -969,6 +969,13 @@
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#b3b6bd",
+              "hover": "#b3b6bd",
+              "active": "#b3b6bd"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

diff --git a/src/styles/variables.json b/src/styles/variables.json
@@ -1797,10 +1797,12 @@
                 "default": "#161517",
                 "hover": "#161517",
                 "active": "#161517",
-                "muted": "#696e79"
+                "muted": "#696e79",
+                "disabled": "#a0a0a0"
               },
               "icon": {
-                "default": "#696e79"
+                "default": "#696e79",
+                "disabled": "#a0a0a0"
               }
             }
           },
@@ -1815,13 +1817,19 @@
             "color": {
               "text": {
                 "default": "#696e79",
+                "disabled": "#a0a0a0",
                 "hover": "#161517",
                 "active": "#161517"
               },
               "background": {
                 "default": "rgba(0,0,0,0)",
+                "disabled": "rgba(0,0,0,0)",
                 "hover": "lch(91.6 1.1 266 / 0.6)",
                 "active": "rgba(0,0,0,0)"
+              },
+              "icon": {
+                "default": "#696e79",
+                "disabled": "#a0a0a0"
               }
             }
           },
@@ -1855,23 +1863,19 @@
                 "default": "#161517",
                 "hover": "#161517",
                 "active": "#161517",
-                "muted": "#696e79"
+                "muted": "#696e79",
+                "disabled": "#a0a0a0"
               },
               "icon": {
-                "default": "#696e79"
+                "default": "#696e79",
+                "disabled": "#a0a0a0"
               }
             }
           },
-          "title": {
-            "color": {
-              "default": "#696e79",
-              "hover": "#696e79",
-              "active": "#696e79"
-            }
-          },
           "subItem": {
             "color": {
               "text": {
+                "disabled": "#a0a0a0",
                 "default": "#696e79",
                 "hover": "#161517",
                 "active": "#161517"
@@ -1883,6 +1887,13 @@
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {