diff --git a/src/frontend/apps/desk/src/app/InnerLayout.tsx b/src/frontend/apps/desk/src/app/InnerLayout.tsx new file mode 100644 index 0000000..15dfbf9 --- /dev/null +++ b/src/frontend/apps/desk/src/app/InnerLayout.tsx @@ -0,0 +1,49 @@ +import { Loader } from '@openfun/cunningham-react'; +import { useEffect } from 'react'; + +import useAuthStore from '@/auth/useAuthStore'; +import { Box } from '@/components'; + +import { HEADER_HEIGHT, Header } from './header'; +import { Menu } from './menu'; + +export default function InnerLayout({ + children, +}: { + children: React.ReactNode; +}) { + const { initAuth, authenticated, initialized } = useAuthStore(); + + useEffect(() => { + if (initialized) { + return; + } + + initAuth(); + }, [initAuth, initialized]); + + if (!authenticated) { + return ( + + + + ); + } + + return ( + +
+ + + + {children} + + + + ); +} diff --git a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx b/src/frontend/apps/desk/src/app/__tests__/page.test.tsx index 8cfe977..51fa2db 100644 --- a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx +++ b/src/frontend/apps/desk/src/app/__tests__/page.test.tsx @@ -12,7 +12,7 @@ describe('Page', () => { expect(screen.getByRole('status')).toBeInTheDocument(); expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent( - 'Hello Desk!', + 'Hello Desk !', ); }); }); diff --git a/src/frontend/apps/desk/src/app/contacts/page.tsx b/src/frontend/apps/desk/src/app/contacts/page.tsx new file mode 100644 index 0000000..9717564 --- /dev/null +++ b/src/frontend/apps/desk/src/app/contacts/page.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { Box } from '@/components'; + +export default function Contacts() { + return Contacts; +} diff --git a/src/frontend/apps/desk/src/app/favorite/page.tsx b/src/frontend/apps/desk/src/app/favorite/page.tsx new file mode 100644 index 0000000..1949c2b --- /dev/null +++ b/src/frontend/apps/desk/src/app/favorite/page.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { Box } from '@/components'; + +export default function Favorite() { + return Favorite; +} diff --git a/src/frontend/apps/desk/src/app/groups/page.tsx b/src/frontend/apps/desk/src/app/groups/page.tsx new file mode 100644 index 0000000..79620d1 --- /dev/null +++ b/src/frontend/apps/desk/src/app/groups/page.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { Box } from '@/components'; + +export default function Groups() { + return Groups; +} diff --git a/src/frontend/apps/desk/src/app/help/page.tsx b/src/frontend/apps/desk/src/app/help/page.tsx new file mode 100644 index 0000000..0fc13f7 --- /dev/null +++ b/src/frontend/apps/desk/src/app/help/page.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { Box } from '@/components'; + +export default function Help() { + return Help; +} diff --git a/src/frontend/apps/desk/src/app/layout.tsx b/src/frontend/apps/desk/src/app/layout.tsx index 1017401..3277fba 100644 --- a/src/frontend/apps/desk/src/app/layout.tsx +++ b/src/frontend/apps/desk/src/app/layout.tsx @@ -5,7 +5,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { useCunninghamTheme } from '@/cunningham'; + import '@/i18n/initI18n'; +import InnerLayout from './InnerLayout'; import './globals.css'; @@ -23,7 +25,9 @@ export default function RootLayout({ - {children} + + {children} + diff --git a/src/frontend/apps/desk/src/app/menu/Menu.tsx b/src/frontend/apps/desk/src/app/menu/Menu.tsx index ee30649..2126abe 100644 --- a/src/frontend/apps/desk/src/app/menu/Menu.tsx +++ b/src/frontend/apps/desk/src/app/menu/Menu.tsx @@ -25,12 +25,12 @@ export const Menu = () => { $justify="space-between" $direction="column" > - - - - - - + + + + + + ); diff --git a/src/frontend/apps/desk/src/app/menu/MenuItems.tsx b/src/frontend/apps/desk/src/app/menu/MenuItems.tsx index 6f3ba04..6fb641c 100644 --- a/src/frontend/apps/desk/src/app/menu/MenuItems.tsx +++ b/src/frontend/apps/desk/src/app/menu/MenuItems.tsx @@ -1,6 +1,9 @@ import { Button } from '@openfun/cunningham-react'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; import React, { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; import { Box } from '@/components/'; import { useCunninghamTheme } from '@/cunningham'; @@ -8,41 +11,71 @@ import { SVGComponent } from '@/types/components'; import { Tooltip } from './Tooltip'; +const StyledLink = styled(Link)` + text-decoration: none; + color: #ffffff33; + &[aria-current='page'] { + color: #ffffff; + } +`; + interface MenuItemProps { Icon: SVGComponent; label: string; + href: string; } -const MenuItem = ({ Icon, label }: MenuItemProps) => { +const MenuItem = ({ Icon, label, href }: MenuItemProps) => { const { t } = useTranslation(); - const buttonRef = useRef(null); + const pathname = usePathname(); const { colorsTokens } = useCunninghamTheme(); + const buttonRef = useRef(null); const [isTooltipOpen, setIsTooltipOpen] = useState(false); + const isActive = pathname === href; + 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 ( - <> + setIsTooltipOpen(true)} + onMouseOut={() => setIsTooltipOpen(false)} + > button { padding: 0}; transition: all 0.2s ease-in-out `} - $background={colorsTokens()['primary-300']} + $background={background} $radius="10px" - onMouseOver={() => setIsTooltipOpen(true)} - onMouseOut={() => setIsTooltipOpen(false)} >