Profile Page: Design

[Helen-HYF]

• Create a new branch called 'Profilepage' .
• Update the Navbar to include navigation to the chats, About Us, and Learn More pages.
• The app logo should be displayed on the top-left corner of the Navbar, while the user's username and avatar, settings, and notifications icons should be displayed on the top-right corner of the Navbar.
• Design a layout that displays the user's profile avatar to the left of the profile information section, which includes the user's name, bio, phone number, and email.
• Implement functionality to edit the user's bio, phone number, and email when the user clicks the respective icon buttons. The edited information should be submitted when the input field loses focus.
• Style the main content area of the Profile page to resemble the layout and aesthetics of the Slack user interface. This includes dividing the page into two sections: the main content (right side) and the side menu (left side).
• On the left side of the screen, add a lock/profile button that toggles the display of the Change Password form.
• Optimize the aesthetics of the page by adding proper positioning, spacing, and colors. Use a dark blue background color for the main content, light blue for the main content card, and a transparent background for the side menu.
• Once these updates are made, the Profile page should provide a user-friendly and visually appealing interface for users to view and edit their profile information.