Fixed animations on menu list items

[iamjamesfrancis]

What does the PR do?

Fixes #58

Changes

• Removed scaling while hovering over the list items. Instead of that added a background colour.
• Added some padding and border-radius to list items.
• Removed .sidebar-text-wrapper from the anchor tag of sidebar list items because it is creating a weird hover.
• Removed .mx-2 from the <font-awesome-icon> tags and replaced the spacing using .gap-2
• Removed .nav-link from the <a> in frontend/src/components/Navbar.vue because its display: block is affecting the property display: flex.
• Created a reusable class .flex and .items-center in frontend/src/style.css.
• Also added some changes to the list of items.

Screenshots

Mobile View

https://user-images.githubusercontent.com/55175085/235984310-436af8aa-f680-4bfe-897b-a540b8dfb4f6.mp4

Desktop View

https://user-images.githubusercontent.com/55175085/235984570-e73b10a9-24ca-41d0-9eff-1cc4de6793ce.mp4

[iamjamesfrancis]

Also, I accidentally fixed a UI issue while doing this issue. The UI issue was we needed to click the icon or text to navigate. Now we can click the entire area😍.

Before

https://user-images.githubusercontent.com/55175085/236005434-0856dc9e-43fd-44b2-a76f-e49fcb2693cd.mp4

Now

https://user-images.githubusercontent.com/55175085/236005447-b0c82c4d-4d54-444f-8c7e-88e77c35decf.mp4

[FlavioAdamo]

Pull request accepted! Super good job!!