diff options
| -rw-r--r-- | frontend/src/App.css | 14 | ||||
| -rw-r--r-- | frontend/src/App.test.tsx | 2 | ||||
| -rw-r--r-- | frontend/src/App.tsx | 8 |
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"> |