Merge pull request #345 from Alt-Org/kaisa/enhancement/327-replace-ga…

…llery-dropdown-with-a-sidebar

Kaisa/enhancement/327 replace gallery dropdown with a sidebar

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 (
         <LayoutWithSidebars
             leftTopSidebar={{
-                component: <GalleryNavMenuAsDropdown openByDefault={true} />,
+                collapsed: !sidebarVisible,
+                component: (
+                    <GalleryNavMenuAsSidebar
+                        sidebarVisible={sidebarVisible}
+                        setSidebarVisible={setSidebarVisible}
+                    />
+                ),
                 hideOnMobile: true,
             }}
             // rightBottomSidebar={

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';

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 (
+                <div
+                    key={index}
+                    onClick={() => handleRouteChange(translatedCategory)}
+                    className={cls.Category}
+                    style={
+                        selectedCategory === translatedCategory
+                            ? { color: 'var(--secondary-color)' }
+                            : {}
+                    }
+                >
+                    {translatedCategory.charAt(0).toUpperCase() +
+                        translatedCategory.slice(1).replace('-', ' ')}
+                </div>
+            );
+        } else {
+            return (
+                <div
+                    key={index}
+                    className={cls.Category}
+                    style={
+                        selectedCategory === translatedCategory
+                            ? { color: 'var(--secondary-color)' }
+                            : {}
+                    }
+                >
+                    {translatedCategory.charAt(0).toUpperCase() +
+                        translatedCategory.slice(1).replace('-', ' ')}
+                </div>
+            );
+        }
+    };
+
+    const getList = (
+        <div className={cls.Text}>
+            <h2>{t('category-menu-title')}</h2>
+
+            <div
+                className={cls.Category}
+                onClick={() => handleRouteChange(allCategory)}
+                style={selectedCategory === allCategory ? { color: 'var(--secondary-color)' } : {}}
+            >
+                {allCategory.charAt(0).toUpperCase() + allCategory.slice(1)}
+            </div>
+
+            {categories.map((cat, index) => getCategory(cat, index))}
+        </div>
+    );
+
+    return (
+        <div className={cls.Box}>
+            <div
+                className={cls.Arrow}
+                onClick={() => setSidebarVisible(!sidebarVisible)}
+            >
+                {sidebarVisible ? '<' : '>'}
+            </div>
+            {getList}
+        </div>
+    );
+};
+
+export default GalleryNavMenuAsSidebar;

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;
+    }
+}

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"
 }

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"
 }