diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/navbar.tsx | 38 | ||||
| -rw-r--r-- | components/toast.tsx | 2 | ||||
| -rw-r--r-- | components/ui.tsx | 5 |
3 files changed, 28 insertions, 17 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index 7725ca8..9a3f9ff 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,4 +1,5 @@ -import { CSSProperties } from "react"; +import { CSSProperties, Component } from "react"; +/* import axios from "axios"; */ import { LogoDark } from "../components/logo"; @@ -8,6 +9,7 @@ import ExtensionIcon from '@material-ui/icons/Extension'; import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; import PersonIcon from '@material-ui/icons/Person'; +import {AccountAvatar} from "./account"; var NavBarItemStyle: CSSProperties = { margin: 12, @@ -15,9 +17,22 @@ var NavBarItemStyle: CSSProperties = { display: "block" } -export function NavBar() { - return ( - <div className="navbar" style={{ +export class NavBar extends Component { + state: { + loggedIn: boolean + } = { + loggedIn: false + } + + constructor(props: {}) { + super(props); + + if (typeof window === "undefined") return; // return if run on server + this.state.loggedIn = document.cookie.includes("token"); + } + + render () { + return <div className="navbar" style={{ width: 48, height: "100%", @@ -45,19 +60,16 @@ export function NavBar() { left: 0, backgroundColor: "var(--background)" }}> - <a href="/login" style={NavBarItemStyle}> - <div style={{ - width: 24, - height: 24, - /* background: "#888888", */ - borderRadius: 12 - }}> + <a href={this.state.loggedIn ? "/account" : "/login"} style={NavBarItemStyle}> + { + this.state.loggedIn ? + <AccountAvatar size={24} dummy round/> : <PersonIcon/> - </div> + } </a> <a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a> </div> </div> - ); + } } diff --git a/components/toast.tsx b/components/toast.tsx index 7f71855..03a6255 100644 --- a/components/toast.tsx +++ b/components/toast.tsx @@ -69,7 +69,7 @@ export class Toast extends Component<{ display: "inline-block", cursor: "pointer" }} onClick={this.close}> - <CloseIcon style={{ fontSize: 24 }}/> + <CloseIcon/> </div> </div> } diff --git a/components/ui.tsx b/components/ui.tsx index ef9d8f3..2523745 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -109,7 +109,6 @@ export function SearchBar(props: { label?: string }) { position: "relative" }}> <SearchIcon style={{ - fontSize: 24, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" @@ -134,8 +133,8 @@ export class CheckBox extends Component<{ }}> { this.state.on ? - <CheckBoxIcon style={{ fontSize: 24 }}/> : - <CheckBoxOutlineBlankIcon style={{ fontSize: 24 }}/> + <CheckBoxIcon/> : + <CheckBoxOutlineBlankIcon/> } </div>; } |