feat: add component dropdown menu

src/components/DropdownMenu/DropdownMenu.module.scss

@@ -0,0 +1,83 @@
+.dropdown {
+  position: absolute;
+  top: 58px;
+  width: 300px;
+  transform: translateX(-45%);
+  background-color: var(--bg);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  overflow: hidden;
+  transition: height var(--speed) ease;
+  z-index: 1;
+}
+
+.menu {
+  width: 100%;
+}
+
+.imgProfile {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+
+.menuItem {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  border-radius: var(--border-radius);
+  transition: background var(--speed);
+  padding: 0.5rem;
+}
+
+.menuItem .iconButton {
+  margin-right: 0.5rem;
+}
+
+.menuItem .iconButton:hover {
+  filter: none;
+}
+
+.menuItem:hover {
+  background-color: #525357;
+}
+
+.iconRight {
+  margin-left: auto;
+}
+
+/* CSSTransition classes  */
+.menu-primary-enter {
+  position: absolute;
+  transform: translateX(-110%);
+}
+.menu-primary-enter-active {
+  transform: translateX(0%);
+  transition: all var(--speed) ease;
+}
+.menu-primary-exit {
+  position: absolute;
+}
+.menu-primary-exit-active {
+  transform: translateX(-110%);
+  transition: all var(--speed) ease;
+}
+
+.menu-secondary-enter {
+  transform: translateX(110%);
+}
+.menu-secondary-enter-active {
+  transform: translateX(0%);
+  transition: all var(--speed) ease;
+}
+.menu-secondary-exit {
+}
+.menu-secondary-exit-active {
+  transform: translateX(110%);
+  transition: all var(--speed) ease;
+}

src/components/DropdownMenu/index.tsx

@@ -0,0 +1,38 @@
+import { CSSTransition } from 'react-transition-group';
+
+import { DropdownItem } from 'components/DropdownItem';
+
+import { useAuth } from 'hooks/useAuth';
+import { useDropdown } from 'hooks/useDropdown';
+
+import styles from './DropdownMenu.module.scss';
+
+export function DropdownMenu() {
+  const { user } = useAuth();
+  const { activeMenu, dropdownRef, calcHeight, menuHeight } = useDropdown();
+
+  return (
+    <div className={styles.dropdown} style={{ height: menuHeight }} ref={dropdownRef}>
+      <CSSTransition
+        in={activeMenu === 'main'}
+        timeout={500}
+        classNames="menu-primary"
+        unmountOnExit
+        onEnter={calcHeight}
+      >
+        <div className={styles.menu}>
+          <DropdownItem link="/profile">
+            <img
+              src={user?.user_metadata.avatar_url || user?.user_metadata.picture}
+              alt={user?.user_metadata.name}
+              className={styles.imgProfile}
+            />
+            Meu Perfil
+          </DropdownItem>
+
+          <DropdownItem logout>Sair</DropdownItem>
+        </div>
+      </CSSTransition>
+    </div>
+  );
+}