Skip to content

Commit 37cdbf9

Browse files
accgitaccgit
committed
Fix
1 parent 173af43 commit 37cdbf9

4 files changed

Lines changed: 253 additions & 5 deletions

File tree

‎dist/sidebar-menu.css‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
.list {
2+
width: 14.375rem;
3+
font-size: 0.938rem;
4+
}
5+
.list .list-hidden {
6+
display: none;
7+
overflow: hidden;
8+
padding: 0.5rem 0 0.5rem 1.563rem;
9+
}
10+
.list .list-hidden .list-hidden {
11+
padding-left: 0.75rem;
12+
}
13+
.list-hidden .list-link {
14+
line-height: 1.75rem;
15+
}
16+
.list-item {
17+
padding: 0;
18+
margin-top: 0.563rem;
19+
line-height: 2.125rem;
20+
}
21+
.list-title {
22+
margin-bottom: 0;
23+
margin-left: 1.375rem;
24+
letter-spacing: 0.063rem;
25+
font-size: 0.75rem;
26+
}
27+
.list-link {
28+
display: block;
29+
padding: 0 0.625rem 0 1.188rem;
30+
margin: 0;
31+
text-decoration: none;
32+
}
33+
.list-link:hover .bell {
34+
animation: bell-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
35+
backface-visibility: hidden;
36+
transform-origin: top right;
37+
}
38+
@keyframes bell-shake {
39+
0% {
40+
transform: rotate(0);
41+
}
42+
15% {
43+
transform: rotate(5deg);
44+
}
45+
30% {
46+
transform: rotate(-5deg);
47+
}
48+
45% {
49+
transform: rotate(4deg);
50+
}
51+
60% {
52+
transform: rotate(-4deg);
53+
}
54+
75% {
55+
transform: rotate(2deg);
56+
}
57+
85% {
58+
transform: rotate(-2deg);
59+
}
60+
92% {
61+
transform: rotate(1deg);
62+
}
63+
100% {
64+
transform: rotate(0);
65+
}
66+
}
67+
.list-icon {
68+
width: 1.75rem;
69+
display: inline-block;
70+
}
71+
.list .link-current {
72+
font-weight: 600;
73+
}
74+
75+
.link-arrow:before {
76+
font-family: "Font Awesome 7 Free", sans-serif;
77+
font-weight: 600;
78+
font-size: 0.75rem;
79+
margin-right: 0.313rem;
80+
float: right;
81+
}
82+
83+
.link-arrow.up:before {
84+
content: "\f105";
85+
}
86+
87+
.link-arrow.down:before {
88+
content: "\f107";
89+
}
90+
91+
.link-arrow.transition:before {
92+
transition: 0.2s all;
93+
}
94+
95+
.link-arrow.rotate:before {
96+
transform: rotate(90deg);
97+
}
98+
99+
.link-arrow.rotate-revert:before {
100+
transform: rotate(-90deg);
101+
}
102+
103+
.scrollbar {
104+
width: 14.375rem;
105+
overflow: hidden;
106+
position: relative;
107+
}
108+
.scrollbar-not-navbar {
109+
height: 100vh;
110+
}
111+
.scrollbar-use-navbar {
112+
height: calc(100vh - 3.5rem);
113+
}
114+
115+
.ps__rail-y {
116+
margin-top: 0.125rem;
117+
margin-bottom: 0.125rem;
118+
}
119+
120+
.ps__rail-y.ps--clicking .ps__thumb-y,
121+
.ps__rail-y:focus .ps__thumb-y,
122+
.ps__rail-y:hover .ps__thumb-y,
123+
.ps__thumb-y {
124+
width: 0.313rem;
125+
}
126+
127+
.nanobar {
128+
width: 100%;
129+
height: 0.125rem;
130+
z-index: 9999;
131+
top: 0;
132+
}
133+
.nanobar .bar {
134+
width: 0;
135+
height: 100%;
136+
transition: height 0.3s;
137+
background-color: var(--bs-dark);
138+
}
139+
140+
[data-sidebar-theme=light] {
141+
--sm-list-color: rgb(178.5, 178.5, 178.5);
142+
--sm-link-color: #666666;
143+
--sm-link-hover: rgb(30.6, 30.6, 30.6);
144+
--sm-hide-bg: rgb(245.025, 246.45, 247.875);
145+
--sm-hide-color: rgb(66.3, 66.3, 66.3);
146+
--sm-hide-hover: rgb(30.6, 30.6, 30.6);
147+
--sm-icon-color: rgb(183.6, 183.6, 183.6);
148+
--sm-icon-hover: rgb(30.6, 30.6, 30.6);
149+
--sm-scrollbar-bg: rgb(214.2, 214.2, 214.2);
150+
}
151+
152+
[data-sidebar-theme=dark] {
153+
--sm-list-color: rgb(122.0344827586, 134.5, 146.9655172414);
154+
--sm-link-color: rgb(206.4482758621, 211, 215.5517241379);
155+
--sm-link-hover: white;
156+
--sm-hide-bg: rgb(58.8586206897, 65.65, 72.4413793103);
157+
--sm-hide-color: rgb(245.8413793103, 246.7, 247.5586206897);
158+
--sm-hide-hover: white;
159+
--sm-icon-color: rgb(116.4068965517, 129.4, 142.3931034483);
160+
--sm-icon-hover: white;
161+
--sm-scrollbar-bg: rgb(111.4413793103, 124.3, 137.1586206897);
162+
}
163+
164+
.list {
165+
color: var(--sm-list-color);
166+
}
167+
168+
.list .list-link {
169+
color: var(--sm-link-color);
170+
}
171+
172+
.list .link-current,
173+
.list .list-link:hover,
174+
.list .link-current:hover {
175+
color: var(--sm-link-hover);
176+
}
177+
178+
.list .list-hidden {
179+
background-color: var(--sm-hide-bg);
180+
}
181+
182+
.list .list-hidden .list-link {
183+
color: var(--sm-hide-color);
184+
}
185+
186+
.list .list-hidden .link-current,
187+
.list .list-hidden .link-current:hover,
188+
.list .list-hidden .list-link:hover {
189+
color: var(--sm-hide-hover);
190+
}
191+
192+
.list .list-link .list-icon {
193+
color: var(--sm-icon-color);
194+
}
195+
196+
.list .list-link.link-current .list-icon,
197+
.list .list-link:hover .list-icon {
198+
color: var(--sm-icon-hover);
199+
}
200+
201+
.sidebar-user {
202+
background-color: var(--sm-hide-bg);
203+
}
204+
205+
.sidebar-user .sidebar-user-link {
206+
color: var(--sm-link-color);
207+
}
208+
209+
.sidebar-user .sidebar-user-link:hover {
210+
color: var(--sm-link-hover);
211+
}
212+
213+
.ps .ps__rail-y.ps--clicking .ps__thumb-y,
214+
.ps .ps__rail-y:focus .ps__thumb-y,
215+
.ps .ps__rail-y:hover .ps__thumb-y,
216+
.ps .ps__thumb-y {
217+
background-color: var(--sm-scrollbar-bg);
218+
}
219+
220+
.ps .ps__rail-y.ps--clicking,
221+
.ps .ps__rail-y:focus,
222+
.ps .ps__rail-y:hover {
223+
background: none;
224+
}

