Feature/pinned articles

[owlinstack]

Feat & Style: Pinned Articles UI, Mobile Header Animations & Responsive Fixes

Description

This Pull Request integrates the new "pinned articles" backend feature into the frontend UI, applies responsive improvements to the mobile layout (profile, code viewer, project details), and adds smooth animations to the mobile navigation menu.

Key Changes

• Pinned Articles Component:
  • Implemented a clean, vertical list layout for pinned articles on the homepage, styled with discrete borders.
  • Added a user toggle on mobile to easily switch between the classic card grid and a compact horizontal carousel layout.
• Responsive Mobile Layouts:
  • Profile Page: Centered the avatar image and user's full name on mobile screens while preserving the standard inline alignment for larger screens.
  • Code Viewer: Configured lines in HighlightedCode to automatically wrap (white-space: pre-wrap) on mobile devices to prevent layout overflowing.
  • Project Detail Page: Adapted the layout structures of file lists and project explorer blocks to scale cleanly on small viewports.
• Mobile Menu UX Improvements:
  • Refactored the mobile navigation drawer to slide down smoothly from the top header rather than entering from the left.
  • Transformed the hamburger button into a clean close cross (X) using dynamic CSS animations when the drawer is open.
  • Created a Minified (Compact) Menu Mode: Users can toggle this option from the menu. When active, it displays a space-saving navigation bar showing icons instead of labels, keeping the brand acronym LB visible.
  • Flash/Flicker Prevention: Eliminated the hydration flash when navigating between pages by lazy-initializing the layout state synchronously from localStorage within useState initializers rather than standard useEffect delays.