feat(container): add animations to pnr

Signed-off-by: Maxime Bajeux <[email protected]>
ovh · Dec 17, 2024 · 1ebf5e1 · 1ebf5e1
1 parent f31fcf4
commit 1ebf5e1
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 56 deletions.
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx
@@ -5,10 +5,7 @@ import SidebarLinkTag from './SidebarLinkTag';
 import { Node } from './navigation-tree/node';
 import StaticLink from '@/container/nav-reshuffle/sidebar/StaticLink';
 import { OsdsIcon } from '@ovhcloud/ods-components/react';
-import {
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-} from '@ovhcloud/ods-components';
+import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 import { SvgIconWrapper } from '@ovh-ux/ovh-product-icons/utils/SvgIconWrapper';
 
 export type SidebarLinkProps = {
@@ -25,8 +22,8 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
   count = 0,
   node = {},
   linkParams = {},
-  handleOnClick = () => { },
-  handleOnEnter = () => { },
+  handleOnClick = () => {},
+  handleOnEnter = () => {},
   id = '',
   isShortText = false,
 }: SidebarLinkProps): JSX.Element => {
@@ -44,7 +41,9 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
     />
   ) : (
     <button
-      className={`${style['button-as-div']} relative`}
+      className={`${style.button_as_div} ${
+        isShortText ? style.button_as_div_short : ''
+      } relative`}
       title={t(node.translation)}
       onKeyUp={(e) => {
         if (e.key === 'Enter') {
@@ -56,9 +55,16 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
       data-testid={id}
       role="button"
     >
-      <span className='flex gap-2 align-items-center'>
-        <SvgIconWrapper name={node.svgIcon} height={32} width={32} className='p-1 fill-white block' />
-        {!isShortText && <span>{t(node.translation)}</span>}
+      <span className="flex gap-2 align-items-center justify-start">
+        <span className={style.button_as_div_icon}>
+          <SvgIconWrapper
+            name={node.svgIcon}
+            height={32}
+            width={32}
+            className="p-1 fill-white block"
+          />
+        </span>
+        <span className={style.button_as_div_text}>{t(node.translation)}</span>
       </span>
       <span className="flex justify-end align-items-center">
         {(count as number) > 0 && (
@@ -76,8 +82,8 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
         ) : null}
         {!isShortText && <SidebarLinkTag node={node} />}
       </span>
-    </button >
+    </button>
   );
 };
 
-export default SidebarLink;
+export default SidebarLink;
diff --git a/...s/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx b/...s/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx
@@ -171,7 +171,7 @@ export const PublicCloudPanel: React.FC<ComponentProps<
         )}
         {selectedPciProject && (
           <button
-            className={`d-flex ${style['button-as-div']} ${style.sidebar_clipboard}`}
+            className={`d-flex ${style.button_as_div} ${style.sidebar_clipboard}`}
             title={t('sidebar_clipboard_copy')}
             onClick={() =>
               navigator.clipboard.writeText(selectedPciProject.project_id)

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx
@@ -1,5 +1,5 @@
 import style from './style.module.scss';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Node } from '@/container/nav-reshuffle/sidebar/navigation-tree/node';
 import {
@@ -19,6 +19,7 @@ interface SubTreeProps {
   handleCloseSideBar(): void;
   handleOnSubMenuClick(node: Node): void;
   selectedNode: Node;
+  open: boolean;
 }
 
 const SubTree = ({
@@ -27,16 +28,24 @@ const SubTree = ({
   handleOnSubMenuClick,
   selectedNode,
   handleCloseSideBar,
+  open
 }: SubTreeProps): JSX.Element => {
   const { t } = useTranslation('sidebar');
   const { isMobile } = useProductNavReshuffle();
+  const [isOpen, setIsOpen] = useState(false);
 
   const [focusOnLast, setFocusOnLast] = useState<boolean>(false);
   const lastElement = getLastElement(rootNode);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setIsOpen(open);
+    }, 10);
+  }, [open])
+
   return (
     <div
-      className={style.subtree_content}
+      className={`${style.subtree_content} ${isOpen ? style.subtree_content_open : ''}`}
       onBlur={(e: any) => {
         const id = e.relatedTarget?.id.replace('-link', '');
         if (id === lastElement.id) {

diff --git a/...ages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss b/...ages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss
@@ -3,23 +3,27 @@
 @import '@ovh-ux/ui-kit/dist/scss/tokens/_globals';
 
 .subtree {
-  width: 100%;
-  height: 100%;
-  background-color: rgba($p-500, 0.50);
-  position: fixed;
-  top: 0;
-  left: 20rem;
-  z-index: 901;
-  overflow-y: auto;
   &_content {
     display: flex;
     flex-flow: column;
     justify-content: start;
     background: $p-800;
     height: auto;
     min-height: 100%;
-    width: 20rem;
+    width: 0rem;
     overflow-y: auto;
+
+    transition: transform 0.3s ease-in, opacity 0.3s ease-in, width 0s ease-out 0.3s;
+    transform: scaleX(0);
+    transform-origin: 0% 50%;
+    opacity: 0;
+
+    &_open {
+      transform: scaleX(1);
+      opacity: 1;
+      width: 20rem;
+      transition: transform 0.3s ease-in 0s, opacity 0.3s ease-in 0s, width 0s ease-out 0s;
+    }
   }
   &_list {
     min-height: 28.125rem;
@@ -32,7 +36,7 @@
       width: 100%;
     }
   }
-  &_back_btn{
+  &_back_btn {
     display: none;
     height: 2.5rem;
     background-color: $p-500;
@@ -44,12 +48,12 @@
     padding: 0 0.625em;
     width: 100%;
   }
-  &_section_title{
+  &_section_title {
     color: $p-200 !important;
     text-transform: uppercase;
     font-size: 1rem !important;
   }
-  &_section{
+  &_section {
     &:after {
       content: '';
       margin: 0 1rem;
@@ -72,21 +76,27 @@
     border: none;
   }
 
-  &_submenu_items, &_submenu_items_selected {
-    a, button {
+  &_submenu_items,
+  &_submenu_items_selected {
+    a,
+    button {
       padding: 0 1rem;
     }
   }
 
   &_submenu_items {
-    a:hover, a:focus, button:hover, button:focus  {
+    a:hover,
+    a:focus,
+    button:hover,
+    button:focus {
       background-color: darken($p-800, 5);
       text-decoration: none;
     }
   }
 
   &_submenu_items_selected {
-    a, button  {
+    a,
+    button {
       background-color: darken($p-800, 5);
       text-decoration: none !important;
     }
@@ -108,4 +118,4 @@
       display: flex;
     }
   }
-}
+}
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
@@ -21,6 +21,7 @@ import {
   findNodeByRouting,
   splitPathIntoSegmentsWithoutRouteParams,
   IServicesCount,
+  debounce
 } from './utils';
 import { Node } from './navigation-tree/node';
 import useProductNavReshuffle from '@/core/product-nav-reshuffle';
@@ -237,7 +238,12 @@ const Sidebar = (): JSX.Element => {
 
   const closeSubMenu = () => {
     setShowSubTree(false);
-    setIsManuallyClosed(true);
+
+    setTimeout(() => {
+      setSelectedNode(null);
+      setSelectedSubMenu(null);
+      setIsManuallyClosed(true);
+    }, 400);
   };
 
   const menuClickHandler = (node: Node) => {
@@ -393,6 +399,7 @@ const Sidebar = (): JSX.Element => {
           handleCloseSideBar={closeSubMenu}
           handleOnSubMenuClick={selectSubMenu}
           rootNode={selectedNode}
+          open={showSubTree}
         ></SubTree>
       )}
     </div>