initales commit Northside Studio Page

nss/themes/hello-friend-ng/assets/js/main.js

@@ -0,0 +1,57 @@
+/**
+ * Theming.
+ *
+ * Supports the preferred color scheme of the operation system as well as
+ * the theme choice of the user.
+ *
+ */
+const themeToggle = document.querySelector(".theme-toggle");
+const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
+const chosenThemeIsDark = chosenTheme == "dark";
+const chosenThemeIsLight = chosenTheme == "light";
+
+// Detect the color scheme the operating system prefers.
+function detectOSColorTheme() {
+  if (chosenThemeIsDark) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else if (chosenThemeIsLight) {
+    document.documentElement.setAttribute("data-theme", "light");
+  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+}
+
+// Switch the theme.
+function switchTheme(e) {
+  if (chosenThemeIsDark) {
+    localStorage.setItem("theme", "light");
+  } else if (chosenThemeIsLight) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    if (document.documentElement.getAttribute("data-theme") == "dark") {
+      localStorage.setItem("theme", "light");
+    } else {
+      localStorage.setItem("theme", "dark");
+    }
+  }
+
+  detectOSColorTheme();
+  window.location.reload();
+}
+
+// Event listener
+if (themeToggle) {
+  themeToggle.addEventListener("click", switchTheme, false);
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+  window
+    .matchMedia("(prefers-color-scheme: light)")
+    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+
+  detectOSColorTheme();
+} else {
+  localStorage.removeItem("theme");
+}

nss/themes/hello-friend-ng/assets/js/menu.js

@@ -0,0 +1,32 @@
+// Mobile menu
+
+const menuTrigger = document.querySelector(".menu-trigger");
+const menu = document.querySelector(".menu");
+const mobileQuery = getComputedStyle(document.body).getPropertyValue(
+  "--phoneWidth"
+);
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+const isMobileMenu = () => {
+  menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
+  menu && menu.classList.toggle("hidden", isMobile());
+};
+
+isMobileMenu();
+
+menuTrigger &&
+  menuTrigger.addEventListener(
+    "click",
+    () => menu && menu.classList.toggle("hidden")
+  );
+
+window.addEventListener("resize", isMobileMenu);
+
+const language = document.getElementsByTagName('html')[0].lang;
+const logo = document.querySelector(".logo__pathname");
+if(logo){
+  window.onload = () => {
+    let path = window.location.pathname.substring(1);
+    path = path.replace(language+'/','')
+    logo.textContent += path.substring(0,path.indexOf('/'));
+  };
+}