From 413e061e848d96920043707f1176617e28348756 Mon Sep 17 00:00:00 2001 From: Jona Date: Sun, 14 Apr 2024 16:38:06 -0300 Subject: [PATCH] test: base structure for UserMenu --- .../[locale]/components/Icons/ArrowDown.tsx | 13 +++ .../[locale]/components/Icons/ArrowRight.tsx | 13 +++ .../app/[locale]/components/Icons/MenuBar.tsx | 14 ++++ .../app/[locale]/components/Icons/index.tsx | 2 + .../app/[locale]/components/Navbar/index.tsx | 84 ++++++++++++++++++- .../app/[locale]/components/Navbar/style.tsx | 82 ++++++++++++++++++ 6 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 apps/web/app/[locale]/components/Icons/ArrowDown.tsx create mode 100644 apps/web/app/[locale]/components/Icons/ArrowRight.tsx create mode 100644 apps/web/app/[locale]/components/Icons/MenuBar.tsx diff --git a/apps/web/app/[locale]/components/Icons/ArrowDown.tsx b/apps/web/app/[locale]/components/Icons/ArrowDown.tsx new file mode 100644 index 0000000..944b751 --- /dev/null +++ b/apps/web/app/[locale]/components/Icons/ArrowDown.tsx @@ -0,0 +1,13 @@ +export function ArrowDown({ color = 'currentColor' }) { + return ( + + + + ); +} diff --git a/apps/web/app/[locale]/components/Icons/ArrowRight.tsx b/apps/web/app/[locale]/components/Icons/ArrowRight.tsx new file mode 100644 index 0000000..e0ba1bc --- /dev/null +++ b/apps/web/app/[locale]/components/Icons/ArrowRight.tsx @@ -0,0 +1,13 @@ +export function ArrowRight({ color = 'currentColor' }) { + return ( + + + + ); +} diff --git a/apps/web/app/[locale]/components/Icons/MenuBar.tsx b/apps/web/app/[locale]/components/Icons/MenuBar.tsx new file mode 100644 index 0000000..77af803 --- /dev/null +++ b/apps/web/app/[locale]/components/Icons/MenuBar.tsx @@ -0,0 +1,14 @@ +export function MenuBar({ color = 'currentColor' }) { + return ( + + + + + ); +} diff --git a/apps/web/app/[locale]/components/Icons/index.tsx b/apps/web/app/[locale]/components/Icons/index.tsx index 55479f2..fcfcf0a 100644 --- a/apps/web/app/[locale]/components/Icons/index.tsx +++ b/apps/web/app/[locale]/components/Icons/index.tsx @@ -9,5 +9,7 @@ export { Skull } from './Skull'; export { Sword } from './Sword'; export { Ticket } from './Ticket'; export { Twitter } from './Twitter'; +export { ArrowDown } from './ArrowDown'; +export { MenuBar } from './MenuBar'; // Custom export { Loader } from './Loader'; diff --git a/apps/web/app/[locale]/components/Navbar/index.tsx b/apps/web/app/[locale]/components/Navbar/index.tsx index 4378ff3..bd0d6d2 100644 --- a/apps/web/app/[locale]/components/Navbar/index.tsx +++ b/apps/web/app/[locale]/components/Navbar/index.tsx @@ -1,11 +1,27 @@ -import { Button, Container, Flex } from '@lawallet/ui'; +import { useState } from 'react'; +import { Button, Container, Flex, Icon, Text } from '@lawallet/ui'; import { useTranslations } from 'next-intl'; import { type ReactNode } from 'react'; import { Link } from '../../../../navigation'; +import { appTheme } from '../../../../config/exports'; + import LocaleSwitcher from '../LocaleSwitcher/LocaleSwitcher'; -import { NavbarStyle } from './style'; import { IsoAnimated } from '../IsoAnimated'; +import { AutoAvatar } from '../AutoAvatar'; +import { MenuBar } from '../Icons'; + +import { + NavbarStyle, + UserButton, + UserButtonMenu, + UserMenu, + UserMenuBody, + UserMenuFooter, + UserMenuHead, + UserMenuItem, +} from './style'; +import { ArrowRight } from '../Icons/ArrowRight'; interface NavbarProps { children?: ReactNode; @@ -15,6 +31,8 @@ interface NavbarProps { export function Navbar({ children, isoAnimated = true }: NavbarProps) { const t = useTranslations(); + const [showMenu, setShowMenu] = useState(false); + return ( <> @@ -39,7 +57,67 @@ export function Navbar({ children, isoAnimated = true }: NavbarProps) { - + {/* */} + + + setShowMenu(!showMenu)}> + + + + + + setShowMenu(!showMenu)}> + + + Desconocido + + + + + + + {/* */} + + + Mi perfil + + Ver + + {/* */} + {/* */} + + + + Idioma + + + ES + + + + + + + + + + diff --git a/apps/web/app/[locale]/components/Navbar/style.tsx b/apps/web/app/[locale]/components/Navbar/style.tsx index 841802a..8677bdc 100644 --- a/apps/web/app/[locale]/components/Navbar/style.tsx +++ b/apps/web/app/[locale]/components/Navbar/style.tsx @@ -1,8 +1,90 @@ import { styled } from 'styled-components'; +import { appTheme } from '../../../../config/exports'; export const NavbarStyle = styled.nav` + position: relative; + z-index: 10; + display: flex; justify-content: center; align-items: center; height: 60px; `; + +export const UserButton = styled.button<{ $background: string }>` + position: relative; + z-index: 0; + + display: flex; + align-items: center; + gap: 4px; + min-height: 40px; + + padding: 4px 8px; + + background-color: ${(props) => props.$background}; + border: none; + border-radius: 100px; + + cursor: pointer; +`; + +interface UserMenuProps { + $show: boolean; +} + +export const UserMenu = styled.div` + position: absolute; + z-index: 1; + top: 0; + right: 0; + overflow: hidden; + + display: ${(props) => (props.$show ? 'flex' : 'none')}; + flex-direction: column; + gap: 4px; + width: 100%; + min-width: 300px; + + background-color: ${appTheme.colors.gray15}; + border-radius: 12px; + border: 1px solid ${appTheme.colors.gray20}; +`; + +export const UserButtonMenu = styled.div` + position: relative; +`; + +export const UserMenuHead = styled.button` + display: flex; + align-items: center; + min-height: 40px; + + padding: 0 16px; + + border-radius: 12px 12px 0 0; + border: none; + background-color: transparent; +`; + +export const UserMenuBody = styled.div``; +export const UserMenuItem = styled.div``; +export const UserMenuFooter = styled.div` + border-top: 1px solid ${appTheme.colors.gray20}; + + button, + a { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 50px; + width: 100%; + + padding: 0 12px; + + background-color: transparent; + border: none; + + color: ${appTheme.colors.text}; + } +`;