From 3ba1d19f419b1c17e5982e91c034edb4a76d5170 Mon Sep 17 00:00:00 2001 From: Kaisa Hakola Date: Tue, 4 Feb 2025 11:13:26 +0200 Subject: [PATCH 1/7] Modify development layout to use new sidebar --- .../src/app/[lng]/(helper)/hero-development/layout.tsx | 4 ++-- .../NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend-next-migration/src/app/[lng]/(helper)/hero-development/layout.tsx b/frontend-next-migration/src/app/[lng]/(helper)/hero-development/layout.tsx index 3b5f748aa..dd8375579 100644 --- a/frontend-next-migration/src/app/[lng]/(helper)/hero-development/layout.tsx +++ b/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 ( , + component: , }} > {children} diff --git a/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx b/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx index daaac5583..34552b602 100644 --- a/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx +++ b/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx @@ -7,7 +7,7 @@ import { NavMenuWithDropdowns, NavMenuWithDropdownsProps, DropdownItem, -} from '@/shared/ui/NavMenuWithDropdowns'; +} from '@/shared/ui/NavMenuWithDropdownsV2'; import { getRouteOneHeroDevPage } from '@/shared/appLinks/RoutePaths'; import { useClientTranslation } from '@/shared/i18n'; From 46f211df759604ec2ab93b641d8e2a24ee1211b7 Mon Sep 17 00:00:00 2001 From: Kaisa Hakola Date: Tue, 4 Feb 2025 15:49:19 +0200 Subject: [PATCH 2/7] Update dropdown to be static in desktop --- .../NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx b/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx index 34552b602..b790653a6 100644 --- a/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx +++ b/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx @@ -10,8 +10,11 @@ import { } 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]; @@ -39,6 +42,7 @@ const HeroDevelopmentNavMenuAsDropdown: React.FC = () => { return ( ); From ad5dfab4a6c9b4a6ab775d90ffea408ab0ff8c07 Mon Sep 17 00:00:00 2001 From: Kaisa Hakola Date: Tue, 4 Feb 2025 16:09:34 +0200 Subject: [PATCH 3/7] Change subdropdown titles to lower case --- .../NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx b/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx index b790653a6..d096c55a1 100644 --- a/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx +++ b/frontend-next-migration/src/features/NavigateHeroes/ui/HeroDevelopmentNavMenuAsDropdown.tsx @@ -23,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, From 9b8a5918f0d8bd6ca453108acb9c15649cfedc12 Mon Sep 17 00:00:00 2001 From: Kaisa Hakola Date: Wed, 5 Feb 2025 13:31:36 +0200 Subject: [PATCH 4/7] Raise the sidebars min-width a bit Prevents the arrow icons to not hide under longer words --- .../ui/LayoutWithSidebars/LayoutWithSidebars.module.scss | 2 +- .../Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.module.scss b/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.module.scss index f6d711174..4ded67e8c 100644 --- a/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.module.scss +++ b/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; diff --git a/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.tsx b/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.tsx index 2102e3494..d716669d7 100644 --- a/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.tsx +++ b/frontend-next-migration/src/preparedPages/Layouts/ui/LayoutWithSidebars/LayoutWithSidebars.tsx @@ -60,7 +60,7 @@ const LayoutWithSidebars = (props: DesktopLeftSidebarLayoutProps) => { {leftTopSidebar && (