Skip to content

Commit 085efb3

Browse files
CiphroxCiphrox
committed
updated menu bar to become collapsable
1 parent 9155d29 commit 085efb3

File tree

8 files changed

+141
-27
lines changed

8 files changed

+141
-27
lines changed

‎src/assets/icons/home.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/icons/placeholder.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/record.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/styles/menu.css‎

Lines changed: 87 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,55 @@
88
--header-height: 80px;
99
--sidebar-width: 16ch;
1010
--timing: 0.42s;
11-
--ease: linear(
12-
0 0%,
13-
0.0036 9.62%,
14-
0.0185 16.66%,
15-
0.0489 23.03%,
16-
0.0962 28.86%,
17-
0.1705 34.93%,
18-
0.269 40.66%,
19-
0.3867 45.89%,
20-
0.5833 52.95%,
21-
0.683 57.05%,
22-
0.7829 62.14%,
23-
0.8621 67.46%,
24-
0.8991 70.68%,
25-
0.9299 74.03%,
26-
0.9545 77.52%,
27-
0.9735 81.21%,
28-
0.9865 85%,
29-
0.9949 89.15%,
30-
1 100%
31-
);
11+
--ease: linear(0 0%,
12+
0.0036 9.62%,
13+
0.0185 16.66%,
14+
0.0489 23.03%,
15+
0.0962 28.86%,
16+
0.1705 34.93%,
17+
0.269 40.66%,
18+
0.3867 45.89%,
19+
0.5833 52.95%,
20+
0.683 57.05%,
21+
0.7829 62.14%,
22+
0.8621 67.46%,
23+
0.8991 70.68%,
24+
0.9299 74.03%,
25+
0.9545 77.52%,
26+
0.9735 81.21%,
27+
0.9865 85%,
28+
0.9949 89.15%,
29+
1 100%);
30+
--sidebar-collapsed: 4rem;
31+
--sidebar-expanded: 16ch;
32+
--icon-size: 1.5rem;
3233
}
3334

3435
body {
3536
display: block;
3637
}
3738

38-
.nav--list__item.active a {
39+
[popover] .nav--list__item {
40+
& a {
41+
display: flex;
42+
flex-direction: row;
43+
align-items: center;
44+
gap: 0.5rem;
45+
transition: all 0.2s ease;
46+
}
47+
}
48+
49+
[popover] .nav--list__item.active {
3950
background: color-mix(in srgb, var(--primary) 15%, transparent);
4051
color: var(--primary);
4152
font-weight: 600;
4253
border-radius: 0.75rem;
54+
margin: 0rem 1rem;
55+
}
56+
57+
[popover] .nav--list__item:hover {
58+
color: var(--primary);
59+
border-radius: 0.75rem;
4360
}
4461

4562
.layout {
@@ -54,7 +71,7 @@
5471
inset: unset;
5572
display: flex;
5673
flex-direction: column;
57-
width: var(--sidebar-w);
74+
width: var(--sidebar-expanded);
5875
margin: 0;
5976
flex-shrink: 0;
6077
right: 100%;
@@ -67,12 +84,54 @@
6784
height: calc(100svh - var(--header-height));
6885
position: sticky;
6986
border-right: 1px solid var(--border);
87+
transition: width 0.3s ease;
88+
overflow-x: hidden;
89+
white-space: nowrap;
90+
}
91+
92+
[popover].minimized {
93+
width: var(--sidebar-collapsed);
94+
transition: all 0.3s ease;
95+
96+
& a {
97+
justify-content: center;
98+
padding: 0.5rem;
99+
}
100+
101+
& .text {
102+
opacity: 0;
103+
width: 0;
104+
visibility: hidden;
105+
}
106+
107+
& .icon {
108+
margin: 0;
109+
}
110+
111+
& .nav--list__item {
112+
padding: 0.25rem;
113+
}
114+
}
115+
116+
.minimize-toggle {
117+
transition: transform 0.3s ease;
118+
}
119+
120+
.minimize-toggle.rotated {
121+
transform: rotate(180deg);
70122
}
71123

72124
main {
73125
border: 2px solid #0000;
74126
}
75127

128+
[popover] .nav--list__item {
129+
display: flex;
130+
align-items: center;
131+
padding: 0.25rem 0.75rem;
132+
transition: all 0.2s ease;
133+
}
134+
76135
[popover] ul {
77136
list-style-position: inside;
78137
padding: 0;
@@ -98,7 +157,7 @@
98157
transition: all 0.2s;
99158
}
100159

101-
[popover] a:hover {
160+
[popover] .nav--list__item:hover {
102161
background: color-mix(in srgb, var(--primary) 10%, transparent);
103162
color: var(--primary);
104163
}
@@ -199,6 +258,7 @@
199258
translate: 0 calc(clamp(0, var(--ty), var(--distance) - 88) * -1px);
200259
transition-duration: var(--timing);
201260
transition-timing-function: var(--ease);
261+
min-width: var(--sidebar-expanded);
202262
}
203263

204264
[popover] .bear-link {
@@ -381,6 +441,8 @@
381441
color: var(--primary);
382442
background: color-mix(in srgb, var(--primary) 10%, transparent);
383443
}
444+
445+
min-width: var(--sidebar-expanded);
384446
}
385447

