Improve Sidebar UX Structure and Behavior

[aktdenis]

The current sidebar can be a bit cluttered in its bottom section. This issue aims to enhance the structure, usability, and clarity of the sidebar, both in its expanded and collapsed states.

1. Reorganize Sidebar Items
   Move items like FAQs and Settings from the upper section to the bottom section.
   Dedicate the top section exclusively to deployment-related actions and core functionality.

2. Introduce Categories for Bottom Section
   Group the bottom items under structured categories:

• Follow Akash:
  GitHub, X (Twitter), Discord, YouTube.
• Resources:
  Akash website.
  Stats, Price Compare, API, Docs.
  FAQs (moved from the top).
  Optionally, add "Learning Materials" for links to deployment guides or tutorials from docs or YouTube.
• More Info:
  Mainnet information, Terms, Privacy, Contact, App Version.

Preview:

With this approach we still have some wiggle room in case we would like to add new links.

3. Improve Collapsed Sidebar:

• When the sidebar is collapsed, icons in the bottom section all look similar and can confuse users. Here's a version of a sibebar with distinctive icons

• When hovering over an individual icon, show a tooltip for just that item (rather than expanding the entire sidebar).
  Example:

Live example from Shadcn: https://ui.shadcn.com/blocks#sidebar-09

Menu side by side. Live version and suggested;

Question: Do we need to think of an item with functionality to switch between "deploy" and "provider"?

Let me know what you think and if further adjustments are needed.