feat(redmine 1246925): added Switch example and display/hide `Sideb…

…arMenu` to `TestPage`
Smile-SA · Sep 25, 2023 · 71d0dbb · 71d0dbb
1 parent b470faf
commit 71d0dbb
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/.changeset/new-penguins-cheer.md b/.changeset/new-penguins-cheer.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': patch
+---
+
+Added `Switch` example and `SidebarMenu` show/hide to `TestPage`
diff --git a/packages/react-front-kit/src/3-custom/Pages/TestPage/TestPage.tsx b/packages/react-front-kit/src/3-custom/Pages/TestPage/TestPage.tsx
@@ -1,8 +1,16 @@
 'use client';
 
-import type { FormEvent, ReactElement } from 'react';
+import type { ChangeEvent, FormEvent, ReactElement } from 'react';
 
-import { AppShell, Avatar, Container, Grid, Menu } from '@mantine/core';
+import {
+  AppShell,
+  Avatar,
+  Container,
+  Grid,
+  Menu,
+  Switch,
+  Text,
+} from '@mantine/core';
 import { useState } from 'react';
 
 import { primaryTheme } from '../../../theme';
@@ -16,11 +24,16 @@ import { menu } from '../../Components/SidebarMenu/SidebarMenu.mock';
  */
 export function TestPage(): ReactElement {
   const [search, setSearch] = useState('');
+  const [isSidebarVisible, setIsSidebarVisible] = useState(true);
 
   function handleSearchSubmit(event: FormEvent): void {
     event.preventDefault();
   }
 
+  function handleSidebarVisibleToggle(e: ChangeEvent<HTMLInputElement>): void {
+    setIsSidebarVisible(Boolean(e.target.checked));
+  }
+
   return (
     <AppShell
       header={
@@ -58,11 +71,26 @@ export function TestPage(): ReactElement {
       }
       padding={0}
     >
-      <Container fluid p="48px 64px">
-        <Grid gutter="xl">
+      <Container fluid p="40px 64px">
+        <Grid>
           <Grid.Col span={3}>
-            <SidebarMenu menu={menu} />
+            <Switch
+              checked={isSidebarVisible}
+              label={
+                <Text fw={600} size="md">
+                  Voir l&apos;arborescence
+                </Text>
+              }
+              onChange={handleSidebarVisibleToggle}
+            />
           </Grid.Col>
+        </Grid>
+        <Grid grow gutter="xl">
+          {isSidebarVisible ? (
+            <Grid.Col span={3}>
+              <SidebarMenu menu={menu} />
+            </Grid.Col>
+          ) : null}
           <Grid.Col span={9}>
             <p>
               Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing