animation

src-tauri/src/data.rs

@@ -49,5 +49,11 @@ pub fn get_notes_list(search: &str) -> Vec<Note> {
 
         notes.push(_note);
     }
+
     return notes;
 }
+
+#[tauri::command]
+fn create_note() {
+    
+}

src/index.html

@@ -37,17 +37,18 @@
     </header>
   <div class="center-page-content">
 
-    <div class="grid-container-horizontal notes-sidebar" style="width: 40%; max-width: 25rem; min-width: 15rem;">
+    <div id="left-column" class="grid-container-horizontal notes-sidebar" style="width: 40%; max-width: 25rem; min-width: 15rem;">
       <div class="grid-container-vertical toolbar">
+        <div class="toolbar-action"></div>
         <div style="height: 3rem;">
-          <div style="margin-left: 0.8rem;" class="button no-hover">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
-              <path d="M3,18V16H21v2H3Zm0-5V11H21v2H3ZM3,8V6H21V8H3Z" />
+          <div style="margin-left: 0.8rem;" class="button no-hover" onclick="toggle_menu();">
+            <svg id="toggle-left-bar-icon" style="transition: 0.5s fill ease, 0.5s rotate ease; rotate: 270deg;" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
+              <path d="M17,16V7H8V5H19V16H17Zm-5,5V12H3V10H14V21H12Z" />
             </svg>
 
           </div>
           <p style="font-weight: bold; "></p>
-          <div style="margin-right: 0.8rem" class="button no-hover" onclick="toggle_search();">
+          <div id="toggle-search" style="margin-right: 0.8rem" class="button no-hover" onclick="toggle_search();">
             <svg id="search_quit_icon" class="icon-accent" style="display: block;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
               height="24px" width="24px">
               <path
@@ -59,14 +60,16 @@
           <input type="text" placeholder="Search..." style="width: 100%; margin: 0 0.8rem;" oninput="on_search_input()" id="search_input" />
         </div>
       </div>
-      <div class="divider"></div>
+      <div id="left-column-divider" class="divider"></div>
       <div class="notes-list-parent">
         <div class="notes-list">
           
         </div>
       </div>
     </div>
-    <div class="grid-container-horizontal" style="border-left: 0;"></div>
+    <div class="grid-container-horizontal" style="border-left: 0; width: 100%;">
+
+    </div>
   </div>
 
   <div class="hover-button button" onclick="create_new_note();">

src/main.js

@@ -9,6 +9,7 @@ document.querySelector("#minimize-window").addEventListener("click", () => appWi
 document.querySelector("#maximize-window").addEventListener("click", () => appWindow.toggleMaximize());
 document.querySelector("#close-window").addEventListener("click", () => appWindow.close());
 
+let menuBarToggled = false;
 let greetInputEl;
 let greetMsgEl;
 
@@ -19,6 +20,48 @@ window.addEventListener('contextmenu', (e) => {
 });
 
 
+function toggle_menu() {
+  let leftColumn = document.querySelector("#left-column");
+  let toggleSearch = document.querySelector("#toggle-search");
+  let searchBar = document.querySelector("#search_bar");
+  let leftColumnDivider = document.querySelector("#left-column-divider");
+  let notesListParent = document.querySelector(".notes-list-parent");
+  let leftBarIcon = document.querySelector("#toggle-left-bar-icon");
+  let toolBar = document.querySelector(".toolbar");
+
+  if (!menuBarToggled) {
+    notesListParent.style.transition = '';
+    toggleSearch.style.transition = '';
+    leftColumn.style.minWidth = '4rem';
+    leftColumn.style.width = '4rem';
+    leftBarIcon.style.rotate = '90deg';
+    leftBarIcon.style.fill = 'var(--color-accent)'
+    toggleSearch.style.opacity = '0%';
+    searchBar.style.display = 'none';
+    leftColumnDivider.style.display = 'none'; 
+    notesListParent.style.opacity = '0%';
+    toolBar.style.borderBottomLeftRadius = '20px';
+    toolBar.style.borderBottomRightRadius = '20px';
+  } else {
+    notesListParent.style.transition = '0.25s opacity ease 0.2s';
+    toggleSearch.style.transition = '0.25s opacity ease 0.2s';
+    leftBarIcon.style.fill = 'var(--color-icon)'
+    leftBarIcon.style.rotate = '270deg';
+    leftColumn.style.minWidth = '15rem';
+    toggleSearch.style.display = 'inline-block';
+    searchBar.style.display = 'flex';
+    leftColumnDivider.style.display = 'block';
+    leftColumn.style.width = '40%';
+    toggleSearch.style.opacity = '100%';
+    notesListParent.style.display = 'block'; 
+    notesListParent.style.opacity = '100%';
+    toolBar.style.borderBottomLeftRadius = '0';
+    toolBar.style.borderBottomRightRadius = '10px';
+  }
+
+  menuBarToggled = !menuBarToggled;
+}
+
 function toggle_search() {
   document.querySelector("#search_input").value = "";
 

src/styles_default.css

@@ -148,7 +148,6 @@ input[type="text"] {
   color: var(--color-text);
   outline: none;
   padding: 0.5rem 1rem;
-
 }
 
 input:focus {
@@ -177,12 +176,17 @@ input:focus {
   flex-direction: column;
 }
 
+#left-column {
+  transition: width 0.2s ease, min-width 0.2s ease;
+}
+
 .grid-container-vertical {
   background-color: var(--color-surface);
   width: 100%;
 }
 
 .toolbar {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -190,6 +194,19 @@ input:focus {
   user-select: none;
   -webkit-user-select: none;
   border-bottom-right-radius: 10px;
+  transition: 0.2s border-bottom-left-radius ease;
+}
+
+.toolbar-action {
+  position: absolute;
+  background-color: var(--color-surface);
+  mask: radial-gradient(ellipse 100% 100% at 100% 100%, transparent 100%, #000 100%) bottom right;
+  mask-repeat: no-repeat;
+  width: 1rem;
+  height: 1rem;
+  top: 0;
+  right: 0;
+  transform: translateX(100%);
 }
 
 .toolbar div {