nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-22 17:21:08 +00:00
Code Projects Releases Packages Activity

Sidebar fixes

Browse source
This commit is contained in:
Felix Ableitner 2024-11-14 15:36:38 +01:00
parent 22bd0d9538
commit 65a10d471a
2 changed files with 60 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/app.rs
View file

@ -74,13 +74,13 @@ pub fn App() -> impl IntoView {
view! { view! {
<Html attr:data-theme=darkmode.theme class="h-full" /> <Html attr:data-theme=darkmode.theme class="h-full" />
<Body class="min-h-full flex max-sm:flex-col md:divide-x divide-slate-400 divide-solid" /> <Body class="h-full max-sm:flex max-sm:flex-col" />
<> <>
<Stylesheet id="ibis" href="/pkg/ibis.css" /> <Stylesheet id="ibis" href="/pkg/ibis.css" />
<Stylesheet id="katex" href="/katex.min.css" /> <Stylesheet id="katex" href="/katex.min.css" />
<Router> <Router>
<Nav /> <Nav />
<main class="p-4 grow"> <main class="p-4 md:ml-64">
<Routes> <Routes>
<Route path="/" view=ReadArticle /> <Route path="/" view=ReadArticle />
<Route path="/article/:title" view=ReadArticle /> <Route path="/article/:title" view=ReadArticle />

111
src/frontend/components/nav.rs
View file

@ -20,12 +20,11 @@ pub fn Nav() -> impl IntoView {
let (search_query, set_search_query) = create_signal(String::new()); let (search_query, set_search_query) = create_signal(String::new());
let mut dark_mode = expect_context::<DarkMode>(); let mut dark_mode = expect_context::<DarkMode>();
view! { view! {
<nav class="max-sm:navbar p-2.5"> <nav class="max-sm:navbar p-2.5 h-full md:fixed md:w-64 max-sm: border-b md:border-e border-slate-400 border-solid">
<div <div
id="navbar-start" id="navbar-start"
class="max-sm:navbar-start max-sm:flex max-sm:dropdown max-sm:dropdown-bottom max-sm:dropdown-end max-sm:w-full md:h-full" class="max-sm:navbar-start max-sm:flex max-sm:dropdown max-sm:dropdown-bottom max-sm:dropdown-end max-sm:w-full md:h-full"
> >
<img src="/logo.png" class="m-auto" />
<h1 class="w-min md:hidden text-3xl font-bold font-serif"> <h1 class="w-min md:hidden text-3xl font-bold font-serif">
{CLIENT.hostname.clone()} {CLIENT.hostname.clone()}
</h1> </h1>
@ -33,63 +32,69 @@ pub fn Nav() -> impl IntoView {
<button tabindex="0" class="btn btn-outline lg:hidden"> <button tabindex="0" class="btn btn-outline lg:hidden">
Menu Menu
</button> </button>
<ul <div
tabindex="0" tabindex="0"
class="menu dropdown-content p-2 max-sm:rounded-box max-sm:z-[1] max-sm:shadow md:h-full" class="menu dropdown-content p-2 max-sm:rounded-box max-sm:z-[1] max-sm:shadow md:h-full"
> >
<img src="/logo.png" class="m-auto max-sm:hidden" />
<h1 class="px-4 py-2 text-3xl font-bold font-serif sm:hidden"> <h1 class="px-4 py-2 text-3xl font-bold font-serif sm:hidden">
{CLIENT.hostname.clone()} {CLIENT.hostname.clone()}
</h1> </h1>
<li> <ul>
<A href="/">"Main Page"</A> <li>
</li> <A href="/">"Main Page"</A>
<li> </li>
<A href="/instance/list">"Instances"</A> <li>
</li> <A href="/instance/list">"Instances"</A>
<li> </li>
<A href="/article/list">"Articles"</A> <li>
</li> <A href="/article/list">"Articles"</A>
<Transition> </li>
<Show when=is_logged_in> <Transition>
<li> <Show when=is_logged_in>
<A href="/article/create">"Create Article"</A> <li>
</li> <A href="/article/create">"Create Article"</A>
<li> </li>
<A href="/notifications"> <li>
"Notifications " <A href="/notifications">
<span class="indicator-item indicator-end badge badge-neutral"> "Notifications "
{move || notification_count.get()} <span class="indicator-item indicator-end badge badge-neutral">
</span> {move || notification_count.get()}
</A> </span>
</li> </A>
</Show> </li>
</Transition> </Show>
<li> </Transition>
<form <li>
class="form-control m-0 p-1" <form
on:submit=move |ev| { class="form-control m-0 p-1"
ev.prevent_default(); on:submit=move |ev| {
let navigate = leptos_router::use_navigate(); ev.prevent_default();
let query = search_query.get(); let navigate = leptos_router::use_navigate();
if !query.is_empty() { let query = search_query.get();
navigate(&format!("/search?query={query}"), Default::default()); if !query.is_empty() {
navigate(
&format!("/search?query={query}"),
Default::default(),
);
}
} }
} >
> <input
<input type="text"
type="text" class="input input-secondary input-bordered input-xs w-full rounded"
class="input input-secondary input-bordered input-xs w-full rounded" placeholder="Search"
placeholder="Search" prop:value=search_query
prop:value=search_query on:keyup=move |ev: ev::KeyboardEvent| {
on:keyup=move |ev: ev::KeyboardEvent| { let val = event_target_value(&ev);
let val = event_target_value(&ev); set_search_query.update(|v| *v = val);
set_search_query.update(|v| *v = val); }
} />
/>
<button class="btn btn-xs btn-secondary">Go</button> <button class="btn btn-xs btn-secondary">Go</button>
</form> </form>
</li> </li>
</ul>
<div class="divider"></div> <div class="divider"></div>
<Transition> <Transition>
<Show <Show
@ -131,7 +136,7 @@ pub fn Nav() -> impl IntoView {
</Show> </Show>
</Transition> </Transition>
<div class="flex-grow min-h-2"></div> <div class="grow min-h-2"></div>
<div class="m-1 grid gap-2"> <div class="m-1 grid gap-2">
<label class="flex cursor-pointer gap-2"> <label class="flex cursor-pointer gap-2">
<span class="label-text">Light</span> <span class="label-text">Light</span>
@ -150,7 +155,7 @@ pub fn Nav() -> impl IntoView {
</a> </a>
</p> </p>
</div> </div>
</ul> </div>
</div> </div>
</nav> </nav>
} }