From fa110dfc405eb13bb847c0c0e34cc268075f875a Mon Sep 17 00:00:00 2001 From: Kaisa Hakola Date: Wed, 8 Jan 2025 15:59:33 +0200 Subject: [PATCH] Change category menu from dropdown to sidebar --- .../(helper)/picture-galleries/layout.tsx | 15 +- .../src/features/NavigateGalleries/index.ts | 1 + .../ui/GalleryNavMenuAsSidebar.tsx | 134 ++++++++++++++++++ .../ui/GalleyNavMenuAsSidebar.module.scss | 33 +++++ .../i18n/locales/en/picture-galleries.json | 3 +- .../i18n/locales/fi/picture-galleries.json | 3 +- 6 files changed, 184 insertions(+), 5 deletions(-) create mode 100644 frontend-next-migration/src/features/NavigateGalleries/ui/GalleryNavMenuAsSidebar.tsx create mode 100644 frontend-next-migration/src/features/NavigateGalleries/ui/GalleyNavMenuAsSidebar.module.scss diff --git a/frontend-next-migration/src/app/[lng]/(helper)/picture-galleries/layout.tsx b/frontend-next-migration/src/app/[lng]/(helper)/picture-galleries/layout.tsx index 9006a6774..139fe112e 100644 --- a/frontend-next-migration/src/app/[lng]/(helper)/picture-galleries/layout.tsx +++ b/frontend-next-migration/src/app/[lng]/(helper)/picture-galleries/layout.tsx @@ -1,12 +1,21 @@ -import { ReactNode } from 'react'; +'use client'; +import { useState, ReactNode } from 'react'; import { LayoutWithSidebars } from '@/preparedPages/Layouts'; -import { GalleryNavMenuAsDropdown } from '@/features/NavigateGalleries'; +import { GalleryNavMenuAsSidebar } from '@/features/NavigateGalleries'; export default function PictureGalleryLayout({ children }: { children: ReactNode }) { + const [sidebarVisible, setSidebarVisible] = useState(true); + return ( , + collapsed: !sidebarVisible, + component: ( + + ), hideOnMobile: true, }} // rightBottomSidebar={ diff --git a/frontend-next-migration/src/features/NavigateGalleries/index.ts b/frontend-next-migration/src/features/NavigateGalleries/index.ts index 9f4283a60..0976d5395 100644 --- a/frontend-next-migration/src/features/NavigateGalleries/index.ts +++ b/frontend-next-migration/src/features/NavigateGalleries/index.ts @@ -1 +1,2 @@ export { default as GalleryNavMenuAsDropdown } from './ui/GalleryNavMenuAsDropdown'; +export { default as GalleryNavMenuAsSidebar } from './ui/GalleryNavMenuAsSidebar'; diff --git a/frontend-next-migration/src/features/NavigateGalleries/ui/GalleryNavMenuAsSidebar.tsx b/frontend-next-migration/src/features/NavigateGalleries/ui/GalleryNavMenuAsSidebar.tsx new file mode 100644 index 000000000..3d726cbfb --- /dev/null +++ b/frontend-next-migration/src/features/NavigateGalleries/ui/GalleryNavMenuAsSidebar.tsx @@ -0,0 +1,134 @@ +import { useParams, useRouter } from 'next/navigation'; +import { getRouteGalleryCategoryPage } from '@/shared/appLinks/RoutePaths'; +import { + getLanguageCode, + useGetDirectusGalleryImages, + getCategoryTranslation, + Category, +} from '@/entities/Gallery'; +import { useEffect, useState } from 'react'; +import { useClientTranslation } from '@/shared/i18n'; +import cls from './GalleyNavMenuAsSidebar.module.scss'; + +export interface SidebarProps { + sidebarVisible: boolean; + setSidebarVisible: (visible: boolean) => void; +} + +const GalleryNavMenuAsSidebar = (props: SidebarProps) => { + const params = useParams(); + const router = useRouter(); + const lng = params.lng as string; + const currentCategory = params.category as string; + const language = getLanguageCode(lng); + const { categories } = useGetDirectusGalleryImages(language); + const allCategory = lng === 'en' ? 'all' : 'kaikki'; + const [selectedCategory, setSelectedCategory] = useState(currentCategory || allCategory); + const { t } = useClientTranslation('picture-galleries'); + const { sidebarVisible, setSidebarVisible } = props; + + useEffect(() => { + const category = findCorrectCategory(categories); + + if (!category) { + setSelectedCategory(allCategory); + } else { + setSelectedCategory(currentCategory); + } + }, [categories, currentCategory]); + + useEffect(() => { + const category = findCorrectCategory(categories); + + if (category) { + const translatedName = getCategoryTranslation(category.translations, language); + + if (translatedName && translatedName !== currentCategory) { + handleRouteChange(translatedName); + } + } else { + setSelectedCategory(allCategory); + } + }, [categories, lng]); + + const findCorrectCategory = (categories: Category[]) => { + if (!categories) return null; + const category = categories.find((cat) => + cat.translations.some((t) => t.name === currentCategory), + ); + return category ? category : null; + }; + + const handleRouteChange = (category: string) => { + const newPath = getRouteGalleryCategoryPage(category); + router.replace(newPath); + setSelectedCategory(category); + }; + + const getCategory = (category: Category, index: number) => { + const translatedCategory = getCategoryTranslation(category.translations, language); + + if (sidebarVisible) { + return ( +
handleRouteChange(translatedCategory)} + className={cls.Category} + style={ + selectedCategory === translatedCategory + ? { color: 'var(--secondary-color)' } + : {} + } + > + {translatedCategory.charAt(0).toUpperCase() + + translatedCategory.slice(1).replace('-', ' ')} +
+ ); + } else { + return ( +
+ {translatedCategory.charAt(0).toUpperCase() + + translatedCategory.slice(1).replace('-', ' ')} +
+ ); + } + }; + + const getList = ( +
+

{t('category-menu-title')}

+ +
handleRouteChange(allCategory)} + style={selectedCategory === allCategory ? { color: 'var(--secondary-color)' } : {}} + > + {allCategory.charAt(0).toUpperCase() + allCategory.slice(1)} +
+ + {categories.map((cat, index) => getCategory(cat, index))} +
+ ); + + return ( +
+
setSidebarVisible(!sidebarVisible)} + > + {sidebarVisible ? '<' : '>'} +
+ {getList} +
+ ); +}; + +export default GalleryNavMenuAsSidebar; diff --git a/frontend-next-migration/src/features/NavigateGalleries/ui/GalleyNavMenuAsSidebar.module.scss b/frontend-next-migration/src/features/NavigateGalleries/ui/GalleyNavMenuAsSidebar.module.scss new file mode 100644 index 000000000..65289518c --- /dev/null +++ b/frontend-next-migration/src/features/NavigateGalleries/ui/GalleyNavMenuAsSidebar.module.scss @@ -0,0 +1,33 @@ +.Arrow { + display: inline-block; + position: absolute; + top: 45%; + color: var(--secondary-color); + font-weight :bolder; + font-size:1.5em; + right: .3em; + cursor: pointer; +} + +.Box { + width: 100%; + position: relative; + background: black; + border-radius: 10px; +} + +.Category { + padding-left: 0.5em; + width: fit-content; + cursor: pointer; +} + +.Text { + padding: 1em; + font-size: 26px; + + h2 { + margin-bottom: 10px; + text-align: center; + } +} diff --git a/frontend-next-migration/src/shared/i18n/locales/en/picture-galleries.json b/frontend-next-migration/src/shared/i18n/locales/en/picture-galleries.json index 25137315a..230b35c2a 100644 --- a/frontend-next-migration/src/shared/i18n/locales/en/picture-galleries.json +++ b/frontend-next-migration/src/shared/i18n/locales/en/picture-galleries.json @@ -8,5 +8,6 @@ "head-keywords": "altzone, picture galleries, art, projects, developers, designers", "info-text": "Explore a diverse collection of artistic galleries and videos that unveil the creativity behind game design. These collections offer an exclusive look at sketches, concepts, and completed works that played a crucial role in shaping our immersive game world and storytelling.", "socials-text": "Also, check out our socials!", - "explore": "Explore" + "explore": "Explore", + "category-menu-title": "Categories" } \ No newline at end of file diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/picture-galleries.json b/frontend-next-migration/src/shared/i18n/locales/fi/picture-galleries.json index 480b8d133..fdfc76564 100644 --- a/frontend-next-migration/src/shared/i18n/locales/fi/picture-galleries.json +++ b/frontend-next-migration/src/shared/i18n/locales/fi/picture-galleries.json @@ -8,5 +8,6 @@ "head-keywords": "altzone, kuvagalleriat, taide, projektit, kehittäjät, suunnittelijat", "info-text": "Tutustu monipuoliseen kokoelmaan, joka sisältää taiteellisia gallerioita ja videoita ja paljastaa pelisuunnittelun taustalla olevan luovuuden. Näiden kokoelmien avulla voit nähdä luonnoksia, konsepteja ja valmiita teoksia, jotka olivat avainasemassa pelimaailmamme kehittämisessä ja sen tarinankerronnassa.", "socials-text": "Löydä lisää meidän someista!", - "explore": "Tutustu" + "explore": "Tutustu", + "category-menu-title": "Kategoriat" } \ No newline at end of file