Skip to content

Commit

Permalink
feat(menu): add mobnile menu with current options
Browse files Browse the repository at this point in the history
  • Loading branch information
@anteqkois
anteqkois committed May 26, 2024
1 parent 533a1c9 commit cf7fbb9
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 58 deletions.
6 changes: 0 additions & 6 deletions apps/web/app/app/components/DesktopMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,6 @@ export function DesktopMenu({ children }: DesktopProps) {
</MenubarShortcut>
</MenubarItem>
</Link>
{/* <MenubarItem>
Edit Flow
<MenubarShortcut>
<Icons.Update />
</MenubarShortcut>
</MenubarItem> */}
<Link href="/app/flows" prefetch={false}>
<MenubarItem>All Flows</MenubarItem>
</Link>
Expand Down
64 changes: 29 additions & 35 deletions apps/web/app/app/components/MobileMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,57 @@ import {
DropdownMenuTrigger,
} from '@linkerry/ui-components/client'
import { Button, Icons } from '@linkerry/ui-components/server'
import Link from 'next/link'

interface MobileProps {
children?: React.ReactNode
}

export function MobileMenu({ children }: MobileProps) {
return (
// <div className="sm:hidden fixed top-1 left-1">
<div className="sm:hidden">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Icons.HamburgerMenu className="h-[1.2rem] w-[1.2rem]" />
<Button variant="outline" size="icon" className="h-9 w-9">
<Icons.HamburgerMenu className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 max-h-[calc(100vh-60px)] overflow-y-scroll" align="start">
<DropdownMenuGroup>
<DropdownMenuLabel>
<div className="flex items-center gap-1 text-primary">
<Icons.Strategy />
Strategies
</div>
<div className="font-medium">Flows</div>
</DropdownMenuLabel>
<DropdownMenuItem>Create New</DropdownMenuItem>
<DropdownMenuItem>Edit Strategy</DropdownMenuItem>
<DropdownMenuItem>All Strategies</DropdownMenuItem>
<DropdownMenuItem>Analysis</DropdownMenuItem>
<DropdownMenuItem disabled>Create First Strategy</DropdownMenuItem>
<DropdownMenuSeparator />
<Link href="/app/flows/editor" prefetch={false}>
<DropdownMenuItem className="flex justify-between items-center">
Create New
<Icons.Plus />
</DropdownMenuItem>
</Link>
<Link href="/app/flows" prefetch={false}>
<DropdownMenuItem>All Flows</DropdownMenuItem>
</Link>
{/* // TODO create YT video and place link here */}
<DropdownMenuItem className="flex justify-between items-center" disabled>
Create First Flow
<Icons.Article />
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuLabel>
<div className="flex items-center gap-1 text-primary">
<Icons.Condition />
Conditions
</div>
<div className="font-medium">Connectors</div>
</DropdownMenuLabel>
<DropdownMenuItem>Create New</DropdownMenuItem>
<DropdownMenuItem>Edit Condition</DropdownMenuItem>
<DropdownMenuItem>All Conditions</DropdownMenuItem>
<DropdownMenuLabel>Condition Types</DropdownMenuLabel>
<DropdownMenuItem>Alerts</DropdownMenuItem>
<DropdownMenuItem disabled>Inicators</DropdownMenuItem>
<DropdownMenuItem disabled>Create First Condition</DropdownMenuItem>
<DropdownMenuSeparator />
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuLabel>
<div className="flex items-center gap-1 text-primary">
<Icons.Exchange />
Exchanges
</div>
</DropdownMenuLabel>
<DropdownMenuItem>Add API Keys</DropdownMenuItem>
<DropdownMenuItem>My API Keys</DropdownMenuItem>
<DropdownMenuItem>Avaible Exchanges</DropdownMenuItem>
<DropdownMenuItem disabled>Security</DropdownMenuItem>
<Link href="/app/connectors" prefetch={false}>
<DropdownMenuItem>All Connectors</DropdownMenuItem>
</Link>
<Link href="/app/connectors/connections" prefetch={false}>
<DropdownMenuItem>Connected Apps</DropdownMenuItem>
</Link>
<DropdownMenuItem className="flex justify-between items-center" disabled>
Security
<Icons.Article />
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/app/components/MyAccountMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ interface MyAccountMenuProps {

export function MyAccountMenu({ children }: MyAccountMenuProps) {
const { user } = useUser()
const { open, toggleVisibility, liveChatRef, hidden } = useLiveChat()
const { open, toggleVisibility, hidden } = useLiveChat()

return (
<DropdownMenu>
Expand All @@ -39,7 +39,7 @@ export function MyAccountMenu({ children }: MyAccountMenuProps) {
<Icons.Home className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end">
<DropdownMenuContent className="w-56" align="start">
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">My Account</p>
Expand Down
43 changes: 28 additions & 15 deletions libs/ui-components/src/components/theme/toggle-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,38 @@ import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
import { useTheme } from 'next-themes'

import { Button } from '../ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu'

export function ModeToggle() {
const { setTheme } = useTheme()

// const setNewTheme = useCallback(() => {
// setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'))
// }, [])

return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button variant="outline" size="icon" className="h-9 w-9">
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" onClick={() => setTheme('dark')} />
<MoonIcon
className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
onClick={() => setTheme('light')}
/>
<span className="sr-only">Toggle theme</span>
</Button>
)
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button variant="outline" size="icon" className="h-9 w-9">
// <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
// <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
// <span className="sr-only">Toggle theme</span>
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent align="end">
// <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
// <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
// <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
// </DropdownMenuContent>
// </DropdownMenu>
// )
}

0 comments on commit cf7fbb9

Please sign in to comment.