Add icons and icons' behavior

vtex · Sep 27, 2023 · e3c9cf6 · e3c9cf6
1 parent 39ba5d8
commit e3c9cf6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/content/internal.css b/content/internal.css
@@ -42,6 +42,10 @@ body {
 	background: var(--bg-1);
 }
 
+.item, .material-symbols-outlined {
+	vertical-align: middle;
+} 
+
 .wrapper .sidebar {
 	background: var(--bg-3);
 	position: fixed;

diff --git a/content/internal.html b/content/internal.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>VTEX Writing - Menu</title>
@@ -26,27 +27,27 @@
             <ul>
                 <li>
                     <a href="../index.html">
-                        <span class="item">Home</span>
+                        <span class="item"><span class="material-symbols-outlined">arrow_back</span> Home</span>
                     </a>
                 </li>
                 <li>
                     <a href="#" onclick="styleGuide()">
-                        <p class="item" id="styleGuides" onclick="expandItem(id)">Style Guides</p>
+                        <p class="item" id="styleGuides" onclick="expandItem(id)">Style Guides <span class="material-symbols-outlined" id="collapseStyleGuides">expand_more</span></p>
                     </a>
                 </li>
                 <li>
                     <a href="#" onclick="adminReviewLog()">
-                        <p class="item" id="reviewLogs" onclick="expandItem(id)">Admin Review Logs</p>
+                        <p class="item" id="reviewLogs" onclick="expandItem(id)">Admin Review Logs <span class="material-symbols-outlined" id="collapseReviewLogs">expand_more</span></p>
                     </a>
                 </li>
                 <li>
                     <a href="#">
-                        <p class="item" id="glossaries" onclick="expandItem(id)">Glossaries</p>
+                        <p class="item" id="glossaries" onclick="expandItem(id)">Glossaries <span class="material-symbols-outlined" id="collapseGlossaries">expand_more</span></p>
                     </a>
                 </li>
                 <li>
                     <a href="#">
-                        <p class="item" id="translationMemories" onclick="expandItem(id)">Translation Memories</p>
+                        <p class="item" id="translationMemories" onclick="expandItem(id)">Translation Memories <span class="material-symbols-outlined" id="collapseTranslationMemories">expand_more</span></p>
                     </a>
                 </li>
             </ul>

diff --git a/content/internal.js b/content/internal.js
@@ -31,10 +31,13 @@ function expandItem(id) {
 function expandStyleGuides() {
 	let item = document.getElementById("styleGuides");
 	let list = item.querySelector("ul");
+	let button = document.querySelector("#collapseStyleGuides");
 	if (list) {
 		item.removeChild(list);
+		button.textContent = "expand_more";
 		}
 	else {
+		button.textContent = "expand_less";
 		list = document.createElement("ul");
 		let listItem1 = document.createElement("li");
 		listItem1.innerText = "Item 1";
@@ -62,10 +65,13 @@ function expandStyleGuides() {
 function expandReviewLogs() {
 	let item = document.getElementById("reviewLogs");
 	let list = item.querySelector("ul");
+	let button = document.querySelector("#collapseReviewLogs");
 	if (list) {
 		item.removeChild(list);
+		button.textContent = "expand_more"
 		}
 	else {
+		button.textContent = "expand_less";
 		list = document.createElement("ul");
 		let listItem1 = document.createElement("li");
 		listItem1.innerText = "Item 1";
@@ -82,10 +88,13 @@ function expandReviewLogs() {
 function expandGlossaries() {
 	let item = document.getElementById("glossaries");
 	let list = item.querySelector("ul");
+	let button = document.querySelector("#collapseGlossaries");
 	if (list) {
 		item.removeChild(list);
+		button.textContent = "expand_more";
 		}
 	else {
+		button.textContent = "expand_less";
 		list = document.createElement("ul");
 		let listItem1 = document.createElement("li");
 		listItem1.innerText = "Item 1";
@@ -102,10 +111,13 @@ function expandGlossaries() {
 function expandTranslationMemories() {
 	let item = document.getElementById("translationMemories");
 	let list = item.querySelector("ul");
+	let button = document.querySelector("#collapseTranslationMemories");
 	if (list) {
 		item.removeChild(list);
+		button.textContent = "expand_more";
 		}
 	else {
+		button.textContent = "expand_less";
 		list = document.createElement("ul");
 		let listItem1 = document.createElement("li");
 		listItem1.innerText = "Item 1";