Project: nextjs
Task (challenging): 1) Add a component in components/HeaderUserMenu.tsx: if not logged in, display a button (.header-go-login) that navigates to /login; if logged in, display the username (.header-username) on the right side of the site header. 2) If user is logged in, when the .header-username is hovered, show a dropdown menu with: a button (.header-logout-btn) for logging out, and a button (.header-go-user-profile) for navigating to the current user's profile page. 3) Create CSS file to beautify CSS. DO NOT use a third-party UI library.