feat(redmine 1305754): create a floating menu

.changeset/lazy-coins-camp.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+Creating a floating menu

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx

@@ -0,0 +1,34 @@
+export const floatingMenuLabelMock = {
+  children: [
+    {
+      hasModal: true,
+      href: '',
+      id: 0,
+      text: 'Document',
+    },
+    {
+      hasModal: false,
+      href: 'https://mantine.dev#1',
+      id: 1,
+      text: 'Favoris ',
+    },
+    {
+      hasModal: true,
+      href: '',
+      id: 2,
+      text: 'Archives',
+    },
+    {
+      hasModal: false,
+      href: 'https://mantine.dev#2',
+      id: 3,
+      text: 'Contrats',
+    },
+    {
+      hasModal: true,
+      href: '',
+      id: 4,
+      text: 'Aide',
+    },
+  ],
+};

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css

@@ -0,0 +1,175 @@
+.isOpened {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: var(--mantine-color-cyan-9);
+
+  .floatingMenuLabel {
+    display: block;
+    color: #fff;
+  }
+
+  .floatingMenuButton {
+    color: #fff;
+  }
+  /* noinspection CssInvalidAtRule    */
+  @mixin larger-than $mantine-breakpoint-xs {
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+
+    svg {
+      flex: 1 0 25px;
+    }
+  }
+}
+.floatingMenuContainer {
+  position: fixed;
+  bottom: 0;
+  justify-content: space-around;
+  align-items: self-start;
+  flex-direction: row;
+  background-color: white;
+  width: 100%;
+  z-index: 190;
+
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    justify-content: space-evenly;
+    flex-direction: column;
+    top: 50%;
+    width: 56px;
+    height: max-content;
+    box-shadow: -6px 6px 7px 3px #00000008;
+    transform: translateY(-50%);
+    gap: 5px;
+  }
+}
+@mixin larger-than $mantine-breakpoint-xs {
+  .left {
+    left: 0;
+    border-radius: 0px 8px 8px 0px;
+    .floatingMenuItem {
+      left: calc(-138px + 56px);
+      transition: left 0.3s ease;
+    }
+
+    .floatingMenuItem {
+      justify-content: flex-end;
+      align-items: center;
+
+      &:hover,
+      &.isOpened {
+        justify-content: flex-start;
+        border-radius: 0px 28px 28px 0px;
+        left: 0;
+
+        .floatingMenuLabel {
+          display: block;
+          color: #fff;
+        }
+
+        .floatingMenuButton {
+          color: #fff;
+        }
+      }
+    }
+
+    .floatingMenuButton {
+      span {
+        justify-content: flex-start;
+        flex-direction: row-reverse;
+      }
+    }
+  }
+
+  .right {
+    right: 0;
+    border-radius: 8px 0px 0px 8px;
+
+    .floatingMenuItem {
+      right: 0;
+      transition: right 0.3s ease;
+
+      &:hover,
+      &.isOpened {
+        flex-direction: column;
+        border-radius: 28px 0px 0px 28px;
+        right: calc(138px - 56px);
+
+        .floatingMenuLabel {
+          display: block;
+          color: #fff;
+        }
+
+        .floatingMenuButton {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.floatingMenuItem {
+  position: relative;
+  padding: 10px 5px;
+  justify-content: space-between;
+  height: 100%;
+
+  span {
+    flex-direction: column;
+    max-width: 84px;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: center;
+    gap: 5px;
+  }
+
+  &:hover {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    background-color: var(--mantine-color-cyan-9);
+
+    /*noinspection CssInvalidAtRule*/
+    @mixin larger-than $mantine-breakpoint-xs {
+      align-items: flex-start;
+      border-radius: 28px 0px 0px 28px;
+
+      svg {
+        flex: 1 0 25px;
+      }
+    }
+  }
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    width: 138px;
+    padding: 0 15px;
+    height: 56px;
+
+    span {
+      flex-direction: row;
+      max-width: 100%;
+      gap: 0;
+    }
+  }
+}
+
+.floatingMenuButton {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  color: var(--mantine-color-dark-6);
+
+  @mixin larger-than $mantine-breakpoint-xs {
+    height: 59px;
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+  }
+}
+
+.floatingMenuLabel {
+  @mixin larger-than $mantine-breakpoint-xs {
+    display: none;
+  }
+}

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FloatingMenu as Cmp } from './FloatingMenu';
+import { floatingMenuLabelMock } from './FloatingMenu.mock';
+
+const meta = {
+  component: Cmp,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  title: '3-custom/Components/FloatingMenu',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const FloatingMenu: IStory = {
+  args: {
+    items: floatingMenuLabelMock.children,
+    position: 'right',
+  },
+};

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx

@@ -0,0 +1,103 @@
+'use client';
+import type { ReactElement } from 'react';
+
+import { ActionIcon, Flex, Group, Modal, Text } from '@mantine/core';
+import {
+  CalendarBlank,
+  FileText,
+  Newspaper,
+  Question,
+  Star,
+} from '@phosphor-icons/react';
+import { useState } from 'react';
+
+import classes from './FloatingMenu.module.css';
+
+type IMenuPosition = 'left' | 'right';
+
+export interface IMenuItems {
+  hasModal: boolean;
+  href: string;
+  id: number;
+  text: string;
+}
+
+export interface IFloatingMenuProps {
+  items?: IMenuItems[];
+  position?: IMenuPosition;
+}
+
+const icons = [FileText, Star, Newspaper, CalendarBlank, Question];
+
+export function FloatingMenu(props: IFloatingMenuProps): ReactElement {
+  const { position = 'right', items } = props;
+
+  const [openedItem, setOpenedItem] = useState<number | null>(null);
+
+  const handleOpen = (index: number) => () => {
+    setOpenedItem(openedItem === index ? null : index);
+  };
+
+  const handleClose: () => void = () => {
+    setOpenedItem(null);
+  };
+
+  const positionClass = position === 'right' ? classes.right : classes.left;
+  return (
+    <Flex
+      bg="white"
+      className={`${classes.floatingMenuContainer} ${positionClass}`}
+      mih={50}
+      wrap="wrap"
+    >
+      {items?.map((item, index) => {
+        const Icon = icons[index];
+
+        return (
+          <Group
+            key={`${index + index}`}
+            className={`${classes.floatingMenuItem} ${
+              openedItem === index ? classes.isOpened : ''
+            }`}
+            justify="center"
+            onClick={item.hasModal ? handleOpen(index) : undefined}
+          >
+            <ActionIcon
+              aria-label={item.text}
+              className={classes.floatingMenuButton}
+              color={openedItem === index ? 'white' : 'black'}
+              component={item.hasModal ? 'button' : 'a'}
+              display="flex"
+              href={!item.hasModal ? item.href : ''}
+              variant="transparent"
+            >
+              <Icon size={24} />
+              <Text
+                className={classes.floatingMenuLabel}
+                size="12px"
+                style={{ width: '100%' }}
+                truncate="end"
+              >
+                {item.text}
+              </Text>
+            </ActionIcon>
+
+            {item.hasModal ? (
+              <Modal
+                onClose={handleClose}
+                opened={openedItem === index}
+                overlayProps={{
+                  backgroundOpacity: 0.3,
+                }}
+              >
+                {item.text}
+              </Modal>
+            ) : (
+              ''
+            )}
+          </Group>
+        );
+      })}
+    </Flex>
+  );
+}

packages/haring-react/src/index.tsx

@@ -28,6 +28,8 @@ export type { IButtonListProps } from './Components/ButtonList/ButtonList';
 export { ButtonList } from './Components/ButtonList/ButtonList';
 export { ActionBar } from './Components/ActionBar/ActionBar';
 export type { IActionBarProps } from './Components/ActionBar/ActionBar';
+export { FloatingMenu } from './Components/FloatingMenu/FloatingMenu';
+export type { IFloatingMenuProps } from './Components/FloatingMenu/FloatingMenu';
 export { ActionList } from './Components/ActionList/ActionList';
 export type {
   IActionListProps,