WIP: styling menu

vtex · Sep 29, 2023 · bde926c · bde926c
1 parent 29b682d
commit bde926c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/content/internal.css b/content/internal.css
@@ -71,11 +71,11 @@ body {
 	position: relative;
 }
 
-.wrapper .sidebar ul li a:hover,
+/* .wrapper .sidebar ul li a:hover,
 .wrapper .sidebar ul li a.active {
 	color: var(--bg-5);
 	font-family: var(--ff-bold);
-}
+} */
 
 .wrapper .section {
 	width: calc(100% - 14rem);
@@ -123,4 +123,31 @@ iframe {
 	width: 100%;
 	height: 100vh;
 	border: none;
-}
+}
+
+p {
+	font-weight: bold;
+}
+
+#styleGuides > ul > li,
+#reviewLogs > ul > li,
+#glossaries > ul > li,
+#translationMemories > ul > li {
+	margin-left: 1.5rem;
+	padding: 0.3rem;
+}
+
+#styleGuides > ul > li:hover,
+#reviewLogs > ul > li:hover,
+#glossaries > ul > li:hover,
+#translationMemories > ul > li:hover {
+	color: var(--bg-5);
+}
+
+/* Tentando fazer com que somente as linhas principais do menu tenham hover, sem afetar seus submenus:
+#styleGuides:not(:has(*)):hover,
+#reviewLogs:not(:has(*)):hover,
+#glossaries:not(:has(*)):hover,
+#translationMemories:not(:has(*)):hover {
+  color: var(--bg-5);
+} */
diff --git a/content/internal.html b/content/internal.html
@@ -3,9 +3,10 @@
 <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" />
+    <link rel="icon" type="image/png" href="https://vtex.com/wp-content/uploads/2018/05/cropped-apple-icon-60x60-32x32.png">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VTEX Writing - Menu</title>
+    <title>VTEX Writing - Contents</title>
     <link rel="stylesheet" href="internal.css">
     <script src="internal.js" defer></script>
 </head>
@@ -27,27 +28,27 @@
             <ul>
                 <li>
                     <a href="../index.html">
-                        <span class="item"><span class="material-symbols-outlined">arrow_back</span> Home</span>
+                        <p class="item"><span class="material-symbols-outlined">arrow_back</span> Home</p>
                     </a>
                 </li>
                 <li>
                     <a href="#">
-                        <p class="item" id="styleGuides" onclick="expandItem(id)">Style Guides <span class="material-symbols-outlined" id="collapseStyleGuides">expand_more</span></p>
+                        <p class="item" id="styleGuides" onclick="expandItem(id)"><span class="material-symbols-outlined" id="collapseStyleGuides">expand_more</span> Style Guides</p>
                     </a>
                 </li>
                 <li>
                     <a href="#">
-                        <p class="item" id="reviewLogs" onclick="expandItem(id)">Admin Review Logs <span class="material-symbols-outlined" id="collapseReviewLogs">expand_more</span></p>
+                        <p class="item" id="reviewLogs" onclick="expandItem(id)"><span class="material-symbols-outlined" id="collapseReviewLogs">expand_more</span> Admin Review Logs</p>
                     </a>
                 </li>
                 <li>
                     <a href="#">
-                        <p class="item" id="glossaries" onclick="expandItem(id)">Glossaries <span class="material-symbols-outlined" id="collapseGlossaries">expand_more</span></p>
+                        <p class="item" id="glossaries" onclick="expandItem(id)"><span class="material-symbols-outlined" id="collapseGlossaries">expand_more</span> Glossaries</p>
                     </a>
                 </li>
                 <li>
                     <a href="#">
-                        <p class="item" id="translationMemories" onclick="expandItem(id)">Translation Memories <span class="material-symbols-outlined" id="collapseTranslationMemories">expand_more</span></p>
+                        <p class="item" id="translationMemories" onclick="expandItem(id)"><span class="material-symbols-outlined" id="collapseTranslationMemories">expand_more</span> Translation Memories</p>
                     </a>
                 </li>
             </ul>

diff --git a/content/internal.js b/content/internal.js
@@ -10,15 +10,15 @@ function handleInternal() {
 		expandItem("styleGuides");
     }
     else if (currentUrl.includes("glossaries")) {
-        document.getElementById("main-frame").src = "./loc_admin_review_logs/Admin String Standardization - EN/VTEXAdminstringstandardizationinEnglish.html"; //temporary link
-		expandItem("glossaries");
+        document.getElementById("main-frame").src = ""; //temporary link
+		// expandItem("glossaries");
     }
     else if (currentUrl.includes("reviewLogs")) {
-        document.getElementById("main-frame").src = "./loc_admin_review_logs/Admin String Standardization - EN/VTEXAdminstringstandardizationinEnglish.html"; //temporary link
+        document.getElementById("main-frame").src = "./loc_admin_review_logs/Admin String Standardization - EN/VTEXAdminstringstandardizationinEnglish.html";
 		expandItem("reviewLogs");
     }
     else if (currentUrl.includes("translationMemories")) {
-        document.getElementById("main-frame").src = "./loc_admin_review_logs/Admin String Standardization - EN/VTEXAdminstringstandardizationinEnglish.html"; //temporary link
+        document.getElementById("main-frame").src = ""; //temporary link
 		expandItem("translationMemories");
     }
 }
@@ -51,21 +51,22 @@ function expandStyleGuides() {
 		button.textContent = "expand_less";
 		list = document.createElement("ul");
 		let listItem1 = document.createElement("li");
-		listItem1.innerText = "Item 1";
+		listItem1.innerText = "EN Localization";
 		let listItem2 = document.createElement("li");
-		listItem2.innerText = "Item 2";
+		listItem2.innerText = "ES Localization";
 		let listItem3 = document.createElement("li");
-		listItem3.innerText = "Item 3";
+		listItem3.innerText = "PT Localization";
 		let listItem4 = document.createElement("li");
-		listItem4.innerText = "Item 4";
+		listItem4.innerText = "EN Marketing";
 		let listItem5 = document.createElement("li");
-		listItem5.innerText = "Item 5";
+		listItem5.innerText = "ES Marketing";
 		let listItem6 = document.createElement("li");
-		listItem6.innerText = "Item 6";
+		listItem6.innerText = "PT Marketing";
 
 		let items = [listItem1, listItem2, listItem3, listItem4, listItem5, listItem6]
 
 		items.forEach(item => {
+			item.style.fontWeight = "regular";
 			list.appendChild(item);
 		})
 
@@ -85,11 +86,11 @@ function expandReviewLogs() {
 		button.textContent = "expand_less";
 		list = document.createElement("ul");
 		let listItem1 = document.createElement("li");
-		listItem1.innerText = "Item 1";
+		listItem1.innerText = "EN Admin Standardization";
 		let listItem2 = document.createElement("li");
-		listItem2.innerText = "Item 2";
+		listItem2.innerText = "ES Admin Standardization";
 		let listItem3 = document.createElement("li");
-		listItem3.innerText = "Item 3";
+		listItem3.innerText = "PT Admin Standardization";
 		list.appendChild(listItem1);
 		list.appendChild(listItem2);
 		list.appendChild(listItem3);

diff --git a/index.html b/index.html
@@ -53,7 +53,7 @@ <h6>Admin Review Logs</h6>
             </a>
         </div>
         <div class="card" title="Translation Memories" id="translationMemories">
-            <a href="content/internal.html/id=translationMemories">
+            <a href="content/internal.html?id=translationMemories">
             <div class="upper">
                 <span class="material-symbols-outlined">translate</span>
             </div>