Frontend - Restyle Navbar and optimize code

[minhngo3818]

In order to match with the new demo, the current navbar must be restyled. Reworking the navbar will affect significantly its current responsive behavior. Styling stats are defined in on the right sidebar

View component in Figma

Notes about the current codebase: mobile mode and desktop mode are combined under the same DOM. To keep things more readable and maintainable, mobile and desktop modes (normal) should be separate as described below:

const MobileComponent = <>...<>
const DesktopComponent = <>...<>

return (
   ------ sniplet -----

   {isMobile ?? <MobileComponent>}
   {not isMobile ?? <DesktopComponent>}

   ------ sniplet -----
)

Basic features:

• have a dropdown menu when hovering over a home, and resources. pages
• click to name will redirect the user to the page with the name.
• responsive ( change in style when resizing screen width)
• when the screen width is less than 640px (or sm in tailwind), all navbar buttons convert to a menu button which displays a menu of the nav links on the right side. ( you can see it with the current front)

Directory: ~/client/src/components/navbar

Styling details: Since styles for this components involves child components, the description will be quite generic

• navbar container has flex display and keeps child components in the center vertically, height is 72px, width is full (100%), add some left and right padding
• navbar-brand always sticks to the left, height depends on parent heights, consists of club logo and brand (see the style in figma demo)
• navbar nav-links: always stick to the right has hover with an orange border, and shows a dropdown menu on hover.

Demo:

White frame: