1+ import { useState } from 'react' ;
12import type { JSX } from 'react' ;
23
3- import { faChevronDown , faRightFromBracket , faUser } from '@fortawesome/free-solid-svg-icons' ;
4+ import { faChevronDown , faChevronUp } from '@fortawesome/free-solid-svg-icons' ;
45import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ;
56import { useTranslation } from 'react-i18next' ;
67
7- import { DropdownMenu , DropdownMenuContent , DropdownMenuLabel , DropdownMenuTrigger } from '~/components/dropdown-menu' ;
8+ import { getIcon } from './material-icon' ;
9+
10+ import { DropdownMenu , DropdownMenuContent , DropdownMenuSeparator , DropdownMenuTrigger } from '~/components/dropdown-menu' ;
811import { AppLink } from '~/components/links' ;
912import { MenuItem } from '~/components/menu' ;
1013import { useLanguage } from '~/hooks/use-language' ;
@@ -19,16 +22,26 @@ export function AppBar({ name }: AppBarProps): JSX.Element {
1922 const { MSCA_BASE_URL } = globalThis . __appEnvironment ;
2023
2124 return (
22- < div className = "bg-slate-700" >
23- < div className = "align-center container mx-auto flex flex-wrap justify-between" >
24- < div className = "align-center flex" >
25- < span id = "menu-label" className = "my-auto py-2 text-white sm:text-2xl" >
26- < AppLink to = { t ( 'gcweb:app.menu-dashboard.href' , { baseUri : MSCA_BASE_URL } ) } className = "hover:underline" >
25+ < div className = "sm:bg-blue-primary sm:h-15" >
26+ < div className = "align-center mx-auto flex flex-wrap justify-between sm:container sm:flex-nowrap" >
27+ < div className = "bg-blue-primary order-1 flex h-15 w-full sm:w-auto" >
28+ < span id = "menu-label" className = "my-auto px-3 md:px-1" >
29+ < AppLink
30+ to = { t ( 'gcweb:app.menu-dashboard.href' , { baseUri : MSCA_BASE_URL } ) }
31+ className = "font-lato my-auto px-3 text-[19px] font-bold text-white hover:underline md:px-1 md:text-2xl"
32+ >
2733 { t ( 'gcweb:app.title' ) }
2834 </ AppLink >
2935 </ span >
3036 </ div >
31- < div className = "flex items-center space-x-4 text-right" > { name && < UserButton name = { name } /> } </ div >
37+ < div className = "ring-blue-hover items-left order-2 flex w-full text-right text-2xl ring-offset-2 focus:ring-2 focus:outline-none sm:order-3 sm:w-65 lg:order-3" >
38+ { name && (
39+ < UserButton
40+ className = "ring-blue-hover focus:ring-blue-hover active:ring-blue-hover ring-offset-2 focus:ring-2 active:ring-2"
41+ name = { name }
42+ />
43+ ) }
44+ </ div >
3245 </ div >
3346 </ div >
3447 ) ;
@@ -42,86 +55,73 @@ type UserButtonProps = {
4255function UserButton ( { className, name } : UserButtonProps ) : JSX . Element {
4356 const { t } = useTranslation ( [ 'gcweb' ] ) ;
4457 const { currentLanguage } = useLanguage ( ) ;
58+ const [ open , setOpen ] = useState ( false ) ;
4559 const { MSCA_BASE_URL , SHOW_INBOX_MENU } = globalThis . __appEnvironment ;
4660
4761 return (
48- < DropdownMenu >
62+ < DropdownMenu open = { open } onOpenChange = { setOpen } >
4963 < DropdownMenuTrigger
5064 className = { cn (
51- 'flex h-full flex-nowrap space-x-2 bg-slate-200 px-2 text-sm text-slate-700 hover:bg-neutral-300 hover:underline focus:bg-neutral-300 focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-hidden aria-expanded:bg-neutral-300 aria-expanded:text-slate-700 sm:space-x-4 sm:px -4' ,
65+ 'bg-bright-blue-pale text-blue-primary flex h-full w-full flex-nowrap space-x-2 px-4 hover:bg-neutral-300 focus:rounded-md focus:bg-neutral-300 focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-hidden aria-expanded:bg-neutral-300 aria-expanded:text-slate-700 sm:space-x-4' ,
5266 className ,
5367 ) }
5468 >
55- < div className = "text-md my-auto flex flex-nowrap items-center space-x-2 py-2" >
56- < div className = "flex h-8 w-8 items-center justify-center rounded-full bg-slate-700" >
57- < FontAwesomeIcon icon = { faUser } className = "size-5 text-slate-200" />
58- </ div >
59- < span id = "menu-label" className = "text-md hidden py-2 font-bold sm:block" >
69+ < div className = "my-auto flex flex-nowrap items-center space-x-2 py-2 text-base" >
70+ < span className = "flex items-center" >
71+ < svg className = "mr-4" width = "35" height = "35" viewBox = "0 0 35 36" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
72+ < path
73+ d = "M17.5 0.499756C7.84 0.499756 0 8.33976 0 17.9998C0 27.6598 7.84 35.4998 17.5 35.4998C27.16 35.4998 35 27.6598 35 17.9998C35 8.33976 27.16 0.499756 17.5 0.499756ZM17.5 7.49976C20.8775 7.49976 23.625 10.2473 23.625 13.6248C23.625 17.0023 20.8775 19.7498 17.5 19.7498C14.1225 19.7498 11.375 17.0023 11.375 13.6248C11.375 10.2473 14.1225 7.49976 17.5 7.49976ZM17.5 31.9998C13.9475 31.9998 9.7475 30.5648 6.755 26.9598C9.7125 24.6498 13.44 23.2498 17.5 23.2498C21.56 23.2498 25.2875 24.6498 28.245 26.9598C25.2525 30.5648 21.0525 31.9998 17.5 31.9998Z"
74+ fill = "#26374A"
75+ />
76+ </ svg >
77+ </ span >
78+ < span id = "menu-label" className = "ring-blue-hover ml-2 py-2 font-sans text-base font-bold" >
6079 { name }
6180 </ span >
6281 </ div >
63- < FontAwesomeIcon icon = { faChevronDown } className = "my-auto size-4" />
82+ < FontAwesomeIcon icon = { open ? faChevronUp : faChevronDown } className = "my-auto ml -auto size-4" />
6483 </ DropdownMenuTrigger >
65- < DropdownMenuContent align = "end" className = "w-64" >
66- < UserName name = { name } />
84+ < DropdownMenuContent align = "start" sideOffset = { 0 } className = "w-(--radix-dropdown-menu-trigger-width) focus:outline-none" >
6785 < MenuItem
6886 to = { t ( 'gcweb:app.menu-dashboard.href' , { baseUri : MSCA_BASE_URL } ) }
69- className = "text-md flex justify-between text-black hover:bg-zinc-100 hover: text-black focus:bg-zinc-100 active:bg-zinc-100 "
87+ className = "text-deep-blue-dark hover:text-blue- hover flex justify-between text-base focus:bg-white "
7088 >
7189 { t ( 'gcweb:app.menu-dashboard' ) }
7290 </ MenuItem >
91+ < DropdownMenuSeparator />
7392 < MenuItem
7493 to = { t ( 'gcweb:app.profile.href' , { baseUri : MSCA_BASE_URL } ) }
75- className = "text-md flex justify-between text-black hover:bg-zinc-100 hover: text-black focus:bg-zinc-100 active:bg-zinc-100 "
94+ className = "text-deep-blue-dark hover:text-blue- hover flex justify-between text-base focus:bg-white "
7695 >
7796 { t ( 'gcweb:app.profile' ) }
7897 </ MenuItem >
98+ < DropdownMenuSeparator />
7999 { SHOW_INBOX_MENU && (
80- < MenuItem
81- to = { t ( 'gcweb:app.inbox.href' , { baseUri : MSCA_BASE_URL } ) }
82- className = "text-md flex justify-between text-black hover:bg-zinc-100 hover:text-black focus:bg-zinc-100 active:bg-zinc-100"
83- >
84- { t ( 'gcweb:app.inbox' ) }
85- </ MenuItem >
100+ < >
101+ < MenuItem
102+ to = { t ( 'gcweb:app.inbox.href' , { baseUri : MSCA_BASE_URL } ) }
103+ className = "text-deep-blue-dark hover:text-blue-hover flex justify-between text-base focus:bg-white"
104+ >
105+ { t ( 'gcweb:app.inbox' ) }
106+ </ MenuItem >
107+ < DropdownMenuSeparator />
108+ </ >
86109 ) }
87- < MenuItem
88- to = { t ( 'gcweb:app.security-settings.href' , { baseUri : MSCA_BASE_URL } ) }
89- className = "text-md flex justify-between text-black hover:bg-zinc-100 hover:text-black focus:bg-zinc-100 active:bg-zinc-100"
90- >
91- { t ( 'gcweb:app.security-settings' ) }
92- </ MenuItem >
93110 < MenuItem
94111 to = { t ( 'gcweb:app.contact-us.href' , { baseUri : MSCA_BASE_URL } ) }
95- className = "text-md flex justify-between text-black hover:bg-zinc-100 hover: text-black focus:bg-zinc-100 active:bg-zinc-100 "
112+ className = "text-deep-blue-dark hover:text-blue- hover flex justify-between text-base focus:bg-white "
96113 >
97114 { t ( 'gcweb:app.contact-us' ) }
98115 </ MenuItem >
99- < div role = "separator" aria-orientation = "horizontal" className = "-mx-1 my-1 h-px bg-slate-100" > </ div >
116+ < DropdownMenuSeparator / >
100117 < MenuItem
101118 to = { `/auth/logout?lang=${ currentLanguage } }
102- className = "text-md flex justify-between text-black hover:bg-zinc-100 hover: text-black focus:bg-zinc-100 active:bg-zinc-100 "
119+ className = "text-deep-blue-dark hover:text-blue- hover flex text-base focus:bg-white "
103120 >
121+ { getIcon ( 'logout' ) }
104122 { t ( 'gcweb:app.logout' ) }
105- < FontAwesomeIcon icon = { faRightFromBracket } className = "my-auto size-8" />
106123 </ MenuItem >
107124 </ DropdownMenuContent >
108125 </ DropdownMenu >
109126 ) ;
110127}
111-
112- type UserNameProps = {
113- name ?: string ;
114- } ;
115-
116- function UserName ( { name } : UserNameProps ) : JSX . Element {
117- return (
118- < >
119- { name !== undefined && (
120- < DropdownMenuLabel className = "text-md flex items-center border-b-2 border-slate-600 px-3 py-2 text-gray-300 sm:hidden" >
121- < FontAwesomeIcon icon = { faUser } className = "mr-2 size-4" />
122- { name }
123- </ DropdownMenuLabel >
124- ) }
125- </ >
126- ) ;
127- }
0 commit comments