From 8cc15063d3e7e2b762ece98fcf26166d1ead586d Mon Sep 17 00:00:00 2001
From: Samuel Couillard <43917914+scouillard@users.noreply.github.com>
Date: Mon, 6 Feb 2023 13:51:44 -0500
Subject: [PATCH] Improve User Dropdown (kept name) (#4766)
* Rework User Dropdown
* Remove bold on name
---
.../stylesheets/application.bootstrap.scss | 16 ++++++++++---
.../components/home/NavbarSignedIn.jsx | 24 +++++++++++++------
2 files changed, 30 insertions(+), 10 deletions(-)
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index a0716ddf..9a4dab5e 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -211,15 +211,25 @@ input.search-bar {
}
#nav-user-dropdown {
+ padding: 6px;
+ border-radius: $border-radius;
&:hover {
- color: $black !important;
+ color: var(--brand-color);
+ background-color: var(--brand-color-light);
}
&:active {
- background-color: transparent !important;
+ background-color: var(--brand-color-light) !important;
}
&:focus {
- background-color: transparent !important;
+ background-color: var(--brand-color-light) !important;
}
+ &::after {
+ display: none;
+ }
+}
+
+.dropdown-menu.show {
+ margin-top: 0px;
}
.dropdown {
diff --git a/app/javascript/components/home/NavbarSignedIn.jsx b/app/javascript/components/home/NavbarSignedIn.jsx
index 9b6d594f..98679cb7 100644
--- a/app/javascript/components/home/NavbarSignedIn.jsx
+++ b/app/javascript/components/home/NavbarSignedIn.jsx
@@ -1,11 +1,12 @@
import React from 'react';
import {
- Button, Nav, Navbar, NavDropdown,
+ Button, Nav, Navbar, NavDropdown, Stack,
} from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { IdentificationIcon, QuestionMarkCircleIcon, StarIcon } from '@heroicons/react/24/outline';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
import useDeleteSession from '../../hooks/mutations/sessions/useDeleteSession';
import Avatar from '../users/user/Avatar';
@@ -33,7 +34,7 @@ export default function NavbarSignedIn({ currentUser }) {
return (
<>
- {/* Mobile Navbar Toggle */}
+ {/* Mobile Navbar Toggle - Hidden on Desktop */}
<Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0">
<Avatar avatar={currentUser?.avatar} size="small" />
</Navbar.Toggle>
@@ -66,12 +67,21 @@ export default function NavbarSignedIn({ currentUser }) {
</Nav>
</Navbar.Collapse>
- {/* Hidden on Mobile */}
+ {/* Desktop User Dropdown - Hidden on Mobile */}
<div className="justify-content-end d-none d-sm-block">
- <div className="d-inline-block">
- <Avatar avatar={currentUser?.avatar} size="small" />
- </div>
- <NavDropdown title={currentUser?.name} id="nav-user-dropdown" className="d-inline-block" align="end">
+ <NavDropdown
+ title={(
+ <Stack direction="horizontal" gap={2}>
+ <Avatar avatar={currentUser?.avatar} size="small" />
+ <span className="text-brand ms-1">{currentUser?.name}</span>
+ <ChevronDownIcon className="hi-s text-muted" />
+ </Stack>
+ )}
+ id="nav-user-dropdown"
+ className="d-inline-block"
+ align="end"
+ >
+
<NavDropdown.Item as={Link} to="/profile">
<IdentificationIcon className="hi-s me-3" />
{ t('user.profile.profile') }
--
GitLab