feat(v2): add neko cat toggle for sidebar (NK-jyw7lb)

3 files changed, 16 insertions, 8 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 364ac69..3463f5d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -32,11 +32,11 @@ body {
   font-weight: bold;
 }
 
-.dashboard-header h1 {
+.dashboard-header .logo {
   margin: 0;
-  font-size: 1.2rem;
-  font-variant: small-caps;
-  text-transform: lowercase;
+  font-size: 2rem;
+  cursor: pointer;
+  line-height: 1;
 }
 
 .nav-link,
@@ -62,6 +62,7 @@ body {
   display: flex;
   flex: 1;
   overflow: hidden;
+  position: relative;
 }
 
 .dashboard-sidebar {
@@ -72,6 +73,11 @@ body {
   flex-direction: column;
   overflow-y: auto;
   padding: 1rem;
+  transition: margin-left 0.4s ease;
+}
+
+.dashboard-sidebar.hidden {
+  margin-left: -15rem;
 }
 
 .dashboard-main {
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index d0c31fd..303ac7e 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -31,7 +31,7 @@ describe('App', () => {
         render(<App />);
 
         await waitFor(() => {
-            expect(screen.getByText(/neko reader/i)).toBeInTheDocument();
+            expect(screen.getByText('🐱')).toBeInTheDocument();
         });
 
         // Test Logout
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2758472..7c6b11f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -37,10 +37,12 @@ import Settings from './components/Settings';
 
 function Dashboard() {
   const navigate = useNavigate();
+  const [sidebarVisible, setSidebarVisible] = useState(true);
+
   return (
-    <div className="dashboard">
+    <div className={`dashboard ${sidebarVisible ? 'sidebar-visible' : 'sidebar-hidden'}`}>
       <header className="dashboard-header">
-        <h1>Neko Reader</h1>
+        <h1 className="logo" onClick={() => setSidebarVisible(!sidebarVisible)} style={{ cursor: 'pointer' }}>🐱</h1>
         <nav>
           <button onClick={() => navigate('/settings')} className="nav-link" style={{ color: 'white', marginRight: '1rem', background: 'none', border: 'none', cursor: 'pointer', fontSize: 'inherit', fontFamily: 'inherit' }}>Settings</button>
 
@@ -53,7 +55,7 @@ function Dashboard() {
         </nav>
       </header>
       <div className="dashboard-content">
-        <aside className="dashboard-sidebar">
+        <aside className={`dashboard-sidebar ${sidebarVisible ? '' : 'hidden'}`}>
           <FeedList />
         </aside>
         <main className="dashboard-main">