popout menu gets hover state when open

airbytehq · Jul 11, 2022 · 7742d58 · 7742d58
1 parent 15d36f4
commit 7742d58
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/airbyte-webapp/src/components/base/Popout/Popout.tsx b/airbyte-webapp/src/components/base/Popout/Popout.tsx
@@ -22,14 +22,15 @@ const ControlComponent = (props: ControlProps<Value, false>) => (
   <div ref={props.innerRef}>
     {props.selectProps.selectProps.targetComponent({
       onOpen: props.selectProps.selectProps.onOpen,
+      isOpen: props.selectProps.menuIsOpen,
       value: props.selectProps.value,
     })}
   </div>
 );
 
-type PopoutProps = DropdownProps & {
+interface PopoutProps extends DropdownProps {
   targetComponent: (props: { onOpen: () => void; isOpen?: boolean; value: Value }) => ReactNode;
-};
+}
 
 const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
   const [isOpen, toggleOpen] = useToggle(false);
@@ -61,7 +62,10 @@ const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props })
   return (
     <>
       <DropDown
-        selectProps={{ targetComponent, onOpen: toggleOpen }}
+        selectProps={{
+          targetComponent,
+          onOpen: toggleOpen,
+        }}
         autoFocus
         backspaceRemovesValue={false}
         controlShouldRenderValue={false}

diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -23,10 +23,9 @@ import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
 import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
 import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator";
-import { useCalculateSidebarStyles } from "views/layout/SideBar/SideBar";
+import { useCalculateSidebarStyles, getPopoutStyles } from "views/layout/SideBar/SideBar";
 
 import { RoutePaths } from "../../../../../pages/routePaths";
-import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; // eslint-disable-line
 
 const CreditsIcon = styled(FontAwesomeIcon)`
   font-size: 21px;
@@ -140,8 +139,8 @@ const SideBar: React.FC = () => {
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "status" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <div className={styles.menuItem} onClick={onOpen}>
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />
@@ -167,8 +166,8 @@ const SideBar: React.FC = () => {
               },
             ]}
           >
-            {({ onOpen }) => (
-              <div className={styles.menuItem} onClick={onOpen}>
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <FontAwesomeIcon icon={faQuestionCircle} size="2x" />
                 <Text>
                   <FormattedMessage id="sidebar.support" />

diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
@@ -47,4 +47,9 @@
       background: colors.$dark-blue-400;
     }
   }
+
+  &.popoutOpen {
+    background: colors.$dark-blue-600;
+    transition: variables.$transition-out;
+  }
 }
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
@@ -64,6 +64,10 @@ export const useCalculateSidebarStyles = () => {
   return ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive);
 };
 
+export const getPopoutStyles = (isOpen?: boolean) => {
+  return classnames(styles.menuItem, { [styles.popoutOpen]: isOpen });
+};
+
 const SideBar: React.FC = () => {
   const config = useConfig();
   const workspace = useCurrentWorkspace();
@@ -124,8 +128,8 @@ const SideBar: React.FC = () => {
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <div className={styles.menuItem} onClick={onOpen}>
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />

diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
@@ -29,7 +29,7 @@ export const Icon = styled.div`
 `;
 
 const SidebarPopout: React.FC<{
-  children: (props: { onOpen: () => void }) => React.ReactNode;
+  children: (props: { onOpen: () => void; isOpen?: boolean }) => React.ReactNode;
   options: Array<{ value: string; label?: React.ReactNode }>;
 }> = ({ children, options }) => {
   const config = useConfig();
@@ -110,7 +110,12 @@ const SidebarPopout: React.FC<{
 
   return (
     <Popout
-      targetComponent={(targetProps) => children({ onOpen: targetProps.onOpen })}
+      targetComponent={(targetProps) =>
+        children({
+          onOpen: targetProps.onOpen,
+          isOpen: targetProps.isOpen,
+        })
+      }
       styles={{
         menuPortal: (base) => ({
           ...base,