p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(Header): Make dropdown to pop up correctly on small screens

This commit is contained in:
haitao(lj) 2022-12-16 10:06:39 +08:00
parent 69b1b14552
commit 776b2235d3
2 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/components/Header/components/NavItems/index.tsx
View File

@ -16,23 +16,25 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
const { t } = useTranslation();
return (
<>
<Nav.Link
as={NavLink}
to="/users/notifications/inbox"
className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
<Icon name="bell-fill" className="fs-4" />
{(redDot?.inbox || 0) > 0 && <div className="unread-dot bg-danger" />}
</Nav.Link>
<Nav className="flex-row">
<Nav.Link
as={NavLink}
to="/users/notifications/inbox"
className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
<Icon name="bell-fill" className="fs-4" />
{(redDot?.inbox || 0) > 0 && <div className="unread-dot bg-danger" />}
</Nav.Link>
<Nav.Link
as={Link}
to="/users/notifications/achievement"
className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
<Icon name="trophy-fill" className="fs-4" />
{(redDot?.achievement || 0) > 0 && (
<div className="unread-dot bg-danger" />
)}
</Nav.Link>
<Nav.Link
as={Link}
to="/users/notifications/achievement"
className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
<Icon name="trophy-fill" className="fs-4" />
{(redDot?.achievement || 0) > 0 && (
<div className="unread-dot bg-danger" />
)}
</Nav.Link>
</Nav>
<Dropdown align="end">
<Dropdown.Toggle

8
ui/src/components/Header/index.tsx
View File

@ -118,13 +118,7 @@ const Header: FC = () => {
{/* mobile nav */}
<div className="d-flex lg-none align-items-center flex-lg-nowrap">
{user?.username ? (
<Nav className="flex-row">
<NavItems
redDot={redDot}
userInfo={user}
logOut={handleLogout}
/>
</Nav>
<NavItems redDot={redDot} userInfo={user} logOut={handleLogout} />
) : (
<>
<Button variant="link" className="me-2" href="/users/login">