Add navbar and footer

## Issue Details

1) Implement the suggestions provided in #1 and complete the navbar and footer components.
2) Make sure the components are responsive on both phone and mobile. You can use tailwind breakpoints to switch between flex-col and flex-row if necessary (FOLLOW A MOBILE FIRST APPROACH, flex-col and then lg:flex-row for larger screens).
3) The navbar, as discussed earlier, will need an animated menubar on the left with login/out, uploaded courses and my courses options, logo at the center, searchbar and an avatar component defaulting the the user's nickname stored in the database.
4) The footer can include the AcademyX logo, navigation options, contact us options and an aiep/acm pesuecc 2024 copyright.

Start by reading issue #1 for the earlier navbar and footer suggestions, then locate the existing navbar, footer, logo, searchbar, avatar, and menu components in the frontend. Use the stated mobile-first Tailwind layout requirements as the acceptance checklist, including the listed navigation options, nickname avatar, contact links, and copyright text.

由索引模型根據 Issue 內容生成。