Skip to content
Snippets Groups Projects
Unverified Commit 8cc15063 authored by Samuel Couillard's avatar Samuel Couillard Committed by GitHub
Browse files

Improve User Dropdown (kept name) (#4766)

* Rework User Dropdown

* Remove bold on name
parent d2dd3aae
Branches main
No related tags found
No related merge requests found
...@@ -211,17 +211,27 @@ input.search-bar { ...@@ -211,17 +211,27 @@ input.search-bar {
} }
#nav-user-dropdown { #nav-user-dropdown {
padding: 6px;
border-radius: $border-radius;
&:hover { &:hover {
color: $black !important; color: var(--brand-color);
background-color: var(--brand-color-light);
} }
&:active { &:active {
background-color: transparent !important; background-color: var(--brand-color-light) !important;
} }
&:focus { &:focus {
background-color: transparent !important; background-color: var(--brand-color-light) !important;
}
&::after {
display: none;
} }
} }
.dropdown-menu.show {
margin-top: 0px;
}
.dropdown { .dropdown {
a { a {
color: $black !important; color: $black !important;
......
import React from 'react'; import React from 'react';
import { import {
Button, Nav, Navbar, NavDropdown, Button, Nav, Navbar, NavDropdown, Stack,
} from 'react-bootstrap'; } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { IdentificationIcon, QuestionMarkCircleIcon, StarIcon } from '@heroicons/react/24/outline'; import { IdentificationIcon, QuestionMarkCircleIcon, StarIcon } from '@heroicons/react/24/outline';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ChevronDownIcon } from '@heroicons/react/20/solid';
import useDeleteSession from '../../hooks/mutations/sessions/useDeleteSession'; import useDeleteSession from '../../hooks/mutations/sessions/useDeleteSession';
import Avatar from '../users/user/Avatar'; import Avatar from '../users/user/Avatar';
...@@ -33,7 +34,7 @@ export default function NavbarSignedIn({ currentUser }) { ...@@ -33,7 +34,7 @@ export default function NavbarSignedIn({ currentUser }) {
return ( return (
<> <>
{/* Mobile Navbar Toggle */} {/* Mobile Navbar Toggle - Hidden on Desktop */}
<Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0"> <Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0">
<Avatar avatar={currentUser?.avatar} size="small" /> <Avatar avatar={currentUser?.avatar} size="small" />
</Navbar.Toggle> </Navbar.Toggle>
...@@ -66,12 +67,21 @@ export default function NavbarSignedIn({ currentUser }) { ...@@ -66,12 +67,21 @@ export default function NavbarSignedIn({ currentUser }) {
</Nav> </Nav>
</Navbar.Collapse> </Navbar.Collapse>
{/* Hidden on Mobile */} {/* Desktop User Dropdown - Hidden on Mobile */}
<div className="justify-content-end d-none d-sm-block"> <div className="justify-content-end d-none d-sm-block">
<div className="d-inline-block"> <NavDropdown
title={(
<Stack direction="horizontal" gap={2}>
<Avatar avatar={currentUser?.avatar} size="small" /> <Avatar avatar={currentUser?.avatar} size="small" />
</div> <span className="text-brand ms-1">{currentUser?.name}</span>
<NavDropdown title={currentUser?.name} id="nav-user-dropdown" className="d-inline-block" align="end"> <ChevronDownIcon className="hi-s text-muted" />
</Stack>
)}
id="nav-user-dropdown"
className="d-inline-block"
align="end"
>
<NavDropdown.Item as={Link} to="/profile"> <NavDropdown.Item as={Link} to="/profile">
<IdentificationIcon className="hi-s me-3" /> <IdentificationIcon className="hi-s me-3" />
{ t('user.profile.profile') } { t('user.profile.profile') }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment