🔥(app-impress) remove menu
For the moment we only have 1 menu item, so we can remove the menu.
This commit is contained in:
Anthony LC
@@ -1,75 +0,0 @@
|
|||||||
import { expect, test } from '@playwright/test';
|
|
||||||
|
|
||||||
import { keyCloakSignIn } from './common';
|
|
||||||
|
|
||||||
test.beforeEach(async ({ page, browserName }) => {
|
|
||||||
await page.goto('/');
|
|
||||||
await keyCloakSignIn(page, browserName);
|
|
||||||
});
|
|
||||||
|
|
||||||
test.describe('Menu', () => {
|
|
||||||
const menuItems = [{ name: 'Pad', isDefault: true }];
|
|
||||||
for (const { name, isDefault } of menuItems) {
|
|
||||||
test(`checks that ${name} menu item is displaying correctly`, async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const menu = page.locator('menu').first();
|
|
||||||
|
|
||||||
const buttonMenu = menu.getByLabel(`${name} button`);
|
|
||||||
await expect(buttonMenu).toBeVisible();
|
|
||||||
await buttonMenu.hover();
|
|
||||||
await expect(menu.getByLabel('tooltip')).toHaveText(name);
|
|
||||||
|
|
||||||
// Checks the tooltip is with inactive color
|
|
||||||
await expect(menu.getByLabel('tooltip')).toHaveCSS(
|
|
||||||
'background-color',
|
|
||||||
isDefault ? 'rgb(255, 255, 255)' : 'rgb(22, 22, 22)',
|
|
||||||
);
|
|
||||||
|
|
||||||
await buttonMenu.click();
|
|
||||||
|
|
||||||
// Checks the tooltip has active color
|
|
||||||
await buttonMenu.hover();
|
|
||||||
await expect(menu.getByLabel('tooltip')).toHaveCSS(
|
|
||||||
'background-color',
|
|
||||||
'rgb(255, 255, 255)',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test(`checks that ${name} menu item is routing correctly`, async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', {
|
|
||||||
name: 'Create a new pad',
|
|
||||||
}),
|
|
||||||
).toBeVisible();
|
|
||||||
|
|
||||||
const menu = page.locator('menu').first();
|
|
||||||
|
|
||||||
const buttonMenu = menu.getByLabel(`${name} button`);
|
|
||||||
await buttonMenu.click();
|
|
||||||
|
|
||||||
/* eslint-disable playwright/no-conditional-expect */
|
|
||||||
/* eslint-disable playwright/no-conditional-in-test */
|
|
||||||
if (isDefault) {
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', {
|
|
||||||
name: 'Create a new pad',
|
|
||||||
}),
|
|
||||||
).toBeVisible();
|
|
||||||
} else {
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', {
|
|
||||||
name: 'Create a new pad',
|
|
||||||
}),
|
|
||||||
).toBeHidden();
|
|
||||||
|
|
||||||
const reg = new RegExp(name.toLowerCase());
|
|
||||||
await expect(page).toHaveURL(reg);
|
|
||||||
}
|
|
||||||
/* eslint-enable playwright/no-conditional-expect */
|
|
||||||
/* eslint-enable playwright/no-conditional-in-test */
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { Box } from '@/components/';
|
|
||||||
import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
|
|
||||||
|
|
||||||
import MenuItem from './MenuItems';
|
|
||||||
import IconPad from './assets/icon-pad.svg';
|
|
||||||
|
|
||||||
export const Menu = () => {
|
|
||||||
const { colorsTokens } = useCunninghamTheme();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
as="menu"
|
|
||||||
$padding="none"
|
|
||||||
$margin="none"
|
|
||||||
$background={colorsTokens()['primary-800']}
|
|
||||||
$height="100%"
|
|
||||||
$justify="space-between"
|
|
||||||
>
|
|
||||||
<Box $padding={{ top: 'large' }} $direction="column" $gap="0.8rem">
|
|
||||||
<MenuItem Icon={IconPad} label={t('Pad')} href="/" alias={['/pads/']} />
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
import { usePathname } from 'next/navigation';
|
|
||||||
import React, { useRef, useState } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { Box, BoxButton, StyledLink } from '@/components';
|
|
||||||
import { useCunninghamTheme } from '@/cunningham';
|
|
||||||
import { SVGComponent } from '@/types/components';
|
|
||||||
|
|
||||||
import { Tooltip } from './Tooltip';
|
|
||||||
|
|
||||||
interface MenuItemProps {
|
|
||||||
Icon: SVGComponent;
|
|
||||||
label: string;
|
|
||||||
href: string;
|
|
||||||
alias?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const pathname = usePathname();
|
|
||||||
const { colorsTokens } = useCunninghamTheme();
|
|
||||||
const parentRef = useRef(null);
|
|
||||||
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
|
|
||||||
|
|
||||||
const isActive =
|
|
||||||
pathname === href ||
|
|
||||||
alias?.includes(pathname) ||
|
|
||||||
pathname.startsWith(`${href}/`) ||
|
|
||||||
alias?.some((a) => pathname.startsWith(`${a}/`));
|
|
||||||
|
|
||||||
const { color, background, colorTooltip, backgroundTooltip } = isActive
|
|
||||||
? {
|
|
||||||
color: colorsTokens()['primary-600'],
|
|
||||||
background: colorsTokens()['primary-300'],
|
|
||||||
backgroundTooltip: 'white',
|
|
||||||
colorTooltip: 'black',
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
color: '#ffffff55',
|
|
||||||
background: undefined,
|
|
||||||
backgroundTooltip: '#161616',
|
|
||||||
colorTooltip: 'white',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledLink
|
|
||||||
href={href}
|
|
||||||
aria-current={isActive && 'page'}
|
|
||||||
ref={parentRef}
|
|
||||||
onMouseOver={() => setIsTooltipOpen(true)}
|
|
||||||
onMouseLeave={() => setIsTooltipOpen(false)}
|
|
||||||
style={{ display: 'block' }}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
$margin="xtiny"
|
|
||||||
$padding="tiny"
|
|
||||||
as="li"
|
|
||||||
$justify="center"
|
|
||||||
$css={`
|
|
||||||
& > button { padding: 0};
|
|
||||||
transition: all 0.2s ease-in-out
|
|
||||||
`}
|
|
||||||
$background={background}
|
|
||||||
$radius="10px"
|
|
||||||
>
|
|
||||||
<BoxButton aria-label={t(`{{label}} button`, { label })} $color={color}>
|
|
||||||
<Icon
|
|
||||||
width="2.375rem"
|
|
||||||
aria-label={t(`{{label}} icon`, { label })}
|
|
||||||
style={{
|
|
||||||
transition: 'color 0.2s ease-in-out',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</BoxButton>
|
|
||||||
</Box>
|
|
||||||
{isTooltipOpen && (
|
|
||||||
<Tooltip
|
|
||||||
parentRef={parentRef}
|
|
||||||
label={label}
|
|
||||||
backgroundColor={backgroundTooltip}
|
|
||||||
textColor={colorTooltip}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</StyledLink>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MenuItem;
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { Popover } from '@openfun/cunningham-react';
|
|
||||||
import React, { CSSProperties, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
import { Box, Text } from '@/components/';
|
|
||||||
|
|
||||||
interface TooltipProps {
|
|
||||||
parentRef: React.MutableRefObject<null>;
|
|
||||||
textColor: CSSProperties['color'];
|
|
||||||
backgroundColor: CSSProperties['color'];
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Tooltip = ({
|
|
||||||
parentRef,
|
|
||||||
backgroundColor,
|
|
||||||
textColor,
|
|
||||||
label,
|
|
||||||
}: TooltipProps) => {
|
|
||||||
const [opacity, setOpacity] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setOpacity(1);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popover parentRef={parentRef} onClickOutside={() => ''} borderless>
|
|
||||||
<Box
|
|
||||||
aria-label="tooltip"
|
|
||||||
$padding="tiny"
|
|
||||||
$margin={{ left: 'tiny' }}
|
|
||||||
$background={backgroundColor}
|
|
||||||
$radius="4px"
|
|
||||||
$css={`
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
|
||||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
|
|
||||||
opacity: ${opacity};
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
top: -7px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 5px solid transparent;
|
|
||||||
border-right: 5px solid transparent;
|
|
||||||
border-bottom: 7px solid ${backgroundColor};
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
<Text $weight={400} $size="12px" $color={textColor}>
|
|
||||||
{label}
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
<svg
|
|
||||||
class="svg-icon"
|
|
||||||
style="vertical-align: middle; overflow: hidden"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M883.2 889.6c0 57.6-44.8 102.4-102.4 102.4h-550.4c-57.6 0-102.4-44.8-102.4-102.4v-665.6c0-57.6 44.8-102.4 102.4-102.4h550.4c57.6 0 102.4 44.8 102.4 102.4v665.6z m-57.6-665.6c0-25.6-19.2-44.8-44.8-44.8h-550.4c-25.6 0-44.8 19.2-44.8 44.8v665.6c0 25.6 19.2 44.8 44.8 44.8h550.4c25.6 0 44.8-19.2 44.8-44.8v-665.6z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M723.2 883.2h-236.8c-6.4 0-12.8-6.4-12.8-12.8s6.4-12.8 12.8-12.8h236.8c25.6 0 38.4-25.6 38.4-70.4v-44.8c0-6.4 6.4-12.8 12.8-12.8s12.8 6.4 12.8 12.8v44.8c0 57.6-25.6 96-64 96zM774.4 684.8c-6.4 0-6.4 0-12.8-6.4 0 0-6.4-6.4-6.4-12.8s0-6.4 6.4-12.8 12.8-6.4 19.2 0c0 0 6.4 6.4 6.4 12.8s0 6.4-6.4 12.8c0 6.4 0 6.4-6.4 6.4zM281.6 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c6.4 12.8-12.8 25.6-25.6 25.6zM441.6 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c0 12.8-12.8 25.6-25.6 25.6zM595.2 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c6.4 12.8-6.4 25.6-25.6 25.6zM755.2 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c6.4 12.8-6.4 25.6-25.6 25.6z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M857.6 396.8h-691.2c-6.4 0-12.8-6.4-12.8-12.8s6.4-12.8 12.8-12.8h691.2c6.4 0 12.8 6.4 12.8 12.8s0 12.8-12.8 12.8z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1 +0,0 @@
|
|||||||
export * from './Menu';
|
|
||||||
@@ -1,13 +1,11 @@
|
|||||||
import { Box } from '@/components';
|
import { Box } from '@/components';
|
||||||
import { HEADER_HEIGHT, Header } from '@/features/header';
|
import { HEADER_HEIGHT, Header } from '@/features/header';
|
||||||
import { Menu } from '@/features/menu';
|
|
||||||
|
|
||||||
export function MainLayout({ children }: { children: React.ReactNode }) {
|
export function MainLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<Box $height="100vh" $css="overflow:hidden;">
|
<Box $height="100vh" $css="overflow:hidden;">
|
||||||
<Header />
|
<Header />
|
||||||
<Box $css="flex: 1;" $direction="row">
|
<Box $css="flex: 1;" $direction="row">
|
||||||
<Menu />
|
|
||||||
<Box as="main" $height={`calc(100vh - ${HEADER_HEIGHT})`} $width="100%">
|
<Box as="main" $height={`calc(100vh - ${HEADER_HEIGHT})`} $width="100%">
|
||||||
{children}
|
{children}
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user