Skip to content

Commit 1e87d6a

Browse files
ayushjain17Datron
ayushjain17
authored and
Datron
committed
feat: Collapsible side nav on large screen
1 parent 2fffe80 commit 1e87d6a

File tree

4 files changed

+79
-68
lines changed

4 files changed

+79
-68
lines changed

‎crates/frontend/src/components/pagination.rs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@ pub fn pagination(
4949

5050
view! {
5151
<div class=format!("join {class}")>
52-
<A class="join-item btn" href=get_updated_query("page", Some(previous_page.to_string()))>
52+
<A
53+
class="join-item btn"
54+
href=get_updated_query("page", Some(previous_page.to_string()))
55+
>
5356
"«"
5457
</A>
5558
<button class="join-item btn">

‎crates/frontend/src/components/side_nav.rs‎

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ pub fn workspace_selector(
118118
<div class="dropdown dropdown-downm w-full max-w-xs">
119119
<label
120120
tabindex="0"
121-
class="hidden xl:flex max-xl:group-hover:flex select items-center shadow-md"
121+
class="hidden xl:group-[.collapsed]:hidden xl:flex max-xl:group-hover:flex select items-center shadow-md"
122122
on:click:undelegated=move |_| {
123123
if let Some(element) = node_ref.get() {
124124
let _ = element.focus();
@@ -129,13 +129,13 @@ pub fn workspace_selector(
129129
</label>
130130
<div
131131
tabindex="0"
132-
class="xl:hidden max-xl:group-hover:hidden select items-center shadow-md"
132+
class="xl:hidden xl:group-[.collapsed]:inline-flex max-xl:group-hover:hidden select items-center shadow-md"
133133
>
134134
<i class="ri-briefcase-line" />
135135
</div>
136136
<ul
137137
tabindex="0"
138-
class="dropdown-content menu z-[1000] max-h-96 w-[inherit] p-2 flex-nowrap bg-base-100 rounded-box overflow-y-scroll overflow-x-hidden shadow"
138+
class="dropdown-content menu z-[1000] max-h-96 max-xl:group-hover:w-[inherit] xl:w-[inherit] xl:group-[.collapsed]:w-[unset] p-2 flex-nowrap bg-base-100 rounded-box overflow-y-scroll overflow-x-hidden shadow"
139139
>
140140
<Show when=move || *client_side_ready.get()>
141141
<label class="input input-bordered mb-3 flex items-center gap-2 h-10">
@@ -221,15 +221,15 @@ pub fn nav_item(
221221
<A
222222
href
223223
class=format!(
224-
"py-2.5 px-2.5 xl:px-4 max-xl:group-hover:px-4 flex items-center gap-3 whitespace-nowrap {anchor_class}",
224+
"py-2.5 px-2.5 xl:px-4 xl:group-[.collapsed]:px-2.5 max-xl:group-hover:px-4 flex items-center gap-3 whitespace-nowrap {anchor_class}",
225225
)
226226
>
227227
<div class=format!(
228228
"w-8 h-8 pt-0.5 flex content-center justify-center rounded-lg {icon_wrapper_class}",
229229
)>
230230
<i class=format!("{icon} text-lg font-normal {icon_class}") />
231231
</div>
232-
<span class="max-xl:hidden max-xl:group-hover:block duration-300 opacity-100 pointer-events-none ease-soft">
232+
<span class="max-xl:hidden xl:group-[.collapsed]:hidden max-xl:group-hover:block duration-300 opacity-100 pointer-events-none ease-soft">
233233
{text}
234234
</span>
235235
</A>
@@ -242,51 +242,59 @@ pub fn nav_component(
242242
workspace_resource: Resource<String, PaginatedResponse<WorkspaceResponse>>,
243243
app_routes: Signal<Vec<AppRoute>>,
244244
) -> impl IntoView {
245+
let collapsed_rws = RwSignal::new(false);
245246
let location = use_location();
246247
let base = use_url_base();
247-
let placeholder_class = if is_placeholder {
248-
"xl:hidden"
249-
} else {
250-
"group max-xl:fixed max-xl:z-[999]"
251-
};
252248

253-
view! {
254-
<nav class=format!(
255-
"{placeholder_class} h-full max-xl:min-w-fit xl:w-full max-xl:hover:w-full max-w-xs pl-2 xl:pl-4 max-xl:hover:pl-4 py-2 max-xl:pr-2 flex flex-col gap-2 overflow-x-visible bg-gray-50 max-xl:hover:rounded-r-xl max-xl:shadow-lg transition-all duration-500",
256-
)>
257-
<div class="xl:hidden max-xl:group-hover:hidden self-center py-[14px] flex justify-center items-center cursor-pointer">
258-
<i class="ri-menu-line ri-xl h-10 w-fit px-2 flex items-center border-2 border-solid rounded-lg" />
259-
</div>
260-
<A
261-
href=format!("{base}/admin")
262-
class="max-xl:hidden max-xl:group-hover:block px-8 py-6 text-sm font-semibold text-center text-slate-700 whitespace-nowrap"
263-
>
264-
Superposition Platform
265-
</A>
266-
<WorkspaceSelector workspace_resource app_routes />
267-
<ul class="menu flex-1 h-full w-fit xl:w-full max-xl:group-hover:w-full !py-0 !px-2 flex-nowrap gap-1 overflow-y-auto">
268-
{move || {
269-
let pathname = location.pathname.get();
270-
app_routes
271-
.get()
272-
.into_iter()
273-
.map(|route| {
274-
let is_active = pathname.contains(&route.path);
275-
view! {
276-
<li class="w-full">
277-
<NavItem
278-
href=route.path.to_string()
279-
icon=route.icon.to_string()
280-
text=route.label.to_string()
281-
is_active
282-
/>
283-
</li>
284-
}
285-
})
286-
.collect_view()
287-
}}
288-
</ul>
289-
</nav>
249+
move || {
250+
let placeholder_class = if is_placeholder {
251+
"xl:hidden".to_string()
252+
} else {
253+
let collapsed = if collapsed_rws.get() { "collapsed" } else { "" };
254+
format!("group max-xl:fixed max-xl:z-[999] {collapsed}")
255+
};
256+
257+
view! {
258+
<nav class=format!(
259+
"{placeholder_class} h-full max-xl:min-w-fit xl:[&.collapsed]:min-w-fit xl:[&.collapsed]:w-[unset] xl:w-full max-xl:hover:w-full max-w-xs pl-2 xl:pl-4 max-xl:hover:pl-4 xl:[&.collapsed]:pl-2 py-2 max-xl:pr-2 xl:[&.collapsed]:pr-2 flex flex-col gap-2 overflow-x-visible bg-gray-50 max-xl:hover:rounded-r-xl max-xl:shadow-lg xl:[&.collapsed]:shadow-lg transition-all duration-500",
260+
)>
261+
<div class="h-[84px] px-4 py-2 flex items-center justify-center gap-8">
262+
<A
263+
href=format!("{base}/admin")
264+
class="max-xl:hidden max-xl:group-hover:block xl:group-[.collapsed]:hidden text-sm font-semibold text-center text-slate-700 whitespace-nowrap"
265+
>
266+
Superposition Platform
267+
</A>
268+
<i
269+
class="ri-menu-line ri-xl h-10 w-fit px-2 xl:group-[.collapsed]:flex max-xl:group-hover:hidden flex justify-center items-center border-2 border-solid max-xl:border-transparent xl:hover:border-gray-400 rounded-lg cursor-pointer"
270+
on:click=move |_| collapsed_rws.update(|v| *v = !*v)
271+
/>
272+
</div>
273+
<WorkspaceSelector workspace_resource app_routes />
274+
<ul class="menu flex-1 h-full w-fit xl:w-full xl:group-[.collapsed]:w-fit max-xl:group-hover:w-full !py-0 !px-2 flex-nowrap gap-1 overflow-y-auto">
275+
{move || {
276+
let pathname = location.pathname.get();
277+
app_routes
278+
.get()
279+
.into_iter()
280+
.map(|route| {
281+
let is_active = pathname.contains(&route.path);
282+
view! {
283+
<li class="w-full">
284+
<NavItem
285+
href=route.path.to_string()
286+
icon=route.icon.to_string()
287+
text=route.label.to_string()
288+
is_active
289+
/>
290+
</li>
291+
}
292+
})
293+
.collect_view()
294+
}}
295+
</ul>
296+
</nav>
297+
}
290298
}
291299
}
292300

‎crates/frontend/src/pages/function.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ pub fn function_page() -> impl IntoView {
186186
{Stage::iter()
187187
.map(|tab| {
188188
let get_updated_query = use_update_url_query();
189-
view!{
189+
view! {
190190
<A
191191
href=get_updated_query("tab", Some(tab.to_string()))
192192
attr:role="tab"

‎docs/docusaurus.config.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const config: Config = {
1616
},
1717

1818
// Set the production url of your site here
19-
url: "https://juspay.io",
19+
url: "https://juspay.io/",
2020
// Set the /<baseUrl>/ pathname under which your site is served
2121
// For GitHub pages deployment, it is often '/<projectName>/'
2222
baseUrl: "/superposition/",
@@ -38,7 +38,7 @@ const config: Config = {
3838
"classic",
3939
{
4040
docs: {
41-
routeBasePath: '/',
41+
routeBasePath: '/docs',
4242
sidebarPath: "./sidebars.ts",
4343
// Please change this to your repo.
4444
// Remove this to remove the "edit this page" links.
@@ -63,12 +63,12 @@ const config: Config = {
6363
src: "https://juspay.io/images/superposition/logo.jpg",
6464
},
6565
items: [
66-
{
67-
type: "docSidebar",
68-
sidebarId: "superpositionSidebar",
69-
position: "left",
70-
label: "Tutorial",
71-
},
66+
// {
67+
// type: "docSidebar",
68+
// sidebarId: "superpositionSidebar",
69+
// position: "left",
70+
// label: "Tutorial",
71+
// },
7272
// {to: '/blog', label: 'Blog', position: 'left'},
7373
{
7474
href: "https://github.com/juspay/superposition",
@@ -82,23 +82,23 @@ const config: Config = {
8282
links: [
8383
{
8484
title: "Docs",
85-
items: [
86-
{
87-
label: "Tutorial",
88-
to: "/",
89-
},
90-
],
85+
// items: [
86+
// {
87+
// label: "Tutorial",
88+
// to: "/",
89+
// },
90+
// ],
9191
},
9292
{
9393
title: "Community",
9494
items: [
95-
{
96-
label: "Discord",
97-
href: "https://discordapp.com/invite/docusaurus",
98-
},
95+
// {
96+
// label: "Discord",
97+
// href: "https://discordapp.com/invite/docusaurus",
98+
// },
9999
{
100100
label: "X",
101-
href: "https://x.com/juspay",
101+
href: "https://x.com/superpositionJP",
102102
},
103103
],
104104
},

0 commit comments

Comments
 (0)