added sidebar
mellbacon committed
Apr 26, 2023 at 15:36 UTC
9186c003a97aec1929c0443d1d88396a8d4694d1
4 files changed
+96
-17
src/App.svelte
+2
-1
@@ -1,11 +1,12 @@
1
<script lang="ts">
2
import Header from "./lib/Header.svelte";
3
+ import Sidebar from "./lib/Sidebar.svelte";
4
5
</script>
6
7
<Header />
8
<div id="main">
8
-
9
+ <Sidebar />
10
</div>
11
<style>
12
#main {
src/lib/Sidebar.svelte
new
+54
@@ -0,0 +1,54 @@
1
+<script lang="ts">
2
+ import Folder from "carbon-icons-svelte/lib/Folder.svelte";
3
+ import SidebarTab from "./SidebarTab.svelte";
4
+
5
+ export let tabs = [
6
+ {id: 0, tabname: "Explorer", icon: Folder, content: "Git"}
7
+ ];
8
+</script>
9
+
10
+<div id="sidebar">
11
+ {#each tabs as tab}
12
+ <SidebarTab id={`tool-${tab.id}`} active={$activeid === tab.id} label={tab.tabname} on:click={() => {toggleActive(tab)}}>
13
+ <svelte:component this={tab.icon}/>
14
+ </SidebarTab>
15
+ {/each}
16
+</div>
17
+
18
+<script lang="ts" context="module">
19
+ import { writable } from "svelte/store";
20
+ class Tool {
21
+ tabname: string;
22
+ content;
23
+ constructor(tabname: string, content) {
24
+ this.tabname = tabname;
25
+ this.content = content;
26
+ }
27
+ }
28
+
29
+ export let activeid = writable(-1);
30
+ let active = -1;
31
+ export let showsidebarview = writable(false);
32
+ export let tool = writable(null);
33
+
34
+ export const toggleActive = (tab: { id: any; tabname: any; icon: any, content: any }) => {
35
+ if (active === tab.id) {
36
+ active = -1;
37
+ activeid.set(-1);
38
+ showsidebarview.set(false);
39
+ }
40
+ else {
41
+ activeid.set(tab.id);
42
+ active = tab.id;
43
+ showsidebarview.set(true);
44
+ tool.set(new Tool(tab.tabname, tab.content));
45
+ }
46
+ }
47
+</script>
48
+
49
+<style lang="scss">
50
+ #sidebar {
51
+ height: 100%;
52
+ min-width: 2.5rem;
53
+ }
54
+</style>
\ No newline at end of file
src/lib/SidebarTab.svelte
new
+25
@@ -0,0 +1,25 @@
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: 2.5rem;
19
+ cursor: pointer;
20
+ :global(svg) {
21
+ width: 20px;
22
+ height: 20px;
23
+ }
24
+ }
25
+</style>
\ No newline at end of file
src/theme.scss
+15
-16
@@ -1,5 +1,5 @@
1
$foreground: #ffffff;
2
-$window-background-color: #161616;
2
+$window-background-color: #171717;
3
$header-background-color: #2D2D2D;
4
5
$toolbar-button-hover-color: #414040;
@@ -10,6 +10,9 @@ $dropdownButtonText-hover-color: $foreground;
10
$dropdownItem-hover-color: $window-background-color;
11
$dropdownItemText-hover-color: $foreground;
12
13
+$tab-hover-color: #363636;
14
+$tabBorder-active-color: red;
15
+
16
$header-height: 2rem;
17
$footer-height: 1.6rem;
18
$tab-container-height: 2rem;
@@ -47,19 +50,15 @@ html {
50
height: calc(100vh - $header-height - 0.063rem);
51
}
52
50
-#footer {
51
- height: $footer-height;
52
-}
53
-.main {
54
- height: 100%;
55
-}
56
-#container > .splitpanes {
57
- height: calc(100% - $footer-height);
58
-}
59
-#editor-tabs{
60
- background-color: $window-background-color;
61
- min-height: $tab-container-height;
62
-}
63
-#tabview {
64
- padding-top: $tab-container-height;
53
+#sidebar {
54
+ border-right: 1px solid $border-color;
55
}
56
+
57
+.sidebar-tab {
58
+ &.active {
59
+ box-shadow: inset -2px 0px 0 0 $tabBorder-active-color;
60
+ }
61
+ &:hover {
62
+ background-color: $tab-hover-color;
63
+ }
64
+}
\ No newline at end of file