diff --git a/packages/client/components/DashNavList/DashNavList.tsx b/packages/client/components/DashNavList/DashNavList.tsx index 2aad7be043e..cbf3e1498da 100644 --- a/packages/client/components/DashNavList/DashNavList.tsx +++ b/packages/client/components/DashNavList/DashNavList.tsx @@ -5,10 +5,13 @@ import {useFragment} from 'react-relay' import {PALETTE} from '~/styles/paletteV3' import {DashNavList_organization$key} from '../../__generated__/DashNavList_organization.graphql' import {TierEnum} from '../../__generated__/DowngradeToStarterMutation.graphql' +import useBreakpoint from '../../hooks/useBreakpoint' +import {Breakpoint} from '../../types/constEnums' import {upperFirst} from '../../utils/upperFirst' import LeftDashNavItem from '../Dashboard/LeftDashNavItem' import BaseTag from '../Tag/BaseTag' import DashNavListTeams from './DashNavListTeams' +import DashNavMenu from './DashNavMenu' const EmptyTeams = styled('div')({ fontSize: 16, @@ -32,20 +35,20 @@ const Tag = styled(BaseTag)<{tier: TierEnum | null}>(({tier}) => ({ })) interface Props { - className?: string organizationsRef: DashNavList_organization$key | null onClick?: () => void } const DashNavList = (props: Props) => { - const {className, onClick, organizationsRef} = props + const {onClick, organizationsRef} = props const organizations = useFragment( graphql` fragment DashNavList_organization on Organization @relay(plural: true) { + ...DashNavListTeams_organization + ...DashNavMenu_organization id name tier - ...DashNavListTeams_organization viewerTeams { id } @@ -53,6 +56,7 @@ const DashNavList = (props: Props) => { `, organizationsRef ) + const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT) const teams = organizations?.flatMap((org) => org.viewerTeams) if (teams?.length === 0) { @@ -84,6 +88,20 @@ const DashNavList = (props: Props) => { label={'Settings & Members'} /> + + {isDesktop ? ( + + ) : ( + + )} +
) diff --git a/packages/client/components/DashNavList/DashNavMenu.tsx b/packages/client/components/DashNavList/DashNavMenu.tsx new file mode 100644 index 00000000000..43fdb660221 --- /dev/null +++ b/packages/client/components/DashNavList/DashNavMenu.tsx @@ -0,0 +1,98 @@ +import styled from '@emotion/styled' +import graphql from 'babel-plugin-relay/macro' +import React from 'react' +import {useFragment} from 'react-relay' +import {useHistory} from 'react-router' +import {DashNavMenu_organization$key} from '../../__generated__/DashNavMenu_organization.graphql' +import {PALETTE} from '../../styles/paletteV3' +import {Menu} from '../../ui/Menu/Menu' +import {MenuContent} from '../../ui/Menu/MenuContent' +import {MenuItem} from '../../ui/Menu/MenuItem' +import LeftDashNavItem from '../Dashboard/LeftDashNavItem' + +const StyledLeftDashNavItem = styled(LeftDashNavItem)<{isViewerOnTeam: boolean}>( + ({isViewerOnTeam}) => ({ + color: isViewerOnTeam ? PALETTE.SLATE_700 : PALETTE.SLATE_600, + borderRadius: 44, + paddingLeft: 15 + }) +) + +type Props = { + organizationRef: DashNavMenu_organization$key +} + +const DashNavMenu = (props: Props) => { + const {organizationRef} = props + const history = useHistory() + const org = useFragment( + graphql` + fragment DashNavMenu_organization on Organization { + id + tier + } + `, + organizationRef + ) + const {id: orgId, tier} = org + const menuItems = [ + { + label: ( + <> + Plans & Billing{' '} + {tier === 'starter' && ( + <> + • Upgrade + + )} + + ), + href: `/me/organizations/${orgId}/billing` + }, + { + label: 'Teams', + href: `/me/organizations/${orgId}/teams` + }, + { + label: 'Members', + href: `/me/organizations/${orgId}/members` + }, + { + label: 'Organization Settings', + href: `/me/organizations/${orgId}/settings` + }, + { + label: 'Authentication', + href: `/me/organizations/${orgId}/authentication` + } + ] + + const handleMenuItemClick = (href: string) => { + history.push(href) + } + + return ( + + + + } + > + + {menuItems.map((item) => ( + handleMenuItemClick(item.href)}> + {item.label} + + ))} + + + ) +} + +export default DashNavMenu diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 7d471eba77b..2d9a65c750a 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -4,6 +4,7 @@ import React, {useEffect, useState} from 'react' import {useLazyLoadQuery} from 'react-relay' import {MeetingOptionsQuery} from '../__generated__/MeetingOptionsQuery.graphql' import {Menu} from '../ui/Menu/Menu' +import {MenuContent} from '../ui/Menu/MenuContent' import {MenuItem} from '../ui/Menu/MenuItem' import {Tooltip} from '../ui/Tooltip/Tooltip' import {TooltipContent} from '../ui/Tooltip/TooltipContent' @@ -92,17 +93,19 @@ const MeetingOptions = (props: Props) => { } > - -
- - -
{}
- Change template -
-
-
- {tooltipCopy} -
+ + +
+ + +
{}
+ Change template +
+
+
+ {tooltipCopy} +
+
) } diff --git a/packages/client/components/NewMeetingActionsCurrentMeetings.tsx b/packages/client/components/NewMeetingActionsCurrentMeetings.tsx index 63272a48dfd..6658f3c3b4b 100644 --- a/packages/client/components/NewMeetingActionsCurrentMeetings.tsx +++ b/packages/client/components/NewMeetingActionsCurrentMeetings.tsx @@ -8,6 +8,7 @@ import useSnacksForNewMeetings from '~/hooks/useSnacksForNewMeetings' import {PALETTE} from '~/styles/paletteV3' import plural from '~/utils/plural' import {Menu} from '../ui/Menu/Menu' +import {MenuContent} from '../ui/Menu/MenuContent' import FlatButton from './FlatButton' import SelectMeetingDropdown from './SelectMeetingDropdown' @@ -56,7 +57,9 @@ const NewMeetingActionsCurrentMeetings = (props: Props) => { } > - + + + ) } diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx index 9dc63da80d0..3a9cd3135b6 100644 --- a/packages/client/ui/Menu/Menu.tsx +++ b/packages/client/ui/Menu/Menu.tsx @@ -1,31 +1,16 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import React from 'react' -import {twMerge} from 'tailwind-merge' interface MenuProps extends DropdownMenu.DropdownMenuProps { className?: string trigger: React.ReactNode } -export const Menu = React.forwardRef( - ({trigger, className, children, ...props}, ref) => { - return ( - - {trigger} - - - {children} - - - - ) - } -) +export const Menu: React.FC = ({trigger, className, children, ...props}) => { + return ( + + {trigger} + {children} + + ) +} diff --git a/packages/client/ui/Menu/MenuContent.tsx b/packages/client/ui/Menu/MenuContent.tsx new file mode 100644 index 00000000000..c4fc631b94b --- /dev/null +++ b/packages/client/ui/Menu/MenuContent.tsx @@ -0,0 +1,25 @@ +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import React from 'react' +import {twMerge} from 'tailwind-merge' + +interface MenuContentProps extends DropdownMenu.MenuContentProps { + className?: string + children: React.ReactNode +} + +export const MenuContent = React.forwardRef( + ({className, children, ...props}, ref) => { + return ( + + {children} + + ) + } +)