diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-01-06 13:57:31 +0100 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-01-06 13:57:31 +0100 |
commit | 78b46754599b887f9b558635f7f1803da3f72692 (patch) | |
tree | 67d726a21293d2b97f14cd907d40411673db07a9 | |
parent | 90d55c83cb4a6e3cf76622b0b8a2a9aa13fd2ba0 (diff) |
cool
-rw-r--r-- | src/components/account.tsx | 2 | ||||
-rw-r--r-- | src/components/navbar.tsx | 49 | ||||
-rw-r--r-- | src/components/page.tsx | 8 |
3 files changed, 27 insertions, 32 deletions
diff --git a/src/components/account.tsx b/src/components/account.tsx index d643ceb..e6ec58f 100644 --- a/src/components/account.tsx +++ b/src/components/account.tsx @@ -10,7 +10,7 @@ export function AccountAvatar(props: AccountAvatarProps) { backgroundImage: props.image, backgroundSize: "cover", display: "inline-block" - }}></div>; + }}/>; } diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index d0245dc..2d38509 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,4 +1,4 @@ -import {CSSProperties} from "react"; +import { CSSProperties } from "react"; import { LogoDark } from "../components/logo"; @@ -8,46 +8,41 @@ import ExtensionIcon from '@material-ui/icons/Extension'; import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; - -var NavBarStyle: CSSProperties = { - width: 48, - height: "100%", - - lineHeight: 0, - - backgroundColor: "var(--background)", - display: "inline-block", - - position: "fixed", - top: 0, - left: 0, - - overflow: "hidden", - whiteSpace: "nowrap", -} - var NavBarItemStyle: CSSProperties = { margin: 12, marginBottom: 16, display: "block" } -var NavBarSettingsAreaStyle: CSSProperties = { - position: "absolute", - bottom: -4, - left: 0 -} - export function NavBar() { return ( - <div className="navbar" style={NavBarStyle}> + <div className="navbar" style={{ + width: 48, + height: "100%", + + lineHeight: 0, + + backgroundColor: "var(--background)", + display: "inline-block", + + position: "fixed", + top: 0, + left: 0, + + overflow: "hidden", + whiteSpace: "nowrap", + }}> <div style={NavBarItemStyle}><LogoDark/></div> <a href="/" style={NavBarItemStyle}><Home/></a> <a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a> <a href="/" style={NavBarItemStyle}><ExtensionIcon/></a> <a href="/" style={NavBarItemStyle}><SearchIcon/></a> - <div style={NavBarSettingsAreaStyle}> + <div style={{ + position: "absolute", + bottom: -4, + left: 0 + }}> <a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a> </div> </div> diff --git a/src/components/page.tsx b/src/components/page.tsx index b368eee..73981c2 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -10,10 +10,10 @@ export function CenteredPage (props: CenteredPageProps) { maxWidth: props.width, margin: "0 auto" }}> - <div className="CenteredPageInner" style={{ - margin: "0 6px", - lineHeight: 0 - }}> {props.children} </div> + <div className="CenteredPageInner" style={{ + margin: "0 6px", + lineHeight: 0 + }}>{props.children}</div> </div>; } |