‎dist/sidebar-menu.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
document.querySelectorAll(".list-item").forEach((o) => {
3+
o.querySelectorAll("a.link-arrow").forEach((e) => {
4+
e.classList.add("up");
5+
const t = e.nextElementSibling;
6+
e.classList.contains("link-current") && (e.classList.add("active", "down"), t.style.display = "block"), e.addEventListener("click", (y) => {
7+
y.preventDefault(), ((i, n = 500) => {
8+
window.getComputedStyle(i).display === "none" ? d(i, n) : l(i, n);
9+
})(t, 200), e.classList.contains("down") && e.classList.toggle("rotate-revert"), e.classList.add("transition"), e.classList.toggle("active"), e.classList.toggle("rotate"), e.classList.toggle("link-current");
10+
});
11+
});
12+
});
13+
const l = (o, s = 500) => {
14+
o.style.transitionProperty = "height, margin, padding", o.style.transitionDuration = s + "ms", o.style.boxSizing = "border-box", o.style.height = o.offsetHeight + "px", o.offsetHeight, o.style.overflow = "hidden", o.style.height = 0, o.style.paddingTop = 0, o.style.paddingBottom = 0, o.style.marginTop = 0, o.style.marginBottom = 0, setTimeout(() => {
15+
o.style.display = "none", ["height", "padding-top", "padding-bottom", "margin-top", "margin-bottom", "overflow", "transition-duration", "transition-property"].forEach((e) => o.style.removeProperty(e));
16+
}, s);
17+
}, d = (o, s = 500) => {
18+
o.style.removeProperty("display"), window.getComputedStyle(o).display === "none" && (o.style.display = "block");
19+
const e = o.offsetHeight;
20+
o.style.overflow = "hidden", o.style.height = 0, o.style.paddingTop = 0, o.style.paddingBottom = 0, o.style.marginTop = 0, o.style.marginBottom = 0, o.offsetHeight, o.style.boxSizing = "border-box", o.style.transitionProperty = "height, margin, padding", o.style.transitionDuration = s + "ms", o.style.height = e + "px", o.style.removeProperty("padding-top"), o.style.removeProperty("padding-bottom"), o.style.removeProperty("margin-top"), o.style.removeProperty("margin-bottom"), setTimeout(() => {
21+
["height", "overflow", "transition-duration", "transition-property"].forEach((t) => o.style.removeProperty(t));
22+
}, s);
23+
};
24+
});

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@fortawesome/fontawesome-free": "^7.1.0",
77
"nanobar": "^0.4.2",
88
"perfect-scrollbar": "^1.5.6",
9-
"sidebar-skeleton-compostrap": "^2.0.10"
9+
"sidebar-skeleton-compostrap": "^2.1.0"
1010
},
1111
"license": "MIT",
1212
"keywords": [

0 commit comments

Comments
 (0)