Kaisa/refactor/377 refactor development page to use new sidebar

frontend-next-migration/src/app/[lng]/(helper)/hero-development/layout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { LayoutWithSidebars } from '@/preparedPages/Layouts';
-import { HeroDevelopmentSidebar } from '@/features/NavigateHeroes';
+import { HeroDevelopmentNavMenuAsDropdown } from '@/features/NavigateHeroes';
 
 type Props = {
     children: ReactNode;
@@ -10,7 +10,7 @@ export default function HeroDevelopmentLayout({ children }: Props) {
     return (
         <LayoutWithSidebars
             leftTopSidebar={{
-                component: <HeroDevelopmentSidebar />,
+                component: <HeroDevelopmentNavMenuAsDropdown />,
             }}
         >
             {children}

frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.module.scss

@@ -1,3 +1,4 @@
 .Width {
   width: 100%;
+  min-width: 250px;
 }

frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx

@@ -7,11 +7,14 @@ import {
     NavMenuWithDropdowns,
     NavMenuWithDropdownsProps,
     DropdownItem,
-} from '@/shared/ui/NavMenuWithDropdowns';
+} from '@/shared/ui/NavMenuWithDropdownsV2';
 import { getRouteOneHeroDevPage } from '@/shared/appLinks/RoutePaths';
 import { useClientTranslation } from '@/shared/i18n';
+import useSizes from '@/shared/lib/hooks/useSizes';
 
 const HeroDevelopmentNavMenuAsDropdown: React.FC = () => {
+    const { isMobileSize, isTabletSize } = useSizes();
+    const isTouchDevice = isMobileSize || isTabletSize;
     const { t } = useClientTranslation('heroes');
     const pathname = usePathname();
     const selectedHero = pathname.split('/')[3];
@@ -20,7 +23,7 @@ const HeroDevelopmentNavMenuAsDropdown: React.FC = () => {
     const allHeroGroups = heroManager.getGroupsWithHeroesAsArray();
 
     const dropdownItems: DropdownItem[] = allHeroGroups.map((group) => ({
-        title: group.name,
+        title: group.name.charAt(0) + group.name.slice(1).toLowerCase(),
         openByDefault: false,
         elements: group.heroes.map((hero) => ({
             elementText: hero.title,
@@ -30,17 +33,34 @@ const HeroDevelopmentNavMenuAsDropdown: React.FC = () => {
         })),
     }));
 
-    const navMenuWithDropdownsProps: NavMenuWithDropdownsProps = {
+    const navMenuWithDropdownsMobileProps: NavMenuWithDropdownsProps = {
         title: t('section-title'),
         openByDefault: false,
         dropdownItems: dropdownItems,
     };
 
+    const navMenuWithDropdownsDesktopProps: NavMenuWithDropdownsProps = {
+        title: t('section-title'),
+        openByDefault: true,
+        staticDropdown: true,
+        dropdownItems: dropdownItems,
+    };
+
     return (
-        <NavMenuWithDropdowns
-            className={cls.Width}
-            {...navMenuWithDropdownsProps}
-        />
+        <div>
+            <nav style={isTouchDevice ? { display: 'contents' } : { display: 'none' }}>
+                <NavMenuWithDropdowns
+                    className={cls.Width}
+                    {...navMenuWithDropdownsMobileProps}
+                />
+            </nav>
+            <nav style={isTouchDevice ? { display: 'none' } : { display: 'block' }}>
+                <NavMenuWithDropdowns
+                    className={cls.Width}
+                    {...navMenuWithDropdownsDesktopProps}
+                />
+            </nav>
+        </div>
     );
 };
 

frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.module.scss

@@ -26,7 +26,7 @@ $touchSize: 1023px;
   top: $navbar-height;
   height: calc(100vh - #{$navbar-height});
   flex-shrink: 0;
-  min-width: 220px;
+  min-width: 250px;
   flex-basis: 20%;
   overflow-y: auto;
   padding-left: 20px;

frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.tsx

@@ -60,7 +60,7 @@ const LayoutWithSidebars = (props: DesktopLeftSidebarLayoutProps) => {
             {leftTopSidebar && (
                 <aside
                     style={{
-                        minWidth: collapsed ? '1em' : '220px',
+                        minWidth: collapsed ? '1em' : '250px',
                         flexBasis: collapsed ? '1em' : '20%',
                         overflowX: collapsed ? 'hidden' : 'auto',
                         top: !isTopIndentCustom ? '50px' : undefined,

frontend-next-migration/src/shared/ui/DropdownWrapperV2/types/index.ts

@@ -30,7 +30,7 @@ export type DropdownWrapperProps = {
     elements: Array<DropDownElement>;
     onOpen?: () => void;
     onClose?: () => void;
-    children: ReactNode;
+    children?: ReactNode;
     dataTestId?: string;
     mouseOverLeaveMode?: boolean;
     isDisabled?: {
@@ -40,4 +40,6 @@ export type DropdownWrapperProps = {
     openByDefault?: boolean;
     staticDropdown?: boolean;
     staticTitle?: string;
+    dynamicTitle?: string;
+    showArrow?: boolean;
 };

frontend-next-migration/src/shared/ui/DropdownWrapperV2/ui/DropdownWrapper.module.scss

@@ -70,10 +70,20 @@
   margin-top: 12px;
 }
 
+.dynamicHeading {
+  color: var(--secondary-color);
+  cursor: pointer;
+}
+
 .childrenWrapper {
   display: flex;
   align-items: center;
   gap: 7px;
+  color: var(--primary-color);
+  cursor: pointer;
+  &:hover {
+    color: var(--secondary-color);
+  }
 }
 
 .disabled {
@@ -89,4 +99,5 @@
 
 .active {
   color: var(--secondary-color) !important;
+  text-decoration: underline;
 }

frontend-next-migration/src/shared/ui/DropdownWrapperV2/ui/DropdownWrapper.tsx

@@ -26,6 +26,8 @@ export const DropdownWrapper = (props: DropdownWrapperProps) => {
         openByDefault = false,
         staticDropdown = false,
         staticTitle = '',
+        dynamicTitle,
+        showArrow,
     } = props;
 
     const [isOpen, setIsOpen] = useState<boolean>(openByDefault || staticDropdown);
@@ -128,30 +130,43 @@ export const DropdownWrapper = (props: DropdownWrapperProps) => {
                     {staticTitle}
                 </div>
             ) : (
-                <div
-                    onClick={!isDisabled?.status ? toggleDropdown : undefined}
-                    role="button"
-                    title={isDisabled?.status ? isDisabled?.reason : ''}
-                    className={classNames(cls.childrenWrapper, {}, [
-                        childrenWrapperClassName,
-                        mainElementClass,
-                    ])}
-                >
-                    {children}
-                    <span
-                        style={{
-                            display: 'inline-block',
-                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-                            transition: 'transform 0.4s ease-in-out',
-                        }}
+                <div>
+                    <div
+                        onClick={!isDisabled?.status ? toggleDropdown : undefined}
+                        role="button"
+                        className={cls.dynamicHeading}
+                    >
+                        {dynamicTitle}
+                        {showArrow && (
+                            <span
+                                style={{
+                                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                                    transition: 'transform 0.4s ease-in-out',
+                                    position: 'absolute',
+                                    right: '10%',
+                                    marginTop: '7px',
+                                }}
+                            >
+                                <Image
+                                    loading="eager"
+                                    alt={'Chevron'}
+                                    src={chevronDown}
+                                    className={cls.chevronImage}
+                                />
+                            </span>
+                        )}
+                    </div>
+                    <div
+                        onClick={!isDisabled?.status ? toggleDropdown : undefined}
+                        role="button"
+                        title={isDisabled?.status ? isDisabled?.reason : ''}
+                        className={classNames(cls.childrenWrapper, { [cls.active]: isOpen }, [
+                            childrenWrapperClassName,
+                            mainElementClass,
+                        ])}
                     >
-                        <Image
-                            loading="eager"
-                            alt={'Chevron'}
-                            src={chevronDown}
-                            className={cls.chevronImage}
-                        />
-                    </span>
+                        {children}
+                    </div>
                 </div>
             )}
             {shouldRender && (

frontend-next-migration/src/shared/ui/NavMenuWithDropdownsV2/ui/NavMenuWithDropdowns.module.scss

@@ -63,7 +63,6 @@
   color: var(--content-primary);
   justify-self: flex-start;
   width: 100%;
-  text-decoration: underline;
 
   .subDropDownChildren {
     justify-content: space-between;

frontend-next-migration/src/shared/ui/NavMenuWithDropdownsV2/ui/NavMenuWithDropdowns.tsx

@@ -112,6 +112,7 @@ function NavMenuWithDropdowns(props: NavMenuWithDropdownsProps): JSX.Element {
             <DropdownWrapper
                 openByDefault={openByDefault}
                 staticDropdown={staticDropdown}
+                dynamicTitle={dynamicTitle}
                 staticTitle={title}
                 dataTestId={title}
                 elements={dropdownItems.map((item, index) =>
@@ -145,9 +146,8 @@ function NavMenuWithDropdowns(props: NavMenuWithDropdownsProps): JSX.Element {
                 className={cls.topDropDown}
                 childrenWrapperClassName={cls.topDropDownChildren}
                 contentClassName={cls.topDropDownContent}
-            >
-                {dynamicTitle}
-            </DropdownWrapper>
+                showArrow={true}
+            />
         </div>
     );
 }