use yew::prelude::*;
use yew_router::prelude::*;
use gloo_utils::document;
use gloo_storage::{LocalStorage, Storage};
use serde::{Deserialize, Serialize};
use crate::home::HomePage;
use crate::kanban::KanbanBoard;
#[derive(Debug, PartialEq, Clone, Copy, Serialize, Deserialize)]
enum Theme {
Light,
Dark,
}
impl Theme {
fn as_str(&self) -> &'static str {
match self {
Theme::Light => "light-theme",
Theme::Dark => "dark-theme",
}
}
}
#[derive(Clone, Routable, PartialEq)]
enum Route {
#[at("/")]
Home,
#[at("/kanban")]
Kanban,
#[not_found]
#[at("/404")]
NotFound,
}
fn switch(routes: Route) -> Html {
match routes {
Route::Home => html! { },
Route::Kanban => html! { },
Route::NotFound => html! { { "404 - Page not found" }
},
}
}
#[function_component(App)]
pub fn app() -> Html {
let theme = use_state(|| {
LocalStorage::get("theme").unwrap_or(Theme::Light)
});
let onclick_theme_toggle = {
let theme = theme.clone();
Callback::from(move |_| {
let new_theme = if *theme == Theme::Light { Theme::Dark } else { Theme::Light };
theme.set(new_theme);
})
};
use_effect_with(theme.clone(), move |theme| {
let body = document().body().expect("body element not found");
body.set_class_name(theme.as_str());
LocalStorage::set("theme", **theme).unwrap();
});
let navbar_class = if *theme == Theme::Dark { "navbar navbar-expand-lg navbar-dark" } else { "navbar navbar-expand-lg navbar-light" };
html! {
render={switch} />
}
}