connor/calendar
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace top navbar with left sidebar navigation

Browse Source 
- Convert horizontal top navbar to vertical left sidebar
- Sidebar features gradient background and fixed positioning
- Main content area adjusts with left margin to accommodate sidebar
- Mobile responsive: sidebar becomes horizontal top bar on smaller screens
- Enhanced navigation styling with hover effects and smooth transitions
- Improved space utilization for calendar view

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-28 19:46:43 -04:00
parent d85898cae7
commit 8a0d2286dc
2 changed files with 190 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/app.rs
View File

@@ -40,56 +40,86 @@ pub fn App() -> Html {
html! {
<BrowserRouter>
<div class="app">
<header class="app-header">
<h1>{"Calendar App"}</h1>
{
if auth_token.is_some() {
html! {
<nav>
<Link<Route> to={Route::Calendar}>{"Calendar"}</Link<Route>>
<button onclick={on_logout} class="logout-button">{"Logout"}</button>
</nav>
}
} else {
html! {
<nav>
<Link<Route> to={Route::Login}>{"Login"}</Link<Route>>
</nav>
}
{
if auth_token.is_some() {
html! {
<>
<aside class="app-sidebar">
<div class="sidebar-header">
<h1>{"Calendar App"}</h1>
</div>
<nav class="sidebar-nav">
<Link<Route> to={Route::Calendar} classes="nav-link">{"Calendar"}</Link<Route>>
<button onclick={on_logout} class="logout-button">{"Logout"}</button>
</nav>
</aside>
<main class="app-main">
<Switch<Route> render={move |route| {
let auth_token = (*auth_token).clone();
let on_login = on_login.clone();
match route {
Route::Home => {
if auth_token.is_some() {
html! { <Redirect<Route> to={Route::Calendar}/> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
Route::Login => {
if auth_token.is_some() {
html! { <Redirect<Route> to={Route::Calendar}/> }
} else {
html! { <Login {on_login} /> }
}
}
Route::Calendar => {
if auth_token.is_some() {
html! { <CalendarView /> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
}
}} />
</main>
</>
}
} else {
html! {
<div class="login-layout">
<Switch<Route> render={move |route| {
let auth_token = (*auth_token).clone();
let on_login = on_login.clone();
match route {
Route::Home => {
if auth_token.is_some() {
html! { <Redirect<Route> to={Route::Calendar}/> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
Route::Login => {
if auth_token.is_some() {
html! { <Redirect<Route> to={Route::Calendar}/> }
} else {
html! { <Login {on_login} /> }
}
}
Route::Calendar => {
if auth_token.is_some() {
html! { <CalendarView /> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
}
}} />
</div>
}
}
</header>
<main class="app-main">
<Switch<Route> render={move |route| {
let auth_token = (*auth_token).clone();
let on_login = on_login.clone();
match route {
Route::Home => {
if auth_token.is_some() {
html! { <Redirect<Route> to={Route::Calendar}/> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
Route::Login => {
if auth_token.is_some() {
html! { <Redirect<Route> to={Route::Calendar}/> }
} else {
html! { <Login {on_login} /> }
}
}
Route::Calendar => {
if auth_token.is_some() {
html! { <CalendarView /> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
}
}} />
</main>
}
</div>
</BrowserRouter>
}