feat: text to describe what the open icon is for

Author: Dun-sin

index.html

@@ -351,15 +351,18 @@ <h2>
         </video>
       </section>
       <section id="generator">
-        <div class="open-sidebar">
-          <iconify-icon
-            inline
-            icon="lucide:sidebar-open"
-            style="color: white; cursor: pointer"
-            width="28"
-            height="28"
-          ></iconify-icon>
-          <span class="tooltip">Open</span>
+        <div class="open">
+          <p>Open Previous Results➡️</p>
+          <div class="open-sidebar">
+            <iconify-icon
+              inline
+              icon="lucide:sidebar-open"
+              style="color: white; cursor: pointer"
+              width="28"
+              height="28"
+            ></iconify-icon>
+            <span class="tooltip">Open</span>
+          </div>
         </div>
         <div class="generators">
           <!-- Pic Text -->

src/main.ts

@@ -51,6 +51,7 @@ const FINAL_WIDTH = 300;
 let attributeValue: string | null = null;
 let imageSRC: string;
 let imageHeight: number;
+
 const sideBarSlide = [
   {left: '30%', opacity: '0'},
   {left: '0%', opacity: '1'},
@@ -90,6 +91,9 @@ const getResultsButton = document.querySelectorAll('[data-button]');
 const getResultIcon = document.querySelector('.open-sidebar');
 const getHomePage = document.getElementById('home-page');
 const getGeneratorSection = document.getElementById('generator');
+const getOpenPreviousResult = document.querySelector(
+  '.open > p'
+) as HTMLElement;
 const results = document.querySelectorAll('[data-result]');
 const closeBar = document.getElementById('close-side-bar');
 const getImageEntryElement = document.getElementById(
@@ -295,6 +299,14 @@ function openOrCloseNavigationBar(state: 'open' | 'close') {
   }
 }
 
+function showOpenPreviousResultText() {
+  getOpenPreviousResult.style.display = 'block';
+  getOpenPreviousResult.style.animationName = 'showOpenPreviousResultText';
+  getOpenPreviousResult.style.animationDuration = '1500ms';
+  getOpenPreviousResult.style.animationTimingFunction = 'ease-in';
+  getOpenPreviousResult.style.animationFillMode = 'backwards';
+}
+
 document.addEventListener('click', (e: Event) => {
   const event = e.target as HTMLElement;
 
@@ -351,12 +363,17 @@ closeBar?.addEventListener('click', () => {
   setTimeout(() => {
     sidebar.style.display = 'none';
   }, 600);
+
+  setTimeout(() => {
+    showOpenPreviousResultText();
+  }, 200);
 });
 
 generators.forEach((generator) => {
   generator?.addEventListener('click', (): void => {
     const checking = generator.getAttribute('data-gen');
     openSidePanelButton.style.display = 'none';
+
     if (
       checking === null ||
       getHomePage === null ||
@@ -377,7 +394,7 @@ generators.forEach((generator) => {
 
 getResultsButton.forEach((getResult) => {
   getResult?.addEventListener('click', () => {
-    openSidePanelButton.style.display = 'block';
+    openSidePanelButton.style.display = 'flex';
 
     showResult(getResult.getAttribute('data-button'), 'newResults');
     sidebar.animate(sideBarSlide, sideBarTiming);

src/style.css

@@ -8,8 +8,6 @@
   --gradient-border-color-1: red;
   --gradient-border-color-2: blue;
 
-  /* Heights */
-
   /* Widths */
   --generator-width: clamp(300px, 80%, 50vw);
   --content-container: 100%;
@@ -237,14 +235,21 @@ main > section:first-of-type video {
 
 main > section:last-of-type {
   display: none;
+  position: relative;
 }
 
-.open-sidebar {
+.open {
+  display: flex;
+  align-items: center;
   position: absolute;
-  top: 20px;
+  top: 10px;
   right: 50px;
 }
 
+.open p {
+  opacity: 0;
+}
+
 .generators {
   min-height: var(--content-container);
   min-width: var(--content-container);
@@ -651,7 +656,7 @@ input[type='number']::-webkit-outer-spin-button {
 
 .open-sidebar > span.tooltip {
   position: relative;
-  bottom: -20px;
+  bottom: -35px;
   right: 40px;
   padding: 5px;
   width: 50px;
@@ -664,12 +669,6 @@ input[type='number']::-webkit-outer-spin-button {
   border-radius: 5px;
   display: none;
 }
-
-.open-sidebar > span.tooltip {
-  top: 5%;
-  left: -10px;
-}
-
 .close-sideBar .tooltip::before {
   content: '';
   position: absolute;
@@ -997,6 +996,15 @@ a {
   z-index: 10;
 }
 
+@keyframes showOpenPreviousResultText {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media screen and (max-width: 1010px) {
   :root {
     --input-width: 100%;