unified topbar + new hamburger icon

src/SEQTA.js

@@ -1294,6 +1294,17 @@ async function AddBetterSEQTAElements(toggle) {
         
         updateAllColors(DarkMode, result.selectedColor);
 
+        // Locate the menuToggle element
+        const menuToggle = document.getElementById("menuToggle");
+        menuToggle.innerHTML = "";
+
+        // Create three divs to act as lines of the hamburger icon
+        for (let i = 0; i < 3; i++) {
+          const line = document.createElement("div");
+          line.className = "hamburger-line";
+          menuToggle.appendChild(line);
+        }
+        
         document.getElementById("LightDarkModeButton").addEventListener("click", async () => {
           const result = await new Promise(resolve => {
             chrome.storage.local.get(null, resolve);
@@ -1320,6 +1331,7 @@ async function AddBetterSEQTAElements(toggle) {
       var extensionsettings = document.getElementById("ExtensionPopup");
 
       AddedSettings.addEventListener("click", function () {
+        extensionsettings.contentWindow.postMessage("popupClosed", "*");
         extensionsettings.classList.toggle("hide");
         SettingsClicked = true;
       });

src/inject/injected.css

@@ -35,6 +35,7 @@ html {
 
 #main {
   color: var(--text-primary);
+  position: relative;
   padding-top: 5rem;
 }
 
@@ -144,7 +145,6 @@ ul.magicDelete > li.deleting {
   color: var(--text-color);
   border-right: none;
   font-family: Rubik, sans-serif !important;
-  z-index: 11 !important;
 }
 
 #menu li > label > svg,
@@ -308,11 +308,13 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 }
 
 #container #content {
-  border-radius: 16px;
   bottom: unset !important;
   height: 100%;
-  -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
+}
-  box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
+
+.menuShown #container #content #title {
+  -webkit-box-shadow: 6px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
+  box-shadow: 6px 0px 4px 2px rgba(0, 0, 0, 0.2) !important;
 }
 
 #container #content #title {
@@ -474,14 +476,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   min-height: 8rem !important;
 }
 
-/* .student #menu::before {
+.student #menu > ul::before {
-  background: var(--better-main);
-  top: 0;
-  position: sticky;
-  height: 16px;
-} */
-
-/* .student #menu > ul::before {
   background-image: var(--betterseqta-logo);
   position: -webkit-sticky;
   position: sticky;
@@ -490,15 +485,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   height: 69.5px;
   webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
-} */
-
-.student #menu > ul::before {
-  background: none;
-  height: 0;
-}
-
-.student #menu > ul {
-  margin-top: 70px;
 }
 
 .assessmentsWrapper .message {
@@ -519,9 +505,25 @@ div > ol:has(.uiFileHandlerWrapper) {
   background: unset;
 }
 
+@media (max-width: 420px) {
+  .userInfo {
+    display: none !important;
+  }
+}
+
+@media (max-width: 490px) {
+  .userInfohouse {
+    display: none;
+  }
+}
+
 @media (max-width: 900px) {
   #menuToggle {
-    visibility: visible;
+    display: block !important;
+  }
+
+  #title::before {
+    display: none;
   }
 
   #menu {
@@ -605,9 +607,9 @@ div > ol:has(.uiFileHandlerWrapper) {
   --colour: unset;
 }
 
-/* #title span {
+#title span {
   display: none;
-} */
+}
 
 #editmenu {
   display: none;
@@ -616,18 +618,39 @@ div > ol:has(.uiFileHandlerWrapper) {
 #title {
   background: var(--background-primary);
   color: var(--text-primary);
+  display: flex;
+  justify-content: space-between;
+  padding-right: 56px !important;
   height: 4rem;
   min-height: 48px;
   box-shadow: rgb(0 0 0 / 35%) 0px 0px 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   font-weight: 500 !important;
-  z-index: 1;
+  z-index: 20;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 
+#title::before {
+  background-image: var(--betterseqta-logo);
+  background-position: left;
+  background-repeat: no-repeat;
+  background-size: auto 48px;
+  height: 69.5px;
+  content: "";
+  width: 11.5rem;
+}
+
+.rightElements {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 157.5px;
+  gap: 12px;
+}
+
 .bg {
   animation: slide 3s ease-in-out infinite alternate;
   background: var(--better-main);
@@ -695,6 +718,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 .home-container {
   max-width: 1050px;
+  margin: auto;
   width: 1050px;
   display: flex;
   flex-direction: column;
@@ -1057,6 +1081,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 .notifications__notifications___3mmLY.notifications__hasItems___gXxzx > button {
   background: white;
+  z-index: 21;
   color: var(--better-sub);
 }
 
@@ -1086,11 +1111,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   border-color: var(--better-sub);
 }
 
-.notifications__notifications___3mmLY.notifications__shown___1kPoT > button {
-  background-color: #e6e6e6;
-  border-bottom-left-radius: 100%;
-}
-
 .notifications__list___rp2L2 {
   border: 4px solid var(--auto-background);
   background: var(--background-primary);
@@ -2061,14 +2081,47 @@ body {
   left: -0.5rem;
 }
 
+/* Style the main element as the middle line of the hamburger */
 #menuToggle {
-  color: var(--text-primary);
+  width: 36px;
-  top: 0.8rem !important;
+  position: fixed;
-  z-index: 2;
+  height: 36px;
+  top: 1.3rem !important;
+  left: 0.5rem;
+  z-index: 21;
+  display: none;
+  padding: 6px;
+}
+
+#menuToggle:hover {
+  box-shadow: unset;
+}
+
+.hamburger-line {
+  width: 100%;
+  height: 3px;
+  border-radius: 1rem;
+  background-color: #232323;
+  margin: 3px 0;
+  transition: all 0.3s ease; /* Step 3: Add transition */
+}
+
+/* Step 4: Parent Class Check */
+.menuShown #menuToggle .hamburger-line:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+
+.menuShown #menuToggle .hamburger-line:nth-child(2) {
+  opacity: 0;
+}
+
+.menuShown #menuToggle .hamburger-line:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
 }
 
 #AddedSettings {
   top: 17.5px !important;
+  z-index: 21 !important;
 }
 
 .day-empty {
@@ -2608,7 +2661,7 @@ body {
   min-height: 32px;
   height: 64px;
   justify-content: space-between;
-  z-index: 10;
+  z-index: 21;
   position: absolute;
   right: 250px;
 }
@@ -2757,9 +2810,7 @@ body {
 
 .DarkLightButton {
   right: 145px !important;
-  fill: var(--text-primary);
+  z-index: 21 !important;
-  height: 35px;
-  width: 35px;
   top: 17.5px;
 }