Add mobile menu and display video categories and tags

Integrates a mobile-friendly menu with search functionality and displays video categories and tags fetched from Bunny.net metadata, enhancing content discoverability and user experience on all devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/wsHCZ4W

client/src/pages/VideoPage.tsx

@@ -31,7 +31,7 @@ const formatDate = (date: Date | string): string => {
   });
 };
 import { Button } from "@/components/ui/button";
-import { Share2, X, Edit3 } from "lucide-react";
+import { Share2, X, Edit3, Menu } from "lucide-react";
 import { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -52,6 +52,7 @@ export default function VideoPage() {
   const [, params] = useRoute("/video/:id");
   const videoId = params?.id;
   const [showShareMenu, setShowShareMenu] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // Fetch current video
   const { data: currentVideo, isLoading: videoLoading } = useQuery<Video>({
@@ -157,8 +158,47 @@ export default function VideoPage() {
                 ← Back
               </Button>
             </div>
+
+            {/* Mobile Menu Button */}
+            <Button 
+              variant="ghost" 
+              className="md:hidden text-bunny-light" 
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              data-testid="button-mobile-menu-video"
+            >
+              {isMobileMenuOpen ? <X className="text-xl" /> : <Menu className="text-xl" />}
+            </Button>
           </div>
         </div>
+
+        {/* Mobile Menu */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              {/* Mobile Navigation */}
+              <nav className="flex flex-col space-y-4">
+                <a 
+                  href="/" 
+                  className="text-bunny-light hover:text-bunny-blue transition-colors py-2 border-b border-white/10"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  data-testid="link-mobile-home-video"
+                >
+                  Home
+                </a>
+                <button 
+                  onClick={() => {
+                    window.history.back();
+                    setIsMobileMenuOpen(false);
+                  }}
+                  className="text-left text-bunny-light hover:text-bunny-blue transition-colors py-2 border-b border-white/10"
+                  data-testid="button-mobile-back"
+                >
+                  ← Back to Previous Page
+                </button>
+              </nav>
+            </div>
+          </div>
+        )}
       </div>
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
@@ -311,8 +351,30 @@ export default function VideoPage() {
                 <span>{formatViews(currentVideo.views)} views</span>
                 <span>{formatDuration(currentVideo.duration)}</span>
                 <span>{formatDate(currentVideo.createdAt)}</span>
+                {currentVideo.category && (
+                  <span className="bg-bunny-blue/20 text-bunny-blue px-2 py-1 rounded-full">
+                    {currentVideo.category}
+                  </span>
+                )}
               </div>
 
+              {/* Tags Section */}
+              {currentVideo.tags && currentVideo.tags.length > 0 && (
+                <div className="mb-4">
+                  <h3 className="text-sm font-medium text-bunny-light mb-2">Tags</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {currentVideo.tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="bg-bunny-gray/50 text-bunny-light px-2 py-1 rounded text-xs hover:bg-bunny-gray transition-colors"
+                      >
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
 
 
               {currentVideo.description ? (