hamzus-ui 0.0.23 → 0.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/src/layout/Sidebar/Label.svelte +63 -0
- package/src/layout/Sidebar/Root.svelte +33 -0
- package/src/layout/Sidebar/Separator.svelte +13 -0
- package/src/layout/Sidebar/SideBar.js +5 -0
- package/src/layout/Sidebar/SideBar.svelte +109 -0
- package/src/layout/Sidebar/SideBarBtn.svelte +63 -0
- package/src/layout/Sidebar/SideBarMenu/SideBarMenu.svelte +51 -0
- package/src/layout/Sidebar/SideBarMenu/SideBarMenuBtn.svelte +68 -0
- package/src/layout/Sidebar/SideBarMenu/SideBarMenuChildBtn.svelte +85 -0
- package/src/layout/Sidebar/TopBar.svelte +127 -0
- package/src/layout/Sidebar/index.js +10 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hamzus-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.25",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"svelte": "index.js",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"index.js",
|
|
19
19
|
"index.d.ts",
|
|
20
|
+
"src/layout",
|
|
20
21
|
"src/components/hamzus-ui",
|
|
21
22
|
"src/utils",
|
|
22
23
|
"src/styles"
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<div class="label">
|
|
2
|
+
<icon class="icon-container">
|
|
3
|
+
<slot name="icon" />
|
|
4
|
+
<span class="point"></span>
|
|
5
|
+
<span class="line"></span>
|
|
6
|
+
</icon>
|
|
7
|
+
<h6><slot /></h6>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
.label {
|
|
12
|
+
width: 100%;
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
padding: 0px 5px;
|
|
16
|
+
gap: 0px;
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
.label > h6 {
|
|
20
|
+
color: var(--font-3);
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.icon-container {
|
|
25
|
+
height: 16px;
|
|
26
|
+
width: 16px;
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
position: relative;
|
|
29
|
+
}
|
|
30
|
+
.icon-container :global(svg) {
|
|
31
|
+
width: 100%;
|
|
32
|
+
height: 100%;
|
|
33
|
+
}
|
|
34
|
+
.icon-container :global(svg path),
|
|
35
|
+
.label * {
|
|
36
|
+
color: var(--font-2);
|
|
37
|
+
fill: var(--font-2);
|
|
38
|
+
}
|
|
39
|
+
.line {
|
|
40
|
+
display: block;
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 0px;
|
|
43
|
+
left: 50%;
|
|
44
|
+
width: 1px;
|
|
45
|
+
height: 100%;
|
|
46
|
+
background-color: var(--font-3);
|
|
47
|
+
transition-property: background-color;
|
|
48
|
+
transition-duration: 0.2s;
|
|
49
|
+
transition-timing-function: ease-out;
|
|
50
|
+
}
|
|
51
|
+
.point{
|
|
52
|
+
display: block;
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: calc(50% - 1px);
|
|
55
|
+
left: 50%;
|
|
56
|
+
width: 5px;
|
|
57
|
+
height: 5px;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
transform: translate(-50%, -50%);
|
|
60
|
+
z-index: 1;
|
|
61
|
+
background-color: var(--font-3);
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<section class="nav-container">
|
|
4
|
+
<slot name="side-bar"/>
|
|
5
|
+
<div class="nav-content">
|
|
6
|
+
<slot name="top-bar"/>
|
|
7
|
+
<slot />
|
|
8
|
+
</div>
|
|
9
|
+
</section>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
.nav-container {
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
display: flex;
|
|
16
|
+
background-color: var(--bg-2);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
.nav-content {
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
background-color: var(--bg-1);
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
flex: 1;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
transition-property: width;
|
|
29
|
+
/* transition-property: margin, height, width; */
|
|
30
|
+
transition-duration: .2s;
|
|
31
|
+
transition-timing-function: ease-out;
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { onMount } from 'svelte';
|
|
3
|
+
import { open } from './SideBar';
|
|
4
|
+
import IconButton from '../../components/hamzus-ui/IconButton/IconButton.svelte';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
function toggleNav() {
|
|
11
|
+
|
|
12
|
+
const monEvenement = new CustomEvent("openNav",{});
|
|
13
|
+
document.dispatchEvent(monEvenement);
|
|
14
|
+
|
|
15
|
+
open.update((acutalValue)=>!acutalValue)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function handleKeyDown(event) {
|
|
19
|
+
if (event.key === 'b' && event.altKey) {
|
|
20
|
+
toggleNav();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
onMount(() => {
|
|
25
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
26
|
+
|
|
27
|
+
return ()=>{
|
|
28
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
</script>
|
|
34
|
+
<nav class="sidebar {$open ? "open" : ""}">
|
|
35
|
+
<div class="sidebar-content">
|
|
36
|
+
<div class="top">
|
|
37
|
+
<IconButton onClick={toggleNav} variant="ghost">
|
|
38
|
+
<svg
|
|
39
|
+
width="24"
|
|
40
|
+
height="24"
|
|
41
|
+
viewBox="0 0 24 24"
|
|
42
|
+
fill="none"
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
>
|
|
45
|
+
<path
|
|
46
|
+
d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z"
|
|
47
|
+
fill="#292D32"
|
|
48
|
+
/>
|
|
49
|
+
<path
|
|
50
|
+
d="M6.14717 22C4.17762 22 2.54434 18.1322 2.54434 17.7222L2.84561 4.78206C2.84561 4.37206 4.17762 2.37205 6.14717 2.37205C8.11672 2.37205 9.75 1.58999 9.75 1.99999V22C9.75 22.41 8.11672 22 6.14717 22Z"
|
|
51
|
+
fill="#292D32"
|
|
52
|
+
/>
|
|
53
|
+
</svg>
|
|
54
|
+
</IconButton>
|
|
55
|
+
</div>
|
|
56
|
+
<slot/>
|
|
57
|
+
</div>
|
|
58
|
+
</nav>
|
|
59
|
+
<style>
|
|
60
|
+
.sidebar {
|
|
61
|
+
width: 0;
|
|
62
|
+
height: 100%;
|
|
63
|
+
max-height: 100dvh;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
transition-property: width;
|
|
67
|
+
transition-duration: .2s;
|
|
68
|
+
transition-timing-function: ease-in-out;
|
|
69
|
+
overflow-x: clip;
|
|
70
|
+
overflow-y: auto;
|
|
71
|
+
background-color:var(--bg-2);
|
|
72
|
+
}
|
|
73
|
+
.sidebar.open {
|
|
74
|
+
width: 250px;
|
|
75
|
+
border-right: 1px solid var(--stroke);
|
|
76
|
+
}
|
|
77
|
+
:global(.phone-close-btn) {
|
|
78
|
+
display: none;
|
|
79
|
+
margin-bottom: 7px;
|
|
80
|
+
}
|
|
81
|
+
.sidebar-content{
|
|
82
|
+
width: 100%;
|
|
83
|
+
padding: 7px;
|
|
84
|
+
}
|
|
85
|
+
.top{
|
|
86
|
+
padding-bottom: 7px;
|
|
87
|
+
}
|
|
88
|
+
/*
|
|
89
|
+
old width margin
|
|
90
|
+
.nav-content.focus {
|
|
91
|
+
width: calc(100% - (10px + 250px));
|
|
92
|
+
height: calc(100% - 10px);
|
|
93
|
+
margin: 5px;
|
|
94
|
+
border: 1px solid var(--stroke);
|
|
95
|
+
border-radius: 7px;
|
|
96
|
+
|
|
97
|
+
} */
|
|
98
|
+
@media (max-width : 900px){
|
|
99
|
+
.sidebar {
|
|
100
|
+
position: fixed;
|
|
101
|
+
top: 0;
|
|
102
|
+
left: 0;
|
|
103
|
+
z-index: 1000;
|
|
104
|
+
}
|
|
105
|
+
:global(.phone-close-btn){
|
|
106
|
+
display: flex;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { page } from "$app/stores";
|
|
3
|
+
|
|
4
|
+
export let label
|
|
5
|
+
export let href
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
$: currentPath = $page.url.pathname;
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
let active = false
|
|
12
|
+
|
|
13
|
+
$: if (currentPath.includes(href)) {
|
|
14
|
+
active = true
|
|
15
|
+
}else{
|
|
16
|
+
active = false
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<a {href} class="sidebar-btn" class:active={active}>
|
|
21
|
+
<icon class="icon-container">
|
|
22
|
+
<slot name="icon"/>
|
|
23
|
+
</icon>
|
|
24
|
+
<h5>{label}</h5>
|
|
25
|
+
</a>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
.sidebar-btn{
|
|
29
|
+
width: 100%;
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
gap: 7px;
|
|
33
|
+
padding: 3px 5px;
|
|
34
|
+
border-radius: var(--radius-s);
|
|
35
|
+
background-color: transparent;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
}
|
|
38
|
+
.sidebar-btn:hover{
|
|
39
|
+
background-color: var(--bg-1);
|
|
40
|
+
}
|
|
41
|
+
.icon-container{
|
|
42
|
+
height: 16px;
|
|
43
|
+
width: 16px;
|
|
44
|
+
flex-shrink: 0;
|
|
45
|
+
transition: transform .2s ease-in-out;
|
|
46
|
+
}
|
|
47
|
+
.icon-container :global(svg){
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 100%;
|
|
50
|
+
}
|
|
51
|
+
.icon-container :global(svg path),
|
|
52
|
+
.sidebar-btn * {
|
|
53
|
+
color: var(--font-2);
|
|
54
|
+
fill: var(--font-2);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* active */
|
|
58
|
+
.sidebar-btn.active .icon-container :global(svg path),
|
|
59
|
+
.sidebar-btn.active * {
|
|
60
|
+
color: var(--accent);
|
|
61
|
+
fill: var(--accent);
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import SideBarBtn from "../SideBarBtn.svelte";
|
|
3
|
+
import SideBarMenuBtn from "./SideBarMenuBtn.svelte";
|
|
4
|
+
import { page } from "$app/stores";
|
|
5
|
+
|
|
6
|
+
export let title = "";
|
|
7
|
+
export let ref;
|
|
8
|
+
|
|
9
|
+
let active = false;
|
|
10
|
+
let open = false
|
|
11
|
+
$: currentPath = $page.url.pathname;
|
|
12
|
+
|
|
13
|
+
$: if (currentPath.startsWith(ref)) {
|
|
14
|
+
active = true
|
|
15
|
+
open = true
|
|
16
|
+
}else{
|
|
17
|
+
active = false
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
function handleClick() {
|
|
24
|
+
open = !open
|
|
25
|
+
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class="menu-list">
|
|
30
|
+
<SideBarMenuBtn on:click={handleClick} {active} label={title} {open}>
|
|
31
|
+
<slot name="icon" slot="icon"/>
|
|
32
|
+
</SideBarMenuBtn>
|
|
33
|
+
{#if open}
|
|
34
|
+
<div class="content">
|
|
35
|
+
<slot></slot>
|
|
36
|
+
</div>
|
|
37
|
+
{/if}
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<style>
|
|
41
|
+
.menu-list{
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
width: 100%;
|
|
45
|
+
}
|
|
46
|
+
.content{
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
width: 100%;
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let label
|
|
3
|
+
export let open
|
|
4
|
+
export let active = false
|
|
5
|
+
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<button {...$$restProps} on:click class="sidebar-btn" class:active={active}>
|
|
9
|
+
<div class="icon-container">
|
|
10
|
+
<slot name="icon"/>
|
|
11
|
+
</div>
|
|
12
|
+
<h5>{label}</h5>
|
|
13
|
+
<div class="icon-container {open ? "open" : ""}">
|
|
14
|
+
<!-- <svg class="carret" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
15
|
+
<path d="M12 6H14.67C17.98 6 19.34 8.35 17.68 11.22L16.34 13.53L15 15.84C13.34 18.71 10.63 18.71 8.96999 15.84L7.62999 13.53L6.28999 11.22C4.65999 8.35 6.00999 6 9.32999 6H12Z" fill="#1F1F1F"/>
|
|
16
|
+
</svg> -->
|
|
17
|
+
<svg class="carret" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
18
|
+
<path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill="#292D32"/>
|
|
19
|
+
</svg>
|
|
20
|
+
</div>
|
|
21
|
+
</button>
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
.sidebar-btn{
|
|
26
|
+
width: 100%;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
gap: 7px;
|
|
30
|
+
padding: 3px 5px;
|
|
31
|
+
border-radius: var(--radius-s);
|
|
32
|
+
background-color: transparent;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
text-wrap: nowrap;
|
|
35
|
+
}
|
|
36
|
+
.sidebar-btn:hover{
|
|
37
|
+
background-color: var(--bg-1);
|
|
38
|
+
}
|
|
39
|
+
.icon-container{
|
|
40
|
+
height: 16px;
|
|
41
|
+
width: 16px;
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
transition: transform .2s ease-in-out;
|
|
44
|
+
}
|
|
45
|
+
.icon-container :global(svg){
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
}
|
|
49
|
+
.icon-container :global(svg path),
|
|
50
|
+
.sidebar-btn * {
|
|
51
|
+
color: var(--font-2);
|
|
52
|
+
fill: var(--font-2);
|
|
53
|
+
}
|
|
54
|
+
.icon-container:has(.carret){
|
|
55
|
+
height: 12px;
|
|
56
|
+
width: 12px;
|
|
57
|
+
transform: rotate(-90deg);
|
|
58
|
+
}
|
|
59
|
+
.icon-container.open{
|
|
60
|
+
transform: rotate(0deg);
|
|
61
|
+
}
|
|
62
|
+
/* active */
|
|
63
|
+
.sidebar-btn.active .icon-container :global(svg path),
|
|
64
|
+
.sidebar-btn.active * {
|
|
65
|
+
color: var(--accent);
|
|
66
|
+
fill: var(--accent);
|
|
67
|
+
}
|
|
68
|
+
</style>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { page } from "$app/stores";
|
|
3
|
+
export let label
|
|
4
|
+
export let href
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
let active = false
|
|
8
|
+
$: currentPath = $page.url.pathname;
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
$: if (currentPath.includes(href)) {
|
|
12
|
+
active = true
|
|
13
|
+
}else{
|
|
14
|
+
active = false
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<a {href} class="sidebar-btn" class:active={active}>
|
|
19
|
+
<icon class="icon-container">
|
|
20
|
+
<slot name="icon"/>
|
|
21
|
+
<span class="line"></span>
|
|
22
|
+
</icon>
|
|
23
|
+
<h5>{label}</h5>
|
|
24
|
+
</a>
|
|
25
|
+
|
|
26
|
+
<style>
|
|
27
|
+
.sidebar-btn{
|
|
28
|
+
width: 100%;
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
gap: 7px;
|
|
32
|
+
padding: 3px 5px;
|
|
33
|
+
border-radius: var(--radius-s);
|
|
34
|
+
background-color: transparent;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
text-wrap: nowrap;
|
|
37
|
+
transition: background-color .2s ease-out;
|
|
38
|
+
}
|
|
39
|
+
.sidebar-btn:hover{
|
|
40
|
+
background-color: var(--bg-1);
|
|
41
|
+
}
|
|
42
|
+
.icon-container{
|
|
43
|
+
height: 16px;
|
|
44
|
+
width: 16px;
|
|
45
|
+
flex-shrink: 0;
|
|
46
|
+
position: relative;
|
|
47
|
+
}
|
|
48
|
+
.icon-container :global(svg){
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
}
|
|
52
|
+
.icon-container :global(svg path),
|
|
53
|
+
.sidebar-btn * {
|
|
54
|
+
color: var(--font-2);
|
|
55
|
+
fill: var(--font-2);
|
|
56
|
+
}
|
|
57
|
+
.sidebar-btn:hover .icon-container :global(svg path),
|
|
58
|
+
.sidebar-btn:hover * {
|
|
59
|
+
color: var(--font-1);
|
|
60
|
+
fill: var(--font-1);
|
|
61
|
+
}
|
|
62
|
+
.line{
|
|
63
|
+
display: block;
|
|
64
|
+
position: absolute;
|
|
65
|
+
top: -5px;
|
|
66
|
+
left: 50%;
|
|
67
|
+
width: 1px;
|
|
68
|
+
height: calc(100% + 10px);
|
|
69
|
+
background-color: var(--font-3);
|
|
70
|
+
transition-property: background-color;
|
|
71
|
+
transition-duration:.2s ;
|
|
72
|
+
transition-timing-function: ease-out;
|
|
73
|
+
}
|
|
74
|
+
/* active */
|
|
75
|
+
.sidebar-btn.active {
|
|
76
|
+
background-color: var(--accent-b);
|
|
77
|
+
}
|
|
78
|
+
.sidebar-btn.active *{
|
|
79
|
+
color: var(--accent);
|
|
80
|
+
fill: var(--accent);
|
|
81
|
+
}
|
|
82
|
+
.sidebar-btn.active .line{
|
|
83
|
+
background-color: var(--accent);
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { open, actualRoute } from './SideBar';
|
|
3
|
+
|
|
4
|
+
import IconButton from '../../components/hamzus-ui/IconButton/IconButton.svelte';
|
|
5
|
+
import * as Tooltip from '../../components/hamzus-ui/AdvancedTooltip';
|
|
6
|
+
import Link from '../../components/hamzus-ui/Link/Link.svelte';
|
|
7
|
+
import Kbd from '../../components/hamzus-ui/KBD/KBD.svelte';
|
|
8
|
+
|
|
9
|
+
function toggleNav() {
|
|
10
|
+
const monEvenement = new CustomEvent('openNav', {});
|
|
11
|
+
document.dispatchEvent(monEvenement);
|
|
12
|
+
|
|
13
|
+
open.update((acutalValue) => !acutalValue);
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<section class="top-bar">
|
|
18
|
+
<Tooltip.Root direction="bottom">
|
|
19
|
+
<Tooltip.Trigger slot="trigger">
|
|
20
|
+
<div class="opener">
|
|
21
|
+
<IconButton onClick={toggleNav} variant="ghost">
|
|
22
|
+
{#if $open}
|
|
23
|
+
<svg
|
|
24
|
+
width="24"
|
|
25
|
+
height="24"
|
|
26
|
+
viewBox="0 0 24 24"
|
|
27
|
+
fill="none"
|
|
28
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
>
|
|
30
|
+
<path
|
|
31
|
+
d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z"
|
|
32
|
+
fill="#292D32"
|
|
33
|
+
/>
|
|
34
|
+
<path
|
|
35
|
+
d="M6.14717 22C4.17762 22 2.54434 18.1322 2.54434 17.7222L2.84561 4.78206C2.84561 4.37206 4.17762 2.37205 6.14717 2.37205C8.11672 2.37205 9.75 1.58999 9.75 1.99999V22C9.75 22.41 8.11672 22 6.14717 22Z"
|
|
36
|
+
fill="#292D32"
|
|
37
|
+
/>
|
|
38
|
+
</svg>
|
|
39
|
+
{:else}
|
|
40
|
+
<svg
|
|
41
|
+
width="24"
|
|
42
|
+
height="24"
|
|
43
|
+
viewBox="0 0 24 24"
|
|
44
|
+
fill="none"
|
|
45
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
46
|
+
>
|
|
47
|
+
<path
|
|
48
|
+
d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z"
|
|
49
|
+
fill="#292D32"
|
|
50
|
+
/>
|
|
51
|
+
<path
|
|
52
|
+
d="M9 22.75C8.59 22.75 8.25 22.41 8.25 22V2C8.25 1.59 8.59 1.25 9 1.25C9.41 1.25 9.75 1.59 9.75 2V22C9.75 22.41 9.41 22.75 9 22.75Z"
|
|
53
|
+
fill="#292D32"
|
|
54
|
+
/>
|
|
55
|
+
</svg>
|
|
56
|
+
{/if}
|
|
57
|
+
</IconButton>
|
|
58
|
+
</div>
|
|
59
|
+
</Tooltip.Trigger>
|
|
60
|
+
<Tooltip.Content slot="content" style="background-color:var(--bg-2)">
|
|
61
|
+
<h6 style="color: var(--font-2);">
|
|
62
|
+
{$open ? 'fermé' : 'ouvrir'} la barre de navigation <Kbd letter="Alt" /> + <Kbd
|
|
63
|
+
letter="B"
|
|
64
|
+
/>
|
|
65
|
+
</h6>
|
|
66
|
+
</Tooltip.Content>
|
|
67
|
+
</Tooltip.Root>
|
|
68
|
+
{#if Array.isArray($actualRoute)}
|
|
69
|
+
{#each $actualRoute as route}
|
|
70
|
+
{#if route.link}
|
|
71
|
+
<Link style="color:var(--font-1);" className="h5" href={route.link}>{route.name}</Link>
|
|
72
|
+
<h6>></h6>
|
|
73
|
+
{:else}
|
|
74
|
+
<h5>{route.name}</h5>
|
|
75
|
+
{/if}
|
|
76
|
+
{/each}
|
|
77
|
+
{:else}
|
|
78
|
+
<h5>{$actualRoute}</h5>
|
|
79
|
+
{/if}
|
|
80
|
+
|
|
81
|
+
<div class="left-side">
|
|
82
|
+
<slot name="left-side" />
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="center">
|
|
86
|
+
<slot name="center" />
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<slot name="absolute" />
|
|
90
|
+
|
|
91
|
+
<div class="right-side">
|
|
92
|
+
<slot name="right-side" />
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
|
|
96
|
+
<style>
|
|
97
|
+
.top-bar {
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
column-gap: 7px;
|
|
101
|
+
width: 100%;
|
|
102
|
+
padding: 7px;
|
|
103
|
+
border-bottom: 1px solid var(--stroke);
|
|
104
|
+
background-color: var(--bg-2);
|
|
105
|
+
position: relative;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.left-side {
|
|
109
|
+
margin-right: auto;
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
column-gap: 7px;
|
|
113
|
+
}
|
|
114
|
+
.center {
|
|
115
|
+
margin-right: auto;
|
|
116
|
+
margin-left: auto;
|
|
117
|
+
display: flex;
|
|
118
|
+
align-items: center;
|
|
119
|
+
column-gap: 7px;
|
|
120
|
+
}
|
|
121
|
+
.right-side {
|
|
122
|
+
margin-left: auto;
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
column-gap: 7px;
|
|
126
|
+
}
|
|
127
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { default as Root } from './Root.svelte';
|
|
2
|
+
export { default as SideBar } from './SideBar.svelte';
|
|
3
|
+
export { default as TopBar } from './TopBar.svelte';
|
|
4
|
+
// special
|
|
5
|
+
export { default as Separator } from './Separator.svelte';
|
|
6
|
+
export { default as Label } from './Label.svelte';
|
|
7
|
+
// btn
|
|
8
|
+
export { default as Button } from './SideBarBtn.svelte';
|
|
9
|
+
export { default as Menu } from './SideBarMenu/SideBarMenu.svelte';
|
|
10
|
+
export { default as MenuButton } from './SideBarMenu/SideBarMenuChildBtn.svelte';
|