Refactor and Clean Code: Improved File Structure and Style Organization

config/index.ts

@@ -20,6 +20,7 @@ export const config = {
 		skipConsent: false,
 		defaultCredentialConfigurationIds: [],
 	},
+	appType: 'ISSUER', //ISSUER,VERIFIER
 	wwwalletURL: "WWWALLET_URL",
 	trustedRootCertificates: [],
 }

config/style.ts

@@ -0,0 +1,3 @@
+export const style = {
+	ribbonDemo: false,
+}

public/js/header.js

@@ -1,3 +1,18 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+	const ribbon = document.querySelector('.ribbon');
+	const menuArea = document.querySelector('.menu-area');
+
+	// Check if ribbon is displayed as block
+	if (window.getComputedStyle(ribbon).display === "block") {
+			// Set menu-area margin-right to 20% if ribbon is visible
+			menuArea.style.marginRight = "30%";
+	} else {
+			// Otherwise, keep it at 10%
+			menuArea.style.marginRight = "10%";
+	}
+});
+
 // change language cookie (eg lang=en)
 // refresh window
 

public/manifest.json

@@ -3,7 +3,7 @@
   "name": "eDiplomas Universities Issuer",
   "icons": [
     {
-      "src": "/images/favicon.ico",
+      "src": "/images/favicons/favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

public/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "eDiplomas Issuer",
     "icons": [
         {
-            "src": "/images/android-chrome-192x192.png?v=lk9mNwXlE0",
+            "src": "/images/favicons/favicon-192x192.png?v=lk9mNwXlE0",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/images/android-chrome-512x512.png?v=lk9mNwXlE0",
+            "src": "/images/favicons/favicon-512x512.png?v=lk9mNwXlE0",
             "sizes": "512x512",
             "type": "image/png"
         }

public/styles/footer.css

@@ -126,6 +126,7 @@
 #FooterLogo {
   height: auto;
   width: 110px;
+	filter: brightness(0) invert(1);
 }
 
 #website-url {

public/styles/header.css

@@ -1,4 +1,4 @@
-#Header .header, #Header .header-plain {
+#Header .header {
 	height: auto;
 	width: 100%;
 	background-color: var(--primary-color);
@@ -8,67 +8,29 @@
 	position: relative;
 	top: 0;
 }
-#Header .header-plain {
-	background-color: #162F44;
-}
+
 #Header .header-content {
-	font-family: var(--header-font);
-	font-size: 35px;
-	color: #fff;
-	opacity: 1;
+	height: 12%;
 	font-weight: 600;
-	padding-left: 1%;
-	text-align: left;
-	/* width: 70%; */
-	width: 100%;
+	padding-left: 5%;
+	padding-right: 5%;
 	display: flex;
-	padding-top: 35px;
-	/* padding-bottom: 15px; */
+	align-items: center;
+	justify-content: space-between;
+	background-color: var(--header-bg-color);
 }
 
-#Header .header-content#vid-issuer {
-	height: 9%;
+.img-logo {
+	height: 30px;
 }
 
-#Header .header-content a{
-	font-size: 35px;
-	color: #fff;
-	font-weight: 600;
-	padding-top: 15px;
-	padding-bottom: 15px;
-	position: relative;
+.logo-area {
 	text-decoration: none;
-	margin-left: 15px;
-}
-
-.img-logo {
-	height: 50px;
-	margin-right: 10px;
-	margin-top: -15px;
 }
 
 .logo-text {
 	font-size: 24px;
-	color: white;
-}
-
-.logo-split {
-	border-right: thin solid white;
-	height: 100%;
-	margin-left: 10px;
-}
-
-.img-uni {
-	position: relative;
-	top: 6px;
-	height: 40px;
-	margin-left: 10px;
-}
-
-#img-gunet {
-	margin-left: auto;
-	position: relative;
-	top: -20;
+	color: var(--header-item-color);
 }
 
 .header-border {
@@ -77,22 +39,13 @@
 	background: linear-gradient(358.5deg, var(--secondary-light-color) .09%, var(--primary-color));
 }
 
-.header-subtitle {
-  font-family: var(--header-font);
-  font-weight: 600;
-  font-size: 14px;
-	margin-left: 2%;
-	margin-bottom: 0;
-}
-
 /* Ribbon css */
-
 .ribbon {
+	display: none;
 	width: 150px;
-	/* height: 106px; */
 	height: 100%;
-	height: -moz-available; /* WebKit-based browsers will ignore this. */
-	height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+	height: -moz-available;
+	height: -webkit-fill-available;
 	height: fill-available;
 	overflow: hidden;
 	position: absolute;
@@ -118,16 +71,77 @@
 	transform: rotate(45deg);
 }
 
+/* Menu */
+
+.menu-area{
+	display: none;
+	margin-right: 10%;
+}
+
+ul.menu{
+	display: flex;
+	list-style: none; /* Remove bullet points */
+	padding: 0; /* Remove default padding */
+	margin: 0; /* Remove default margin */
+}
+
+li.menu-item a{
+	color:var(--header-item-color);
+  margin-right: 20px; /* Adjust the spacing between menu items */
+}
+
+.mobile-menu-toggle {
+	display: none;
+}
+
+@media screen and (max-width: 768px) {
+
+	.mobile-menu-toggle {
+		display: block;
+	}
+
+	ul.menu {
+		display: none;
+	}
+
+	#menu-toggle-button {
+		background-color: transparent;
+		border: none;
+		font-size: 40px;
+		color: var(--header-item-color);
+	}
+
+	.menu {
+		display: none;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		background-color: var(--header-bg-color);
+		z-index: 1;
+		width: 100%;
+		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+	}
+
+	.menu.show-menu {
+		display: block;
+	}
+
+	.menu li.menu-item {
+		padding: 10px;
+	}
+
+}
+
 /* Language Switch css */
 
 .language-switch {
 	position: absolute;
-  color: #fff;
-  z-index: 3;
-  width: 150px;
-  text-align: right;
-  top: 50px;
-  right: 20px;
+	color: #fff;
+	z-index: 3;
+	width: 150px;
+	text-align: right;
+	top: 50px;
+	right: 20px;
 	margin-right: 50px;
 	font-size: 13.333px;
 }