🐛 Fixed mobile admin nav bar reloading admin and its dark-mode active state (#28609)

no ref

Some tweaks to improve the mobile Admin experience, particularly in dark mode.

Author: 9larsons

apps/admin/src/layout/app-sidebar/mobile-nav-bar.tsx

@@ -13,16 +13,19 @@ interface MobileNavBarButtonProps extends Omit<React.ComponentProps<typeof Butto
 
 function MobileNavBarButton({ to, activeOnSubpath = false, children, ...props }: MobileNavBarButtonProps) {
     const isActive = useIsActiveLink({ path: to, activeOnSubpath });
+    // Use a hash route (e.g. "#/posts") so navigation stays client-side; a bare
+    // relative href like "posts" triggers a full page load and reloads all of admin.
+    const href = `#/${to?.replace(/^\/?#\//, '')}`;
 
     return (
         <Button
             asChild
-            className={`w-full max-w-16 min-w-9 rounded-full hover:bg-gray-200 ${isActive ? 'bg-gray-200' : 'bg-transparent'}`} {...props}
+            className={`w-full max-w-16 min-w-9 rounded-full hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'bg-transparent'}`} {...props}
             variant="ghost"
             size="icon"
             data-active={isActive}
         >
-            <a href={to}>
+            <a href={href}>
                 {children}
             </a>
         </Button>