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

Kill weird group rendering height hack

Browse Source
This commit is contained in:
Marshall Polaris 2022-08-16 13:38:39 -07:00
parent 62728e52b7
commit c28e741497
2 changed files with 4 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@ import { ManifoldLogo } from './manifold-logo'
import { MenuButton } from './menu' import { MenuButton } from './menu'
import { ProfileSummary } from './profile-menu' import { ProfileSummary } from './profile-menu'
import NotificationsIcon from 'web/components/notifications-icon' import NotificationsIcon from 'web/components/notifications-icon'
import React, { useMemo, useState } from 'react' import React, { useMemo } from 'react'
import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants' import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
import { CreateQuestionButton } from 'web/components/create-question-button' import { CreateQuestionButton } from 'web/components/create-question-button'
import { useMemberGroups } from 'web/hooks/use-group' import { useMemberGroups } from 'web/hooks/use-group'
@ -28,7 +28,6 @@ import { Group, GROUP_CHAT_SLUG } from 'common/group'
import { Spacer } from '../layout/spacer' import { Spacer } from '../layout/spacer'
import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications' import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
import { PrivateUser } from 'common/user' import { PrivateUser } from 'common/user'
import { useWindowSize } from 'web/hooks/use-window-size'
import { CHALLENGES_ENABLED } from 'common/challenge' import { CHALLENGES_ENABLED } from 'common/challenge'
import { buildArray } from 'common/util/array' import { buildArray } from 'common/util/array'
@ -278,7 +277,7 @@ export default function Sidebar(props: { className?: string }) {
</div> </div>
{/* Desktop navigation */} {/* Desktop navigation */}
<div className="hidden space-y-1 lg:block"> <div className="hidden gap-y-1 lg:flex lg:flex-1 lg:flex-col">
{navigationOptions.map((item) => ( {navigationOptions.map((item) => (
<SidebarItem key={item.href} item={item} currentPage={currentPage} /> <SidebarItem key={item.href} item={item} currentPage={currentPage} />
))} ))}
@ -315,10 +314,6 @@ function GroupsList(props: {
memberItems.length > 0 ? memberItems.length : undefined memberItems.length > 0 ? memberItems.length : undefined
) )
const { height } = useWindowSize()
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
const remainingHeight = (height ?? 0) - (containerRef?.offsetTop ?? 0)
const notifIsForThisItem = useMemo( const notifIsForThisItem = useMemo(
() => (itemHref: string) => () => (itemHref: string) =>
preferredNotifications.some( preferredNotifications.some(
@ -337,11 +332,7 @@ function GroupsList(props: {
currentPage={currentPage} currentPage={currentPage}
/> />
<div <div className="flex-1 space-y-0.5 overflow-auto">
className="flex-1 space-y-0.5 overflow-auto"
style={{ height: remainingHeight }}
ref={setContainerRef}
>
{memberItems.map((item) => ( {memberItems.map((item) => (
<a <a
href={ href={

2
web/components/page.tsx
View File

@ -26,7 +26,7 @@ export function Page(props: {
style={suspend ? visuallyHiddenStyle : undefined} style={suspend ? visuallyHiddenStyle : undefined}
> >
<Toaster /> <Toaster />
<Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" /> <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex lg:h-screen lg:flex-col" />
<main <main
className={clsx( className={clsx(
'lg:col-span-8 lg:pt-6', 'lg:col-span-8 lg:pt-6',