386448
.theme-toggle {
@@ -409,4 +471,4 @@
409471
[data-debug="false"] .debug-toggle g:first-of-type {
410472
display: block;
411473
}
412-
}
474+
}

‎src/layouts/Navigation.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ const currentPath = Astro.url.pathname;
1818
.filter((p) => p.isActive)
1919
.map((p) => (
2020
<li class={`nav--list__item ${currentPath === p.path ? "active" : ""}`}>
21-
<Link href={p.path} name={p.name} />
21+
<a href={p.path}>
22+
<span class="icon">{p.icon && <p.icon width={24} height={24} />}</span>
23+
<span class="text">{p.name}</span>
24+
</a>
2225
</li>
2326
))
2427
}

‎src/layouts/common/Menu.astro‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import "@/assets/styles/menu.css";
33
import HamIcon from "@/assets/icons/ham.svg";
44
import ArrowIcon from "@/assets/icons/arrow.svg";
55
import ToggleIcon from "@/assets/icons/toggle.svg";
6+
//import ArrowLeftIcon from "@/assets/icons/arrow-left.svg";
67
78
import Navigation from "@/layouts/Navigation";
89
import { NavbarLinks } from "@/utils/constants";
@@ -13,11 +14,26 @@ import { NavbarLinks } from "@/utils/constants";
1314
</button>
1415
<div class="layout">
1516
<aside popover="auto" id="nav">
16-
<button class="menu-button hider" popovertarget="nav" popovertargetaction="hide" class="hider" aria-label="Close drawer">
17+
<button
18+
class="menu-button hider"
19+
popovertarget="nav"
20+
popovertargetaction="hide"
21+
class="hider"
22+
aria-label="Close drawer"
23+
>
1724
<span class="sr-only">Close drawer</span>
1825
</button>
1926
<Navigation pages={NavbarLinks} />
2027
<div class="actions">
28+
<button class="menu-button minimize-toggle" aria-label="Toggle menu size">
29+
<ArrowIcon
30+
width={24}
31+
height={24}
32+
style={{
33+
transform: "rotate(-135deg)"
34+
}}
35+
/>
36+
</button>
2137
<button class="menu-button theme-toggle">
2238
<ToggleIcon width={24} height={24} />
2339
</button>
@@ -34,6 +50,7 @@ import { NavbarLinks } from "@/utils/constants";
3450
const themer = document.querySelector(".theme-toggle") as HTMLElement;
3551
const placer = document.querySelector(".placement-toggle") as HTMLElement;
3652
const hider = document.querySelector(".hider") as HTMLElement;
53+
const minimizeBtn = document.querySelector(".minimize-toggle") as HTMLElement;
3754

3855
const config = {
3956
theme: "system"
@@ -87,4 +104,12 @@ import { NavbarLinks } from "@/utils/constants";
87104
};
88105

89106
popover.addEventListener("toggle", reset);
107+
108+
const toggleMinimize = () => {
109+
const nav = document.querySelector("#nav");
110+
nav?.classList.toggle("minimized");
111+
minimizeBtn?.classList.toggle("rotated");
112+
};
113+
114+
minimizeBtn?.addEventListener("click", toggleMinimize);
90115
</script>

‎src/types/link.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export type LinkProps = {
33
name?: string;
44
path: string;
55
isActive: boolean;
6+
icon?: React.FC;
67
};

‎src/utils/constants.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import PlaceholderIcon from "@/assets/icons/placeholder.svg";
2+
import HomeIcon from "@/assets/icons/home.svg";
3+
import RecordIcon from "@/assets/icons/record.svg";
14
import type { LinkProps } from "@/types";
25

36
export const APP_NAME = "Template";
@@ -7,48 +10,56 @@ export const NavbarLinks: LinkProps[] = [
710
name: "Home",
811
title: "Home",
912
path: "/",
13+
icon: HomeIcon,
1014
isActive: true
1115
},
1216
{
1317
name: "About",
1418
title: "About",
1519
path: "/about",
20+
icon: PlaceholderIcon,
1621
isActive: true
1722
},
1823
{
1924
name: "Varnmala",
2025
title: "Varnmala",
2126
path: "/varnmala",
27+
icon: PlaceholderIcon,
2228
isActive: true
2329
},
2430
{
2531
name: "Panel",
2632
title: "Panel",
2733
path: "/panel",
34+
icon: PlaceholderIcon,
2835
isActive: true
2936
},
3037
{
3138
name: "Reader",
3239
title: "Reader",
3340
path: "/reader",
41+
icon: PlaceholderIcon,
3442
isActive: true
3543
},
3644
{
3745
name: "Record",
3846
title: "Record",
3947
path: "/record",
48+
icon: RecordIcon,
4049
isActive: true
4150
},
4251
{
4352
name: "Hindi",
4453
title: "Hindi",
4554
path: "/hindi",
55+
icon: PlaceholderIcon,
4656
isActive: true
4757
},
4858
{
4959
name: "Typing",
5060
title: "Typing",
5161
path: "/typing",
62+
icon: PlaceholderIcon,
5263
isActive: true
5364
}
5465
];

0 commit comments

Comments
 (0)