Make dropdown nav horizontal with larger icons

- Changed dropdown menu from vertical (w-24, max-h-96) to horizontal flex layout
- Removed section dividers (space-y-1, mb-3) for compact horizontal arrangement
- Changed container to flex flex-wrap with gap-1 and max-w-xs
- Increased icon size from 18 to 36 for better visibility
- Reduced button padding from p-2 to p-1 to keep horizontal fit tight
- All buttons now fit horizontally on one or two lines

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: alittler

src/components/Layout/Sidebar.tsx

@@ -221,10 +221,10 @@ export const Sidebar: React.FC<SidebarProps> = ({
                   >
                     <Layout size={20} />
                   </button>
-                  {isMenuOpen && (
-                    <div className="absolute left-full top-0 ml-2 bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl z-50 w-24 max-h-96 overflow-y-auto p-2 custom-scrollbar">
+                                  {isMenuOpen && (
+                    <div className="absolute left-full top-0 ml-2 bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl z-50 flex flex-wrap gap-1 p-2 custom-scrollbar max-w-xs">
                       {sections.map((section) => (
-                        <div key={section.title} className="space-y-1 mb-3 last:mb-0">
+                        <div key={section.title} className="flex gap-1">
                           {section.items.map(item => {
                             const isActive = currentView === item.id;
                             const isDisabled = item.projectOnly && !hasActiveProject;
@@ -234,15 +234,15 @@ export const Sidebar: React.FC<SidebarProps> = ({
                                 title={item.label}
                                 onClick={() => handleNavItemClick(item)}
                                 disabled={isDisabled}
-                                className={`w-full flex items-center justify-center p-2 rounded-xl transition-all group ${
+                                className={`flex items-center justify-center p-1 rounded-xl transition-all group ${
                                   isActive ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/20' : ''
                                 } ${
                                   !isActive && !isDisabled ? 'hover:bg-slate-800 hover:text-slate-200' : ''
                                 } ${
                                   isDisabled ? 'opacity-40 cursor-not-allowed grayscale' : ''
                                 }`}
                               >
-                                <item.icon size={18} className={`${isActive ? 'text-white' : 'text-slate-500 group-hover:text-amber-500'} transition-colors`} />
+                                <item.icon size={36} className={`${isActive ? 'text-white' : 'text-slate-500 group-hover:text-amber-500'} transition-colors`} />
                               </button>
                             );
                           })}