🪟🎨Main menu hover state

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}

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -23,6 +23,7 @@ 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, getPopoutStyles } from "views/layout/SideBar/SideBar";
 
 import { RoutePaths } from "../../../../../pages/routePaths";
 
@@ -51,29 +52,6 @@ const Menu = styled.ul`
   width: 100%;
 `;
 
-const MenuItem = styled(NavLink)`
-  color: ${({ theme }) => theme.greyColor30};
-  width: 100%;
-  cursor: pointer;
-  border-radius: 4px;
-  height: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 15px;
-  margin-top: 7px;
-  text-decoration: none;
-  position: relative;
-
-  &.active {
-    color: ${({ theme }) => theme.whiteColor};
-    background: ${({ theme }) => theme.primaryColor};
-  }
-`;
-
 const Text = styled.div`
   margin-top: 7px;
 `;
@@ -102,6 +80,8 @@ const SideBar: React.FC = () => {
   const { show } = useIntercom();
   const handleChatUs = () => show();
 
+  const navLinkClassName = useCalculateSidebarStyles();
+
   return (
     <Bar>
       <div>
@@ -114,58 +94,58 @@ const SideBar: React.FC = () => {
         <Menu>
           {workspace.displaySetupWizard ? (
             <li>
-              <MenuItem to={RoutePaths.Onboarding}>
+              <NavLink className={navLinkClassName} to={RoutePaths.Onboarding}>
                 <OnboardingIcon />
                 <Text>
                   <FormattedMessage id="sidebar.onboarding" />
                 </Text>
-              </MenuItem>
+              </NavLink>
             </li>
           ) : null}
           <li>
-            <MenuItem to={RoutePaths.Connections}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Connections}>
               <ConnectionsIcon />
               <Text>
                 <FormattedMessage id="sidebar.connections" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
           <li>
-            <MenuItem to={RoutePaths.Source}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Source}>
               <SourceIcon />
               <Text>
                 <FormattedMessage id="sidebar.sources" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
           <li>
-            <MenuItem to={RoutePaths.Destination}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Destination}>
               <DestinationIcon />
               <Text>
                 <FormattedMessage id="sidebar.destinations" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
         </Menu>
       </div>
       <Menu>
         <li>
-          <MenuItem to={CloudRoutes.Credits}>
+          <NavLink className={navLinkClassName} to={CloudRoutes.Credits}>
             <CreditsIcon icon={faStar} />
             <Text>
               <FormattedNumber value={cloudWorkspace.remainingCredits} />
             </Text>
-          </MenuItem>
+          </NavLink>
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "status" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <MenuItem onClick={onOpen} as="div">
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />
                 </Text>
-              </MenuItem>
+              </div>
             )}
           </SidebarPopout>
         </li>
@@ -186,18 +166,18 @@ const SideBar: React.FC = () => {
               },
             ]}
           >
-            {({ onOpen }) => (
-              <MenuItem onClick={onOpen} as="div">
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <FontAwesomeIcon icon={faQuestionCircle} size="2x" />
                 <Text>
                   <FormattedMessage id="sidebar.support" />
                 </Text>
-              </MenuItem>
+              </div>
             )}
           </SidebarPopout>
         </li>
         <li>
-          <MenuItem to={RoutePaths.Settings}>
+          <NavLink className={navLinkClassName} to={RoutePaths.Settings}>
             <WithFeature featureId={FeatureItem.AllowUpdateConnectors}>
               <React.Suspense fallback={null}>
                 <NotificationIndicator />
@@ -207,7 +187,7 @@ const SideBar: React.FC = () => {
             <Text>
               <FormattedMessage id="sidebar.settings" />
             </Text>
-          </MenuItem>
+          </NavLink>
         </li>
       </Menu>
     </Bar>

airbyte-webapp/src/scss/_variables.scss

@@ -1,4 +1,5 @@
 $transition: 0.3s;
+$transition-out: all $transition ease-out;
 
 $border-thin: 1px;
 $border-thick: 2px;
@@ -13,3 +14,4 @@ $spacing-lg: 15px;
 $spacing-xl: 20px;
 $spacing-2xl: 40px;
 $spacing-page-bottom: 150px;
+$defaultBottomMargin: 150px;

airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss

@@ -0,0 +1,55 @@
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+
+.menuItem {
+  color: colors.$grey-30;
+  width: 100%;
+  cursor: pointer;
+  border-radius: 12px;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 15px;
+  margin-top: 7px;
+  text-decoration: none;
+  position: relative;
+
+  &:hover,
+  &:focus-visible {
+    background: colors.$dark-blue-800;
+    transition: variables.$transition-out;
+  }
+
+  &.active {
+    color: colors.$white;
+    background: colors.$blue-400;
+    transition: variables.$transition-out;
+
+    &:hover,
+    &:focus-visible {
+      color: colors.$white;
+      background: colors.$blue-300;
+      transition: variables.$transition-out;
+    }
+  }
+
+  &.activeChild {
+    color: colors.$white;
+    background: colors.$dark-blue-600;
+
+    &:hover,
+    &:focus-visible {
+      color: colors.$white;
+      background: colors.$dark-blue-400;
+    }
+  }
+
+  &.popoutOpen {
+    background: colors.$dark-blue-600;
+    transition: variables.$transition-out;
+  }
+}