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/ui/DropdownWrapper.module.scss

@@ -74,6 +74,11 @@
   display: flex;
   align-items: center;
   gap: 7px;
+  color: var(--primary-color);
+  cursor: pointer;
+  &:hover {
+    color: var(--secondary-color);
+  }
 }
 
 .disabled {
@@ -89,4 +94,5 @@
 
 .active {
   color: var(--secondary-color) !important;
+  text-decoration: underline;
 }

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

@@ -132,13 +132,13 @@ export const DropdownWrapper = (props: DropdownWrapperProps) => {
                     onClick={!isDisabled?.status ? toggleDropdown : undefined}
                     role="button"
                     title={isDisabled?.status ? isDisabled?.reason : ''}
-                    className={classNames(cls.childrenWrapper, {}, [
+                    className={classNames(cls.childrenWrapper, { [cls.active]: isOpen }, [
                         childrenWrapperClassName,
                         mainElementClass,
                     ])}
                 >
                     {children}
-                    <span
+                    {/* <span
                         style={{
                             display: 'inline-block',
                             transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
@@ -151,7 +151,7 @@ export const DropdownWrapper = (props: DropdownWrapperProps) => {
                             src={chevronDown}
                             className={cls.chevronImage}
                         />
-                    </span>
+                    </span> */}
                 </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;