open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up some markup in the sidebar (#220)

Browse Source 
* Remove wrapper div around logo

* Small refactor, remove wrapper around sidebar profile summary

* Remove random unused imports

* Replace random styles with Tailwind classes
This commit is contained in:
Marshall Polaris 2022-05-13 18:07:44 -07:00 committed by GitHub
parent 33c0471c29
commit bc5cd5be45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/components/nav/profile-menu.tsx
View File

@ -1,8 +1,8 @@
import Link from 'next/link'
import { firebaseLogout, User } from 'web/lib/firebase/users' import { firebaseLogout, User } from 'web/lib/firebase/users'
import { formatMoney } from 'common/util/format' import { formatMoney } from 'common/util/format'
import { Avatar } from '../avatar' import { Avatar } from '../avatar'
import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants' import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
import { Row } from '../layout/row'
export function getNavigationOptions(user?: User | null) { export function getNavigationOptions(user?: User | null) {
if (IS_PRIVATE_MANIFOLD) { if (IS_PRIVATE_MANIFOLD) {
@ -27,18 +27,18 @@ export function getNavigationOptions(user?: User | null) {
] ]
} }
export function ProfileSummary(props: { user: User | undefined }) { export function ProfileSummary(props: { user: User }) {
const { user } = props const { user } = props
return ( return (
<Row className="group items-center gap-4 rounded-md py-3 text-gray-500 group-hover:bg-gray-100 group-hover:text-gray-700"> <Link href={`/${user.username}`}>
<Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink /> <a className="group flex flex-row items-center gap-4 rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
<Avatar avatarUrl={user.avatarUrl} username={user.username} noLink />
<div className="truncate text-left"> <div className="truncate">
<div>{user?.name}</div> <div>{user.name}</div>
<div className="text-sm"> <div className="text-sm">{formatMoney(Math.floor(user.balance))}</div>
{user ? formatMoney(Math.floor(user.balance)) : ' '}
</div> </div>
</div> </a>
</Row> </Link>
) )
} }

18
web/components/nav/sidebar.tsx
View File

@ -1,9 +1,7 @@
import { import {
HomeIcon, HomeIcon,
UserGroupIcon,
CakeIcon, CakeIcon,
SearchIcon, SearchIcon,
ChatIcon,
BookOpenIcon, BookOpenIcon,
DotsHorizontalIcon, DotsHorizontalIcon,
CashIcon, CashIcon,
@ -126,26 +124,14 @@ export default function Sidebar(props: { className?: string }) {
return ( return (
<nav aria-label="Sidebar" className={className}> <nav aria-label="Sidebar" className={className}>
<div className="space-y-1 pb-6"> <ManifoldLogo className="pb-6" twoLine />
<ManifoldLogo twoLine />
</div>
<div className="mb-2" style={{ minHeight: 80 }}> <div className="mb-2" style={{ minHeight: 80 }}>
{user ? ( {user ? (
<Link href={`/${user.username}`}>
<a className="group">
<ProfileSummary user={user} /> <ProfileSummary user={user} />
</a>
</Link>
) : user === null ? ( ) : user === null ? (
<div className="py-6 text-center"> <div className="py-6 text-center">
<button <button
className="btn btn-sm px-6 font-medium normal-case " className="btn btn-sm border-2 bg-white px-6 font-medium normal-case text-gray-700"
style={{
backgroundColor: 'white',
border: '2px solid',
color: '#3D4451',
}}
onClick={firebaseLogin} onClick={firebaseLogin}
> >
Sign in Sign in