Creating Login Dropdown

In this lesson, we're going to create the login dropdown

Creating login dropdown#

Now that we are able to store the user token inside redux store, let's show the users that they are logged in. We can create a dropdown menu where we can show the option to go to user dashboard and an option to log out. Inside components, let's create a UserMenu.tsx file. We will create a UserMenu function and export it. We can use antd here rather than building it from scratch. Let's use the return and use Dropdown from antd. We can give it a placement of bottomCenter. It takes a menu which can also be imported from antd. Let's create a new variable menu; inside, we can import Menu from antd and inside, we can use Menu.Item. The first one can be profile which will take us to the dashboard, so let's wrap it inside Link and to will be /profile. We don't have the Dashboard page yet so let's create it inside pages. We can call it Dashboard and it will just say Dashboard for now. We can now export it.


Let's register it inside App.tsx. We can copy one from top and replace path with profile and component with Dashboard which will be imported automatically.

Coming back to the user menu, let's create another menu item which will say signout. We will create the signout function in a moment, but for now, let's use this menu as an overlay, because this is required by the Dropdown component. Inside dropdown, we can create a div with classname, dropdown, which will say Menu. Let's write the dropdown style now inside navigation.scss file. We just need to make the cursor a pointer.




Start a new discussion. All notification go to the author.