Start work on animation engine.

assets/applet.js

@@ -0,0 +1,62 @@
+import { dom_manager } from "./functions.js";
+
+class applet {
+    #show;
+    #hide;
+    #current;
+    #animation;
+    #target;
+
+    #change() {
+        
+    }
+
+    #visible(animate = true) {
+        if (animate) {
+            this.#animation(true);
+        }
+    }
+
+    #unvisible(animate = true) {
+        if (animate) {
+            this.#animation(this.false);
+        }
+    }
+
+    #activate() {
+        if (this.#hide === undefined) {
+            this.#show.addEventListener("click", () => this.#change());
+        } else {
+            this.#show.addEventListener("click", () => this.#visible());
+            this.#hide.addEventListener("click", () => this.#unvisible());
+        }
+
+        if (this.#current) {
+            this.#visible(false);
+        } else {
+            this.#unvisible(false);
+        }
+    }
+
+    constructor(target, change, current, animation) {
+        this.#current = current;
+        this.#show = change;
+        this.#animation = animation;
+        this.#target = target;
+        this.#hide = undefined;
+
+        this.#activate();
+    }
+
+    constructor(target, show, hide, current, animation) {
+        this.#current = current;
+        this.#show = show;
+        this.#hide = hide;
+        this.#animation = animation;
+        this.#target = target;
+
+        this.#activate();
+    }
+}
+
+export { applet };

assets/core.js

@@ -0,0 +1,5 @@
+import { applet } from "./applet.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+    
+});

functions.js

@@ -0,0 +1,13 @@
+class dom_manager {
+    static is_element(target) {
+        return target instanceof HTMLElement;
+    }
+
+    static validate_element(target) {
+        if (!self.is_element(target)) {
+            throw "Parameter must be HTMLElement.";
+        }
+    }
+}
+
+export { dom_manager };

theme/top_bar.css

@@ -62,9 +62,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: color 0.5s, background-color 0.5s;
 }
 
 .top-bar .search-bar button span {
     font-size: calc(var(--font-size) * 1.5);
     display: block;
 }
+
+.top-bar .search-bar button:hover {
+    color: var(--font-color);
+    background-color: var(--top-bar-color);
+}