Sidebar rewrite
mellobacon committed
Nov 24, 2022 at 23:40 UTC
ca2bf53569867aa1a8fc7377bb6ed46f97f0de69
4 files changed
+93
-43
src/components/Sidebar/Sidebar.svelte
+19
-21
@@ -1,10 +1,10 @@
1
<script lang="ts">
2
- import { Tabs, Tab, TabContent } from "carbon-components-svelte";
2
import Folder from "carbon-icons-svelte/lib/Folder.svelte";
3
import Share from "carbon-icons-svelte/lib/Share.svelte";
4
import PasteMyst from "../Misc/PasteMyst.svelte";
5
import Tree from "../FileTree/Tree.svelte";
7
- import { toggleActive } from "./Sidebar";
6
+ import { activeid, toggleActive } from "./Sidebar";
7
+ import SidebarTab from "./SidebarTab.svelte";
8
9
const tabs = [
10
{id: 0, tabname: "Files", icon: Folder, content: Tree},
@@ -16,30 +16,32 @@
16
</script>
17
18
<div id="sidebar">
19
- <Tabs selected={-1} type="container">
20
- {#each tabs as tab}
21
- <Tab id={`sidetab-${tab.id.toString()}`} on:click={() => {toggleActive(tab)}}>
22
- <svelte:component this={tab.icon}></svelte:component>
23
- </Tab>
24
- {/each}
25
- <div class="sidebardivider"></div>
26
- {#each exttabs as tab}
27
- <Tab id={`sidetab-${tab.id.toString()}`} on:click={() => {toggleActive(tab)}}>
28
- <svelte:component this={tab.icon}></svelte:component>
29
- </Tab>
30
- {/each}
31
- </Tabs>
19
+ {#each tabs as tab}
20
+ <SidebarTab id={`tool-${tab.id}`} active={$activeid === tab.id} label={tab.tabname} on:click={() => {toggleActive(tab)}}>
21
+ <svelte:component this={tab.icon}/>
22
+ </SidebarTab>
23
+ {/each}
24
+ <div class="sidebardivider"></div>
25
+ {#each exttabs as tab}
26
+ <SidebarTab id={`tool-${tab.id}`} active={$activeid === tab.id} label={tab.tabname} on:click={() => {toggleActive(tab)}}>
27
+ <svelte:component this={tab.icon}/>
28
+ </SidebarTab>
29
+ {/each}
30
</div>
31
34
-<style>
32
+<style lang="scss">
33
#sidebar {
34
height: 100%;
35
min-width: 3rem;
36
border-right: 1px solid #333;
37
display: flex;
38
flex-direction: column;
41
- align-items: flex-start;
39
+ align-items: center;
40
justify-content: flex-start;
41
+ :global(svg) {
42
+ width: 24px;
43
+ height: 24px;
44
+ }
45
}
46
.sidebardivider {
47
width: 2rem;
@@ -48,8 +50,4 @@
50
margin: 5px 0 5px 0;
51
content: '';
52
}
51
- :global(.bx--tabs__nav-link svg) {
52
- width: 24px;
53
- height: 24px;
54
- }
53
</style>
src/components/Sidebar/Sidebar.ts
+17
-18
@@ -1,30 +1,29 @@
1
import { writable } from "svelte/store";
2
3
-let active = false;
4
-let activeid = -1;
5
-export let showtabview = writable(false);
6
-
7
-class SidebarTab {
3
+class Tool {
4
tabname: string;
5
content;
10
- constructor(tabname, content) {
6
+ constructor(tabname: string, content) {
7
this.tabname = tabname;
8
this.content = content;
9
}
10
}
15
-export let sidebartab = writable(new SidebarTab("", null));
11
17
-export const toggleActive = (tab) => {
18
- active = !active;
19
- if (activeid === tab.id) {
20
- activeid = -1;
21
- document.getElementById(`sidetab-${tab.id}`).parentElement.classList.remove("bx--tabs__nav-item--selected");
22
- showtabview.set(false);
12
+export let activeid = writable(-1);
13
+let active = -1;
14
+export let showsidebarview = writable(false);
15
+export let tool = writable(null);
16
+
17
+export const toggleActive = (tab: { id: any; tabname: any; icon: any, content: any }) => {
18
+ if (active === tab.id) {
19
+ active = -1;
20
+ activeid.set(-1);
21
+ showsidebarview.set(false);
22
}
23
else {
25
- activeid = tab.id;
26
- document.getElementById(`sidetab-${tab.id}`).parentElement.classList.add("bx--tabs__nav-item--selected");
27
- sidebartab.set(new SidebarTab(tab.tabname, tab.content));
28
- showtabview.set(true);
24
+ activeid.set(tab.id);
25
+ active = tab.id;
26
+ showsidebarview.set(true);
27
+ tool.set(new Tool(tab.tabname, tab.content));
28
}
30
-}
\ No newline at end of file
29
+}
src/components/Sidebar/SidebarTab.svelte
new
+27
@@ -0,0 +1,27 @@
1
+<script lang="ts">
2
+ export let id:string;
3
+ export let active = false;
4
+ export let label: string;
5
+</script>
6
+
7
+<!-- svelte-ignore a11y-click-events-have-key-events -->
8
+<div {id} class="sidebar-tab" class:active title={label} on:click>
9
+ <slot></slot>
10
+</div>
11
+
12
+<style lang="scss">
13
+ .sidebar-tab {
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ width: 100%;
18
+ height: 3rem;
19
+ cursor: pointer;
20
+ &.active {
21
+ box-shadow: inset -2px 0px 0 0 #4589ff;
22
+ }
23
+ &:hover {
24
+ background-color: #363636;
25
+ }
26
+ }
27
+</style>
\ No newline at end of file
src/components/Sidebar/SidebarView.svelte
+30
-4
@@ -1,15 +1,41 @@
1
<script lang="ts">
2
- let sidebar: HTMLElement;
2
+ export let title: string;
3
+ export let content = null;
4
</script>
4
-<div id="sidebarview" bind:this={sidebar}>
5
- <slot></slot>
5
+<div id="sidebarview">
6
+ <div class="tool-header">
7
+ <span>{title}</span>
8
+ </div>
9
+ {#if content}
10
+ <div id="tool-view">
11
+ <svelte:component this={content}></svelte:component>
12
+ </div>
13
+ {/if}
14
</div>
15
8
-<style>
16
+<style lang="scss">
17
#sidebarview {
18
height: 100%;
19
display: flex;
20
flex-direction: column;
21
align-items: center;
22
}
23
+ .tool-header {
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ width: 100%;
28
+ min-height: 2rem;
29
+ border-bottom: 1px solid #333;
30
+ }
31
+ #tool-view {
32
+ width: 100%;
33
+ overflow-y: auto;
34
+ &::-webkit-scrollbar {
35
+ width: 12px;
36
+ }
37
+ &::-webkit-scrollbar-thumb {
38
+ background-color: #4c4c4c38;
39
+ }
40
+ }
41
</style>
\ No newline at end of file