sidebar functionality

Author: hannahliu123

css/editor.css

@@ -142,12 +142,12 @@ button:active {
 #edit-panel {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 15px;
     background-color: var(--edit-bg);
     max-width: 20vw;
     min-width: 250px;
     overflow-y: scroll;
-    padding: 0px 15px;
+    padding: 10px 15px 20px 15px;
     border-right: 1px solid rgba(0, 0, 0, 0.25);
 }
 
@@ -171,14 +171,6 @@ button:active {
     border: 1px dashed black;
 }
 
-#help-icons {
-    border: 2px solid red;
-}
-
-#layout-icons {
-    border: 2px solid orange;
-}
-
 .input-container {
     display: flex;
     align-items: center;
@@ -190,22 +182,6 @@ button:active {
     width: 50%;
 }
 
-#notes-icons {
-    border: 2px solid yellow;
-}
-
-#articulations-icons {
-    border: 2px solid green;
-}
-
-#dynamics-icons {
-    border: 2px solid cyan;
-}
-
-#special-symbols-icons {
-    border: 2px solid purple;
-}
-
 #sheet-wrapper {
     flex: 1;
     display: flex;

index.html

@@ -28,27 +28,27 @@
             </div>
             <div id="main-section">
                 <div id="sidebar">
-                    <div class="section">
+                    <div class="section" data-target="help-icons">
                         <!-- some icon -->
                         <p>Help</p>
                     </div>
-                    <div class="section">
+                    <div class="section" data-target="layout-icons">
                         <!-- some icon -->
                         <p>Layout</p>
                     </div>
-                    <div class="section">
+                    <div class="section" data-target="notes-icons">
                         <!-- some icon -->
                         <p>Notes</p>
                     </div>
-                    <div class="section">
+                    <div class="section" data-target="articulations-icons">
                         <!-- some icon -->
                         <p>Articulations</p>
                     </div>
-                    <div class="section">
+                    <div class="section" data-target="dynamics-icons">
                         <!-- some icon -->
                         <p>Dynamics</p>
                     </div>
-                    <div class="section">
+                    <div class="section" data-target="special-symbols-icons">
                         <!-- some icon -->
                         <p>Special Symbols</p>
                     </div>
@@ -129,12 +129,15 @@ <h4 id="notes-header" class="edit-panel-headers">Notes/Symbols</h4>
                     </div>
                     <div id="articulations-icons">
                         <h4 id="articulations-header" class="edit-panel-headers">Articulations</h4>
+                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iste cumque quos ducimus hic incidunt fugit cum dolore dicta, neque sequi, voluptatum quaerat iusto esse. Similique doloribus dolorem saepe nemo!</p>
                     </div>
                     <div id="dynamics-icons">
                         <h4 id="dynamics-header" class="edit-panel-headers">Dynamics</h4>
+                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iste cumque quos ducimus hic incidunt fugit cum dolore dicta, neque sequi, voluptatum quaerat iusto esse. Similique doloribus dolorem saepe nemo!</p>
                     </div>
                     <div id="special-symbols-icons">
                         <h4 id="special-symbols-header" class="edit-panel-headers">Special Symbols</h4>
+                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iste cumque quos ducimus hic incidunt fugit cum dolore dicta, neque sequi, voluptatum quaerat iusto esse. Similique doloribus dolorem saepe nemo!</p>
                     </div>
                 </div>
                 <!-- Sheet Music -->

scripts/editor.js

@@ -1,2 +1,25 @@
 // Sidebar resizing (later)
 // also change sidebar section bg color based on what section you're in (kinda like Scratch)
+
+// Jump to section in editor panel
+const sections = document.querySelectorAll(".section");
+sections.forEach(section => {
+    const editPanelContainer = document.getElementById("edit-panel");
+    section.addEventListener("click", () => {
+        const targetId = section.dataset.target;
+        const targetElement = document.getElementById(targetId);
+        const target = targetElement.getBoundingClientRect().top + editPanelContainer.scrollTop - 90;
+        editPanelContainer.scrollTo({ top: target, behavior: "smooth" });
+    });
+});
+
+// Input areas change on "enter" b/c it's more logical :)
+const blurs = document.querySelectorAll(".blur");
+blurs.forEach(input => {
+    input.addEventListener("keydown", e => {
+        if (e.key === "Enter") {
+            e.preventDefault;
+            input.blur();    // blur means "losing focus" so you just exit out of the input box
+        }
+    });
+});

scripts/svg.js

@@ -109,17 +109,6 @@ icons.forEach(icon => {
     });
 });
 
-// Input areas change on "enter" b/c it's more logical :)
-const blurs = document.querySelectorAll(".blur");
-blurs.forEach(input => {
-    input.addEventListener("keydown", e => {
-        if (e.key === "Enter") {
-            e.preventDefault;
-            input.blur();    // blur means "losing focus" so you just exit out of the input box
-        }
-    });
-});
-
 // Adding/Removing Pages
 document.getElementById("add-page-btn").addEventListener("click", addPage);
 document.getElementById("remove-page-btn").addEventListener("click", removePage);