ReviewOS
Reload

also looking at this

stacks/bunpress

fix(spa): repair client-side router and polish default theme

#71
Merged glennmichael123 wants to merge fix/spa-nav-and-theme-polish into main
9 files +1037 -170
packages/bunpress/src/templates/sidebar-section.stxmodified+67-11
@@ -1,27 +1,60 @@
1<div class="VPSidebarItem sidebar-section" style="margin-bottom: 16px;">
2 <button
3 style="width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; font-size: 14px; font-weight: 600; color: var(--bp-c-text-1); background: transparent; border: none; cursor: pointer; transition: color 0.25s;"
4 onclick="toggleSection(this.parentElement)"
5 onmouseover="this.style.color='var(--bp-c-brand-1)'"
6 onmouseout="this.style.color='var(--bp-c-text-1)'"
7 >
1<div class="VPSidebarItem sidebar-section">
2 <button class="sidebar-section-toggle" onclick="toggleSection(this.parentElement)" type="button">
83 <span>{{ title }}</span>
9 <svg class="chevron" style="width: 16px; height: 16px; transition: transform 0.2s ease-in-out;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4 <svg class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
105 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
116 </svg>
127 </button>
138 <div class="sidebar-items-wrapper">
14 <ul class="sidebar-items" style="list-style: none; margin: 4px 0 0 0; padding: 0;">
9 <ul class="sidebar-items">
1510 {!! items !!}
1611 </ul>
1712 </div>
1813</div>
1914
2015<style>
16.sidebar-section {
17 margin-bottom: 16px;
18}
19
20.sidebar-section-toggle {
21 width: 100%;
22 display: flex;
23 align-items: center;
24 justify-content: space-between;
25 padding: 8px 24px;
26 font-size: 14px;
27 font-weight: 600;
28 color: var(--bp-c-text-1);
29 background: transparent;
30 border: none;
31 cursor: pointer;
32 transition: color 0.25s;
33 font-family: inherit;
34 text-align: left;
35}
36
37.sidebar-section-toggle:hover {
38 color: var(--bp-c-brand-1);
39}
40
41.sidebar-section-toggle .chevron {
42 width: 16px;
43 height: 16px;
44 transition: transform 0.2s ease-in-out;
45 flex-shrink: 0;
46}
47
48.sidebar-items {
49 list-style: none;
50 margin: 4px 0 0 0;
51 padding: 0;
52}
53
2154.sidebar-items-wrapper {
2255 overflow: hidden;
2356 transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
24 max-height: 500px;
57 max-height: 1000px;
2558 opacity: 1;
2659}
2760
@@ -30,9 +63,32 @@
3063 opacity: 0;
3164}
3265
33.sidebar-section.collapsed .chevron {
66.sidebar-section.collapsed .sidebar-section-toggle .chevron {
3467 transform: rotate(-90deg);
3568}
69
70.VPSidebarItem-link {
71 display: block;
72 padding: 6px 24px;
73 color: var(--bp-c-text-2);
74 text-decoration: none;
75 font-size: 14px;
76 line-height: 1.5;
77 transition: color 0.25s;
78 border-left: 2px solid transparent;
79 margin-left: 0;
80}
81
82.VPSidebarItem-link:hover {
83 color: var(--bp-c-brand-1);
84}
85
86.VPSidebarItem-link.is-active {
87 color: var(--bp-c-brand-1);
88 font-weight: 600;
89 border-left-color: var(--bp-c-brand-1);
90 padding-left: 22px;
91}
3692</style>
3793
3894<script>