Release 1.7.1

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-02-26T02:59:24.589Z\n"
-"PO-Revision-Date: 2026-02-26T02:59:24.589Z\n"
+"POT-Creation-Date: 2026-03-10T08:57:33.873Z\n"
+"PO-Revision-Date: 2026-03-10T08:57:33.873Z\n"
 
 msgid "Welcome to training on DHIS2"
 msgstr ""
@@ -35,6 +35,9 @@ msgstr ""
 msgid "Home"
 msgstr ""
 
+msgid "help"
+msgstr ""
+
 msgid "Exit Tutorial"
 msgstr ""
 

i18n/es.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Traning App - UI Interface\n"
-"POT-Creation-Date: 2026-02-26T02:59:24.589Z\n"
+"POT-Creation-Date: 2026-03-10T08:57:33.873Z\n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -35,6 +35,9 @@ msgstr "Ajustes"
 msgid "Home"
 msgstr "Inicio"
 
+msgid "help"
+msgstr ""
+
 msgid "Exit Tutorial"
 msgstr "Salir del tutorial"
 

i18n/fr.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Traning App - UI Interface\n"
-"POT-Creation-Date: 2026-02-26T02:59:24.589Z\n"
+"POT-Creation-Date: 2026-03-10T08:57:33.873Z\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -35,6 +35,9 @@ msgstr "Paramètres"
 msgid "Home"
 msgstr "Accueil"
 
+msgid "help"
+msgstr ""
+
 msgid "Exit Tutorial"
 msgstr "Sortir du tutoriel"
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eyeseetea/training-app",
     "description": "Training App",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "license": "GPL-3.0",
     "author": "EyeSeeTea team",
     "main": "index.js",

src/tutorial-module/interactive-training/InteractiveTrainingDrawer.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { Box, Drawer } from "@material-ui/core";
 import BackIcon from "@material-ui/icons/ArrowBack";
 import SettingsIcon from "@material-ui/icons/Settings";
@@ -10,7 +10,6 @@ import { Tooltip, TooltipText } from "../../webapp/components/tooltip/Tooltip";
 import i18n from "../../utils/i18n";
 import { ScrollableContainer } from "./ScrollableContainer";
 import { ActionButton } from "../../webapp/components/action-button/ActionButton";
-import { DrawerToggleButton } from "./DrawerToggleIcon";
 import { useDrawerCollapseMode } from "./hooks/useDrawerCollapseMode";
 
 const DRAWER_COLLAPSED_WIDTH = 40;
@@ -95,7 +94,10 @@ export const InteractiveTrainingDrawer: React.FC<SideDrawerProps> = props => {
                     onClick={onToggleClick}
                     tooltip={toggleTooltip}
                     tooltipPlacement={toggleTooltipPlacement}
-                />
+                    isMinimized={isMinimized}
+                >
+                    {isMinimized && <HelpText>{i18n.t("help")}</HelpText>}
+                </DrawerToggleButton>
             </DrawerHeader>
 
             {!isMinimized && <Content triggerKey={triggerKey}>{drawerContent}</Content>}
@@ -119,6 +121,30 @@ export const InteractiveTrainingDrawer: React.FC<SideDrawerProps> = props => {
     );
 };
 
+type DrawerToggleButtonProps = PropsWithChildren<{
+    Icon: React.ElementType;
+    onClick: () => void;
+    tooltip: string;
+    tooltipPlacement: "left" | "right";
+    isMinimized: boolean;
+}>;
+
+const DrawerToggleButton: React.FC<DrawerToggleButtonProps> = ({
+    Icon,
+    onClick,
+    tooltip,
+    tooltipPlacement,
+    isMinimized,
+    children,
+}) => (
+    <div onClick={onClick}>
+        <HeaderButton text={tooltip} placement={tooltipPlacement} isMinimized={isMinimized}>
+            <Icon />
+            {children}
+        </HeaderButton>
+    </div>
+);
+
 const Content = styled(ScrollableContainer)`
     display: flex;
     flex-direction: column;
@@ -134,9 +160,19 @@ const HeaderOptions = styled.div`
     gap: 8px;
 `;
 
-export const HeaderButton = styled(Tooltip)`
+export const HeaderButton = styled(Tooltip)<{ isMinimized?: boolean }>`
     cursor: pointer;
 
+    ${({ isMinimized }) => {
+        return isMinimized
+            ? css`
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+              `
+            : "";
+    }}
+
     svg {
         font-size: 18px !important;
         font-weight: bold;
@@ -193,8 +229,11 @@ const closedStyles = css`
     transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
     width: ${DRAWER_COLLAPSED_WIDTH}px;
     overflow: visible;
+    display: flex;
 
     & .MuiDrawer-paper {
+        flex: 1;
+        justify-content: center;
         transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
         width: ${DRAWER_COLLAPSED_WIDTH}px;
         overflow: visible;
@@ -211,3 +250,11 @@ const ActionButtonContainer = styled.div`
 const HelpButton = styled.div`
     font-size: 20px;
 `;
+
+const HelpText = styled.span`
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+`;

src/tutorial-module/interactive-training/hooks/useInteractiveTraining.ts

@@ -43,7 +43,10 @@ export function useTutorialModuleState(props: UseTutorialModuleStateProps) {
         () => (showNavButtons && !module ? handleBack : undefined),
         [handleBack, showNavButtons, module]
     );
-    const onGoHome = useMemo(() => (showNavButtons ? handleHome : undefined), [handleHome, showNavButtons]);
+    const onGoHome = useMemo(
+        () => (showNavButtons || module ? handleHome : undefined),
+        [handleHome, showNavButtons, module]
+    );
 
     const loadModule = useCallback(
         (moduleId: string) => {