UX: Auth: Logout button is inaccessible (#1016)

Author: Nilumilak

frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts

@@ -17,7 +17,4 @@ export const Text = styled.div`
   &:hover {
     color: ${({ theme }) => theme.user.hoverColor};
   }
-}
 `;
-
-export const LogoutLink = styled.a``;

frontend/src/components/NavBar/UserInfo/UserInfo.tsx

@@ -19,9 +19,7 @@ const UserInfo = () => {
         </S.Wrapper>
       }
     >
-      <DropdownItem href="logout">
-        <S.LogoutLink>Log out</S.LogoutLink>
-      </DropdownItem>
+      <DropdownItem href="/logout">Log out</DropdownItem>
     </Dropdown>
   ) : null;
 };

frontend/src/components/common/Dropdown/DropdownItem.tsx

@@ -15,12 +15,12 @@ const DropdownItem = React.forwardRef<unknown, DropdownItemProps>(
     const confirmation = useConfirm();
 
     const handleClick = (e: ClickEvent) => {
-      if (!onClick) return;
-
       // eslint-disable-next-line no-param-reassign
       e.stopPropagation = true;
       e.syntheticEvent.stopPropagation();
 
+      if (!onClick) return;
+
       if (confirm) {
         confirmation(confirm, onClick);
       } else {