Skip to content

Commit 3f848c1

Browse files
bcivelbcivel
committed
Change header to display burger also when sidebar is closed
1 parent a5c2334 commit 3f848c1

File tree

3 files changed

+42
-48
lines changed

3 files changed

+42
-48
lines changed

‎source/src/main/webapp/WEB-INF/branding.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
},
99
"size": {
1010
"expanded": { "width": 40, "height": 40 },
11-
"collapsed": { "width": 40, "height": 40 }
11+
"collapsed": { "width": 32, "height": 32 }
1212
}
1313
}

‎source/src/main/webapp/include/global/header2.html‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,57 @@
11
<!-- Sidebar -->
2-
<aside id="crb_sidebar" class="crb_sidebar"
2+
<aside id="crb_sidebar"
3+
class="crb_sidebar transition-all duration-300 ease-in-out overflow-hidden"
34
:class="$store.sidebar.expanded ? 'w-72' : 'w-20'"
45
@mouseenter="$store.sidebar.handleEnter()"
56
@mouseleave="$store.sidebar.handleLeave()"
67
x-show="!$store.sidebar.hidden">
78

89
<!-- Logo & Header -->
9-
<div class="flex items-center justify-between p-6 border-b border-slate-700/50">
10-
<!-- Logo -->
11-
<div class="flex items-center space-x-3 cursor-pointer"
12-
@click="window.location.href='./'"
13-
x-show="$store.sidebar.expanded || $store.sidebar.showLogo"
14-
x-transition.opacity.scale.duration.200ms>
10+
<div :class="$store.sidebar.expanded
11+
? 'flex flex-row items-center justify-between p-6'
12+
: 'flex flex-col items-center p-6 gap-2'"
13+
class="border-b border-slate-700/50 transition-all duration-300">
1514

15+
<!-- Left: Logo + App name -->
16+
<div class="flex items-center gap-3 cursor-pointer"
17+
@click="window.location.href='./'">
18+
19+
<!-- Logo -->
1620
<img alt="Logo"
1721
:src="$store.sidebar.expanded
18-
? $store.branding.logo.expanded
19-
: $store.branding.logo.collapsed"
20-
:width="$store.sidebar.expanded
22+
? $store.branding.logo.expanded
23+
: $store.branding.logo.collapsed"
24+
:style="`
25+
width: ${$store.sidebar.expanded
2126
? $store.branding.size.expanded.width
22-
: $store.branding.size.collapsed.width"
23-
:height="$store.sidebar.expanded
27+
: $store.branding.size.collapsed.width}px;
28+
height: ${$store.sidebar.expanded
2429
? $store.branding.size.expanded.height
25-
: $store.branding.size.collapsed.height"
26-
class="transition-all duration-200"/>
30+
: $store.branding.size.collapsed.height}px;
31+
`"
32+
class="transition-all duration-300 object-contain"/>
33+
34+
<!-- App name (only expanded) -->
2735
<span x-show="$store.sidebar.expanded && $store.branding.showAppName"
2836
x-transition.opacity.duration.200ms
29-
class="font-bold text-xl tracking-tight"
37+
class="font-bold text-xl tracking-tight whitespace-nowrap"
3038
x-text="$store.branding.appName">
31-
</span>
39+
</span>
3240
</div>
3341

3442
<!-- Burger menu -->
35-
<button class="p-2 h-8 rounded-lg hover:bg-slate-700/50 transition-colors duration-200"
36-
@click="$store.sidebar.toggleSidebar()"
37-
x-show="$store.sidebar.expanded || (!$store.sidebar.expanded && $store.sidebar.hover && !$store.sidebar.showLogo)"
38-
x-transition.opacity.scale.duration.200ms>
39-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
40-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
43+
<button @click="$store.sidebar.toggleSidebar()"
44+
x-transition.opacity.scale.duration.200ms
45+
class="p-2 h-8 rounded-lg hover:bg-slate-700/50 transition-colors duration-200">
46+
<svg xmlns="http://www.w3.org/2000/svg"
47+
:class="$store.sidebar.expanded ? 'h-5 w-5' : 'h-4 w-4'"
48+
fill="none"
49+
viewBox="0 0 24 24"
50+
stroke="currentColor">
51+
<path stroke-linecap="round"
52+
stroke-linejoin="round"
53+
stroke-width="2"
54+
d="M4 6h16M4 12h16M4 18h16"/>
4155
</svg>
4256
</button>
4357
</div>

‎source/src/main/webapp/js/global/initAlpineStore.js‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ document.addEventListener('alpine:init', () => {
5050
this.hoverPos = {top: rect.top + window.scrollY, left: rect.right + window.scrollX};
5151
this.showSubMenu[menu] = true;
5252
}
53-
}, 50);
53+
}, 100);
5454
},
5555

5656
leaveMenu(menu){
@@ -59,7 +59,7 @@ document.addEventListener('alpine:init', () => {
5959
if (!this.expanded && !this.hoverMenu[menu] && !this.hoverSubMenu[menu]) {
6060
this.showSubMenu[menu] = false;
6161
}
62-
}, 50);
62+
}, 100);
6363
},
6464

6565
enterSubMenu(menu){
@@ -68,7 +68,7 @@ document.addEventListener('alpine:init', () => {
6868
if (!this.expanded && (this.hoverMenu[menu] || this.hoverSubMenu[menu])) {
6969
this.showSubMenu[menu] = true;
7070
}
71-
}, 50);
71+
}, 100);
7272
},
7373

7474
leaveSubMenu(menu){
@@ -77,27 +77,7 @@ document.addEventListener('alpine:init', () => {
7777
if (!this.expanded && !this.hoverMenu[menu] && !this.hoverSubMenu[menu]) {
7878
this.showSubMenu[menu] = false;
7979
}
80-
}, 50);
81-
},
82-
83-
84-
handleEnter() {
85-
if (!this.hidden) {
86-
this.hover = true
87-
if (!this.expanded) {
88-
this.hoverTimeout = setTimeout(() => {
89-
if (this.hover) this.showLogo = false
90-
}, 1000) // délai 1s
91-
}
92-
}
93-
},
94-
95-
handleLeave() {
96-
if (!this.hidden) {
97-
this.hover = false
98-
this.showLogo = true
99-
if (this.hoverTimeout) clearTimeout(this.hoverTimeout)
100-
}
80+
}, 100);
10181
}
10282
});
10383

@@ -110,7 +90,7 @@ document.addEventListener('alpine:init', () => {
11090
},
11191
size: {
11292
expanded: { width: 40, height: 40 },
113-
collapsed: { width: 40, height: 40 }
93+
collapsed: { width: 32, height: 32 }
11494
}
11595
});
11696

0 commit comments

Comments
 (0)