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 (
+
+ )
+}
+
+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) => {
}
>
-
-
-
-
-
-
- {tooltipCopy}
-
+
+
+
+
+
+
+
+ {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}
+
+ )
+ }
+)