Skip to content

Commit 36026f1

Browse files
BrunoQuaresmaBrunoQuaresma
committed
feat: Add user menu
1 parent 32759a8 commit 36026f1

File tree

4 files changed

+77
-3
lines changed

4 files changed

+77
-3
lines changed

‎site/src/AppRouter.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { NotFoundPage } from "./pages/404"
66
import { CliAuthenticationPage } from "./pages/cli-auth"
77
import { HealthzPage } from "./pages/healthz"
88
import { SignInPage } from "./pages/login"
9+
import { PreferencesPage } from "./pages/preferences"
910
import { ProjectsPage } from "./pages/projects"
1011
import { ProjectPage } from "./pages/projects/[organization]/[project]"
1112
import { CreateWorkspacePage } from "./pages/projects/[organization]/[project]/create"
@@ -67,6 +68,17 @@ export const AppRouter: React.FC = () => (
6768
/>
6869
</Route>
6970

71+
<Route path="preferences">
72+
<Route
73+
index
74+
element={
75+
<AuthAndNav>
76+
<PreferencesPage />
77+
</AuthAndNav>
78+
}
79+
/>
80+
</Route>
81+
7082
{/* Using path="*"" means "match anything", so this route
7183
acts like a catch-all for URLs that we don't have explicit
7284
routes for. */}

‎site/src/components/Icons/DocsIcon.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
2+
import React from "react"
3+
4+
export const DocsIcon = (props: SvgIconProps): JSX.Element => (
5+
<SvgIcon {...props} viewBox="0 0 24 24">
6+
<path
7+
fillRule="evenodd"
8+
clipRule="evenodd"
9+
d="M6.53846 3.75C4.67698 3.75 2.86058 4.50721 2.86058 4.50721L2.5 4.66947V16.4423H9.00841C9.20898 16.7871 9.57407 17.0192 10 17.0192C10.4259 17.0192 10.791 16.7871 10.9916 16.4423H17.5V4.66947L17.1394 4.50721C17.1394 4.50721 15.323 3.75 13.4615 3.75C11.7781 3.75 10.2997 4.31566 10 4.4351C9.70027 4.31566 8.22191 3.75 6.53846 3.75ZM6.53846 4.90385C7.654 4.90385 8.84615 5.26442 9.42308 5.46274V14.7656C8.7808 14.5538 7.72611 14.2608 6.53846 14.2608C5.32602 14.2608 4.33894 14.5403 3.65385 14.7656V5.46274C4.09781 5.30273 5.26968 4.90385 6.53846 4.90385ZM13.4615 4.90385C14.7303 4.90385 15.9022 5.30273 16.3462 5.46274V14.7656C15.6611 14.5403 14.674 14.2608 13.4615 14.2608C12.2739 14.2608 11.2192 14.5538 10.5769 14.7656V5.46274C11.1538 5.26442 12.346 4.90385 13.4615 4.90385Z"
10+
fill="currentColor"
11+
/>
12+
</SvgIcon>
13+
)

‎site/src/components/Navbar/UserDropdown.tsx

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import ListItemIcon from "@material-ui/core/ListItemIcon"
44
import ListItemText from "@material-ui/core/ListItemText"
55
import MenuItem from "@material-ui/core/MenuItem"
66
import { fade, makeStyles } from "@material-ui/core/styles"
7-
import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
8-
import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
7+
import AccountIcon from "@material-ui/icons/AccountCircleOutlined"
98
import React, { useState } from "react"
9+
import { Link } from "react-router-dom"
1010
import { UserResponse } from "../../api/types"
1111
import { LogoutIcon } from "../Icons"
12+
import { DocsIcon } from "../Icons/DocsIcon"
1213
import { UserAvatar } from "../User"
1314
import { UserProfileCard } from "../User/UserProfileCard"
1415
import { BorderedMenu } from "./BorderedMenu"
@@ -65,7 +66,25 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
6566
<div className={styles.userInfo}>
6667
<UserProfileCard user={user} />
6768

68-
<Divider className={styles.divider} />
69+
<Divider />
70+
71+
<Link to="/preferences">
72+
<MenuItem className={styles.menuItem} onClick={handleDropdownClick}>
73+
<ListItemIcon className={styles.icon}>
74+
<AccountIcon />
75+
</ListItemIcon>
76+
<ListItemText primary="Account" />
77+
</MenuItem>
78+
</Link>
79+
80+
<a href="https://coder.com/docs" target="_blank" rel="noreferrer">
81+
<MenuItem className={styles.menuItem} onClick={handleDropdownClick}>
82+
<ListItemIcon className={styles.icon}>
83+
<DocsIcon />
84+
</ListItemIcon>
85+
<ListItemText primary="Documentation" />
86+
</MenuItem>
87+
</a>
6988

7089
<MenuItem className={styles.menuItem} onClick={onSignOut}>
7190
<ListItemIcon className={styles.icon}>
@@ -84,6 +103,7 @@ export const useStyles = makeStyles((theme) => ({
84103
marginTop: theme.spacing(1),
85104
marginBottom: theme.spacing(1),
86105
},
106+
87107
inner: {
88108
display: "flex",
89109
alignItems: "center",
@@ -93,6 +113,11 @@ export const useStyles = makeStyles((theme) => ({
93113

94114
userInfo: {
95115
marginBottom: theme.spacing(1),
116+
117+
"& a": {
118+
textDecoration: "none",
119+
color: "inherit",
120+
},
96121
},
97122
arrowIcon: {
98123
color: fade(theme.palette.primary.contrastText, 0.7),

‎site/src/pages/preferences/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Paper from "@material-ui/core/Paper"
2+
import { makeStyles } from "@material-ui/core/styles"
3+
import React from "react"
4+
import { Header } from "../../components/Header"
5+
import { Footer } from "../../components/Page"
6+
7+
export const PreferencesPage: React.FC = () => {
8+
const styles = useStyles()
9+
10+
return (
11+
<div className={styles.root}>
12+
<Header title="Preferences" />
13+
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>Preferences here!</Paper>
14+
<Footer />
15+
</div>
16+
)
17+
}
18+
19+
const useStyles = makeStyles(() => ({
20+
root: {
21+
display: "flex",
22+
flexDirection: "column",
23+
},
24+
}))

0 commit comments

Comments
 (0)