rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add settings button on menu

Browse source
This commit is contained in:
swve 2023-04-13 22:57:08 +02:00
parent 8d5f61102b
commit f3aee68a99
1 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
front/components/Security/HeaderProfileBox.tsx
View file

@ -3,6 +3,7 @@ import styled from "styled-components";
import Link from "next/link"; import Link from "next/link";
import { AuthContext } from "./AuthProvider"; import { AuthContext } from "./AuthProvider";
import Avvvatars from "avvvatars-react"; import Avvvatars from "avvvatars-react";
import { GearIcon } from "@radix-ui/react-icons";
export const HeaderProfileBox = () => { export const HeaderProfileBox = () => {
const auth: any = React.useContext(AuthContext); const auth: any = React.useContext(AuthContext);
@ -31,6 +32,7 @@ export const HeaderProfileBox = () => {
<div> <div>
<Avvvatars value={auth.userInfo.user_object.user_id} style="shape" /> <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
</div> </div>
<Link href={"/settings"}><GearIcon/></Link>
</AccountArea> </AccountArea>
)} )}
</ProfileArea> </ProfileArea>
@ -42,6 +44,23 @@ const AccountArea = styled.div`
display: flex; display: flex;
place-items: center; place-items: center;
a{
// center the gear icon
display: flex;
place-items: center;
place-content: center;
width: 29px;
height: 29px;
border-radius: 19px;
background: #F5F5F5;
// hover effect
&:hover{
background: #E5E5E5;
}
}
div { div {
margin-right: 10px; margin-right: 10px;
} }