feat: top bar, hide sidebar (with animation)

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",

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;
 }

src/lib/components/Block.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   export let className = "";
+  export let draggable = false;
 </script>
 
 <div class="block{className ? ` ${className}` : ''}">

src/lib/components/TopBar.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import ArrowLeft from "$lib/icons/ArrowLeft.svelte";
+  import ArrowRight from "$lib/icons/ArrowRight.svelte";
+  import Reload from "$lib/icons/Reload.svelte";
+  import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
+  import SidebarRight from "$lib/icons/SidebarRight.svelte";
+  import Button from "./Button.svelte";
+
+  export let onSidebarToggle = () => {};
+  export let onBack = () => {};
+  export let onForward = () => {};
+  export let onInput = () => {};
+
+  export let sidebarOpen = true;
+  export let inputValue = "";
+
+  let input: HTMLInputElement;
+</script>
+
+<div class="top-bar">
+  <div class="flex bg-block p-2 rounded-xl">
+    <Button onClick={onSidebarToggle}>
+      {#if sidebarOpen}
+        <SidebarLeft />
+      {:else}
+        <SidebarRight />
+      {/if}
+    </Button>
+    <Button onClick={onBack}><ArrowLeft /></Button>
+    <Button onClick={onForward}><ArrowRight /></Button>
+    <Button onClick={onInput}><Reload /></Button>
+  </div>
+
+  <input
+    type="text"
+    placeholder="Search or enter URL"
+    class="search-input"
+    bind:value={inputValue}
+    bind:this={input}
+    on:keypress={(e) => e.key === "Enter" && onInput()}
+    on:focus={() => setTimeout(() => input.select(), 1)}
+  />
+</div>

src/lib/icons/ArrowLeft.svelte

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    d="M4 12h16M9 17s-5-3.682-5-5s5-5 5-5"
+    color="currentColor"
+  />
+</svg>

src/lib/icons/ArrowRight.svelte

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    d="M20 12H4m11 5s5-3.682 5-5s-5-5-5-5"
+    color="currentColor"
+  />
+</svg>

src/lib/icons/Reload.svelte

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    d="m15.167 1l.598 1.118c.404.755.606 1.133.472 1.295c-.133.162-.573.031-1.454-.23A9.8 9.8 0 0 0 12 2.78c-5.247 0-9.5 4.128-9.5 9.22a8.97 8.97 0 0 0 1.27 4.61M8.834 23l-.598-1.118c-.404-.756-.606-1.134-.472-1.295c.133-.162.573-.032 1.454.23c.88.261 1.815.402 2.783.402c5.247 0 9.5-4.128 9.5-9.22a8.97 8.97 0 0 0-1.27-4.609"
+    color="currentColor"
+  />
+</svg>

src/lib/icons/SidebarLeft.svelte

@@ -0,0 +1,23 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    color="currentColor"
+  >
+    <path
+      d="M2 12c0-3.75 0-5.625.955-6.939A5 5 0 0 1 4.06 3.955C5.375 3 7.251 3 11 3h2c3.75 0 5.625 0 6.939.955a5 5 0 0 1 1.106 1.106C22 6.375 22 8.251 22 12s0 5.625-.955 6.939a5 5 0 0 1-1.106 1.106C18.625 21 16.749 21 13 21h-2c-3.75 0-5.625 0-6.939-.955a5 5 0 0 1-1.106-1.106C2 17.625 2 15.749 2 12m7.5-8.5v17M5 7h1.5M5 11h1.5"
+    />
+    <path
+      d="m17 10l-1.226 1.057c-.516.445-.774.667-.774.943s.258.498.774.943L17 14"
+    />
+  </g>
+</svg>

src/lib/icons/SidebarRight.svelte

@@ -0,0 +1,23 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    color="currentColor"
+  >
+    <path
+      d="M22 12c0-3.75 0-5.625-.955-6.939a5 5 0 0 0-1.106-1.106C18.625 3 16.749 3 13 3h-2c-3.75 0-5.625 0-6.939.955A5 5 0 0 0 2.955 5.06C2 6.375 2 8.251 2 12s0 5.625.955 6.939a5 5 0 0 0 1.106 1.106C5.375 21 7.251 21 11 21h2c3.75 0 5.625 0 6.939-.955a5 5 0 0 0 1.106-1.106C22 17.625 22 15.749 22 12m-7.5-8.5v17M19 7h-1.5m1.5 4h-1.5"
+    />
+    <path
+      d="m8 10l1.227 1.057c.515.445.773.667.773.943s-.258.498-.773.943L8 14"
+    />
+  </g>
+</svg>

src/routes/+page.svelte

@@ -1,16 +1,36 @@
-<script>
-  import Block from "$lib/components/Block.svelte";
-  import WindowControls from "$lib/components/WindowControls.svelte";
+<script lang="ts">
   import "../app.css";
+
+  import Block from "$lib/components/Block.svelte";
+  import TopBar from "$lib/components/TopBar.svelte";
+  import WindowControls from "$lib/components/WindowControls.svelte";
+  import { slide } from "svelte/transition";
+
+  let sidebarOpen = true;
+
+  document.addEventListener("keypress", (e: KeyboardEvent) => {
+    const formElements = ["INPUT", "TEXTAREA", "SELECT", "OPTION"];
+    if (formElements.includes((e.target as Element).tagName)) {
+      return;
+    }
+    if (e.key === "q") sidebarOpen = !sidebarOpen;
+  });
 </script>
 
 <div class="common-window" data-tauri-drag-region>
-  <Block className="sidebar">
+  <Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`}>
+    {#if sidebarOpen}
+      <div transition:slide={{ axis: "x", duration: 100 }}>
         <WindowControls />
+      </div>
+    {/if}
   </Block>
-  <div class="main-window">
-    <Block className="top-bar">Top bar</Block>
 
+  <div class="main-window">
+    <TopBar
+      bind:sidebarOpen
+      onSidebarToggle={() => (sidebarOpen = !sidebarOpen)}
+    />
     <Block className="browser-window">Browser window</Block>
   </div>
 </div>

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)",
       },
     },
   },