nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-22 17:11:09 +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 />

17
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,13 +32,15 @@ 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>
<ul>
<li> <li>
<A href="/">"Main Page"</A> <A href="/">"Main Page"</A>
</li> </li>
@ -72,7 +73,10 @@ pub fn Nav() -> impl IntoView {
let navigate = leptos_router::use_navigate(); let navigate = leptos_router::use_navigate();
let query = search_query.get(); let query = search_query.get();
if !query.is_empty() { if !query.is_empty() {
navigate(&format!("/search?query={query}"), Default::default()); navigate(
&format!("/search?query={query}"),
Default::default(),
);
} }
} }
> >
@ -90,6 +94,7 @@ pub fn Nav() -> impl IntoView {
<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>
} }