feat(app): add sliding sidebar navigation for mobile

- Homepage now shows "New Agent" form, agent list moves to sidebar
- Hamburger menu replaces back arrow on all screens
- Mobile: full-screen sidebar overlay with swipe-to-close gesture
- Desktop: fixed 320px sidebar, toggle via hamburger
- Smooth bezier-eased animations (220ms)
- Sidebar closes on agent select (mobile only)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2026-01-03 21:16:27 +07:00
co-authored by Claude Opus 4.5
parent 1f33dcb4c1
commit 020d244b26
9 changed files with 1556 additions and 1427 deletions
+30
View File
@@ -0,0 +1,30 @@
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
import AsyncStorage from "@react-native-async-storage/async-storage";
interface SidebarState {
isOpen: boolean;
toggle: () => void;
open: () => void;
close: () => void;
}
export const useSidebarStore = create<SidebarState>()(
persist(
(set) => ({
isOpen: false,
toggle: () => set((state) => ({ isOpen: !state.isOpen })),
open: () => set({ isOpen: true }),
close: () => set({ isOpen: false }),
}),
{
name: "sidebar-state",
storage: createJSONStorage(() => AsyncStorage),
partialize: (state) => ({ isOpen: state.isOpen }),
}
)
);
export function useSidebar() {
return useSidebarStore();
}