diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 97d4060..7cddf52 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -42,7 +42,7 @@
"bundle": {
"active": true,
"targets": "all",
- "identifier": "com.tauri.dev",
+ "identifier": "org.txtdot.vigi",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
diff --git a/src/app.css b/src/app.css
index bf5a56a..e80461b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8,23 +8,27 @@
--c2: #73bf67;
--c3: #193815;
+ --c4: #56aa49;
+ --c5: #96e28a;
}
body {
@apply bg-main text-main;
+ user-select: none;
}
.common-window {
@apply p-3 gap-3 w-screen h-screen;
- @apply grid grid-cols-8;
+ @apply flex;
}
.main-window {
- @apply col-span-6 flex flex-col gap-3;
+ @apply grow flex flex-col gap-3;
}
.browser-window {
@apply grow shadow-inner;
+ user-select: text;
}
.window-controls {
@@ -46,5 +50,35 @@ body {
}
.sidebar {
- @apply col-span-2;
+ @apply basis-1/5;
+ @apply ease-out duration-100;
+}
+
+.sidebar.collapsed {
+ @apply basis-0;
+
+ @apply p-0 m-0;
+}
+
+.top-bar {
+ @apply flex;
+}
+
+.search-input {
+ @apply ms-2 px-2 py-1 rounded-lg grow;
+}
+
+input {
+ @apply bg-block outline-none;
+ @apply focus:bg-blockLight focus:text-light;
+
+ @apply ease-out duration-100;
+}
+
+input::placeholder {
+ @apply text-main focus:text-light;
+}
+
+::selection {
+ @apply bg-block;
}
diff --git a/src/lib/components/Block.svelte b/src/lib/components/Block.svelte
index 46ee525..aae94d2 100644
--- a/src/lib/components/Block.svelte
+++ b/src/lib/components/Block.svelte
@@ -1,5 +1,6 @@
diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte
new file mode 100644
index 0000000..5690865
--- /dev/null
+++ b/src/lib/components/TopBar.svelte
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
e.key === "Enter" && onInput()}
+ on:focus={() => setTimeout(() => input.select(), 1)}
+ />
+
diff --git a/src/lib/icons/ArrowLeft.svelte b/src/lib/icons/ArrowLeft.svelte
new file mode 100644
index 0000000..1fd3109
--- /dev/null
+++ b/src/lib/icons/ArrowLeft.svelte
@@ -0,0 +1,17 @@
+
diff --git a/src/lib/icons/ArrowRight.svelte b/src/lib/icons/ArrowRight.svelte
new file mode 100644
index 0000000..6711d87
--- /dev/null
+++ b/src/lib/icons/ArrowRight.svelte
@@ -0,0 +1,17 @@
+
diff --git a/src/lib/icons/Reload.svelte b/src/lib/icons/Reload.svelte
new file mode 100644
index 0000000..47377a0
--- /dev/null
+++ b/src/lib/icons/Reload.svelte
@@ -0,0 +1,17 @@
+
diff --git a/src/lib/icons/SidebarLeft.svelte b/src/lib/icons/SidebarLeft.svelte
new file mode 100644
index 0000000..7ab6adf
--- /dev/null
+++ b/src/lib/icons/SidebarLeft.svelte
@@ -0,0 +1,23 @@
+
diff --git a/src/lib/icons/SidebarRight.svelte b/src/lib/icons/SidebarRight.svelte
new file mode 100644
index 0000000..8e151ac
--- /dev/null
+++ b/src/lib/icons/SidebarRight.svelte
@@ -0,0 +1,23 @@
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 28433ab..f6173b2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,36 @@
-
-
-
+
+ {#if sidebarOpen}
+
+
+
+ {/if}
-
-
Top bar
+
+ (sidebarOpen = !sidebarOpen)}
+ />
Browser window
diff --git a/tailwind.config.js b/tailwind.config.js
index a8d4053..31c080d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,9 +8,11 @@ export default {
block: "var(--c1)",
light: "var(--c2)",
dark: "var(--c3)",
+ blockLight: "var(--c4)",
},
textColor: {
main: "var(--c2)",
+ light: "var(--c5)",
},
},
},