@anas_hameed/edly-saas-widget 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,6 +7,7 @@ exports.default = void 0;
7
7
  var _frontendPlatform = require("@edx/frontend-platform");
8
8
  var _react = require("react");
9
9
  var _dompurify = _interopRequireDefault(require("dompurify"));
10
+ var _reactHelmet = require("react-helmet");
10
11
  require("./main.scss");
11
12
  var _jsxRuntime = require("react/jsx-runtime");
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -14,6 +15,7 @@ const FooterWidget = () => {
14
15
  const [footerData, setFooterData] = (0, _react.useState)("");
15
16
  const config = (0, _frontendPlatform.getConfig)();
16
17
  (0, _react.useEffect)(() => {
18
+ document.documentElement.style.setProperty("--primary-color", config?.COLORS?.primary || "#de2025");
17
19
  const scrollBtn = document.getElementById("scrollToTop");
18
20
  if (scrollBtn) {
19
21
  const scrollToTop = () => {
@@ -36,15 +38,20 @@ const FooterWidget = () => {
36
38
  window.removeEventListener("scroll", toggleVisibility);
37
39
  };
38
40
  }
39
- }, [footerData]);
41
+ return () => {
42
+ document.documentElement.style.removeProperty("--primary-color");
43
+ };
44
+ }, [config?.COLORS?.primary, footerData]);
40
45
  (0, _react.useEffect)(() => {
41
46
  const fetchData = async () => {
42
- if (!config?.DISCOVERY_URL) {
47
+ if (!config?.MARKETING_SITE_BASE_URL) {
43
48
  console.error("No url found for discovery", config);
44
49
  return;
45
50
  }
46
51
  try {
47
- const response = await fetch(`${config.DISCOVERY_URL}/wp-json/edly-wp-routes/footer`, {
52
+ const response = await fetch(`${config.MARKETING_SITE_BASE_URL}/wp-json/edly-wp-routes/footer`,
53
+ // `https://venus.discover.multitenantsdev.edly.io/wp-json/edly-wp-routes/footer`,
54
+ {
48
55
  credentials: "include"
49
56
  });
50
57
  if (!response.ok) {
@@ -61,11 +68,19 @@ const FooterWidget = () => {
61
68
  };
62
69
  fetchData();
63
70
  }, []);
64
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
65
- className: "site-header",
66
- dangerouslySetInnerHTML: {
67
- __html: footerData
68
- }
71
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
72
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.Helmet, {
73
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("link", {
74
+ rel: "stylesheet",
75
+ href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css",
76
+ crossOrigin: "anonymous"
77
+ })
78
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
79
+ className: "site-header",
80
+ dangerouslySetInnerHTML: {
81
+ __html: footerData
82
+ }
83
+ })]
69
84
  });
70
85
  };
71
86
  var _default = exports.default = FooterWidget;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_frontendPlatform","require","_react","_dompurify","_interopRequireDefault","_jsxRuntime","e","__esModule","default","FooterWidget","footerData","setFooterData","useState","config","getConfig","useEffect","scrollBtn","document","getElementById","scrollToTop","window","scrollTo","top","behavior","toggleVisibility","scrollY","classList","add","remove","addEventListener","removeEventListener","fetchData","DISCOVERY_URL","console","error","response","fetch","credentials","ok","Error","status","jsonData","json","cleanHtml","DOMPurify","sanitize","ADD_ATTR","jsx","className","dangerouslySetInnerHTML","__html","_default","exports"],"sources":["../../src/FooterWidget/index.jsx"],"sourcesContent":["import { getConfig } from \"@edx/frontend-platform\";\nimport { useEffect, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport \"./main.scss\";\n\nconst FooterWidget = () => {\n const [footerData, setFooterData] = useState(\"\");\n const config = getConfig();\n\n useEffect(() => {\n const scrollBtn = document.getElementById(\"scrollToTop\");\n if (scrollBtn) {\n const scrollToTop = () => {\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const toggleVisibility = () => {\n if (window.scrollY > 300) {\n scrollBtn.classList.add(\"show-btn\"); // We will style this class in SCSS\n } else {\n scrollBtn.classList.remove(\"show-btn\");\n }\n };\n\n scrollBtn.addEventListener(\"click\", scrollToTop);\n window.addEventListener(\"scroll\", toggleVisibility);\n\n return () => {\n scrollBtn.removeEventListener(\"click\", scrollToTop);\n window.removeEventListener(\"scroll\", toggleVisibility);\n };\n }\n }, [footerData]);\n\n useEffect(() => {\n const fetchData = async () => {\n if (!config?.DISCOVERY_URL) {\n console.error(\"No url found for discovery\", config);\n return;\n }\n try {\n const response = await fetch(\n `${config.DISCOVERY_URL}/wp-json/edly-wp-routes/footer`,\n { credentials: \"include\" }\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const jsonData = await response.json();\n const cleanHtml = DOMPurify.sanitize(jsonData, {\n ADD_ATTR: [\"target\", \"class\"],\n });\n setFooterData(cleanHtml);\n } catch (error) {\n console.error(error);\n }\n };\n\n fetchData();\n }, []);\n\n return (\n <footer\n className=\"site-header\"\n dangerouslySetInnerHTML={{ __html: footerData }}\n />\n );\n};\n\nexport default FooterWidget;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAC,sBAAA,CAAAH,OAAA;AACAA,OAAA;AAAqB,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAErB,MAAMG,YAAY,GAAGA,CAAA,KAAM;EACzB,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EAChD,MAAMC,MAAM,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAE1B,IAAAC,gBAAS,EAAC,MAAM;IACd,MAAMC,SAAS,GAAGC,QAAQ,CAACC,cAAc,CAAC,aAAa,CAAC;IACxD,IAAIF,SAAS,EAAE;MACb,MAAMG,WAAW,GAAGA,CAAA,KAAM;QACxBC,MAAM,CAACC,QAAQ,CAAC;UAAEC,GAAG,EAAE,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MACjD,CAAC;MAED,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;QAC7B,IAAIJ,MAAM,CAACK,OAAO,GAAG,GAAG,EAAE;UACxBT,SAAS,CAACU,SAAS,CAACC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC;QACvC,CAAC,MAAM;UACLX,SAAS,CAACU,SAAS,CAACE,MAAM,CAAC,UAAU,CAAC;QACxC;MACF,CAAC;MAEDZ,SAAS,CAACa,gBAAgB,CAAC,OAAO,EAAEV,WAAW,CAAC;MAChDC,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEL,gBAAgB,CAAC;MAEnD,OAAO,MAAM;QACXR,SAAS,CAACc,mBAAmB,CAAC,OAAO,EAAEX,WAAW,CAAC;QACnDC,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEN,gBAAgB,CAAC;MACxD,CAAC;IACH;EACF,CAAC,EAAE,CAACd,UAAU,CAAC,CAAC;EAEhB,IAAAK,gBAAS,EAAC,MAAM;IACd,MAAMgB,SAAS,GAAG,MAAAA,CAAA,KAAY;MAC5B,IAAI,CAAClB,MAAM,EAAEmB,aAAa,EAAE;QAC1BC,OAAO,CAACC,KAAK,CAAC,4BAA4B,EAAErB,MAAM,CAAC;QACnD;MACF;MACA,IAAI;QACF,MAAMsB,QAAQ,GAAG,MAAMC,KAAK,CAC1B,GAAGvB,MAAM,CAACmB,aAAa,gCAAgC,EACvD;UAAEK,WAAW,EAAE;QAAU,CAC3B,CAAC;QACD,IAAI,CAACF,QAAQ,CAACG,EAAE,EAAE;UAChB,MAAM,IAAIC,KAAK,CAAC,uBAAuBJ,QAAQ,CAACK,MAAM,EAAE,CAAC;QAC3D;QAEA,MAAMC,QAAQ,GAAG,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;QACtC,MAAMC,SAAS,GAAGC,kBAAS,CAACC,QAAQ,CAACJ,QAAQ,EAAE;UAC7CK,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO;QAC9B,CAAC,CAAC;QACFnC,aAAa,CAACgC,SAAS,CAAC;MAC1B,CAAC,CAAC,OAAOT,KAAK,EAAE;QACdD,OAAO,CAACC,KAAK,CAACA,KAAK,CAAC;MACtB;IACF,CAAC;IAEDH,SAAS,CAAC,CAAC;EACb,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,IAAA1B,WAAA,CAAA0C,GAAA;IACEC,SAAS,EAAC,aAAa;IACvBC,uBAAuB,EAAE;MAAEC,MAAM,EAAExC;IAAW;EAAE,CACjD,CAAC;AAEN,CAAC;AAAC,IAAAyC,QAAA,GAAAC,OAAA,CAAA5C,OAAA,GAEaC,YAAY","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_frontendPlatform","require","_react","_dompurify","_interopRequireDefault","_reactHelmet","_jsxRuntime","e","__esModule","default","FooterWidget","footerData","setFooterData","useState","config","getConfig","useEffect","document","documentElement","style","setProperty","COLORS","primary","scrollBtn","getElementById","scrollToTop","window","scrollTo","top","behavior","toggleVisibility","scrollY","classList","add","remove","addEventListener","removeEventListener","removeProperty","fetchData","MARKETING_SITE_BASE_URL","console","error","response","fetch","credentials","ok","Error","status","jsonData","json","cleanHtml","DOMPurify","sanitize","ADD_ATTR","jsxs","Fragment","children","jsx","Helmet","rel","href","crossOrigin","className","dangerouslySetInnerHTML","__html","_default","exports"],"sources":["../../src/FooterWidget/index.jsx"],"sourcesContent":["import { getConfig } from \"@edx/frontend-platform\";\nimport { useEffect, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport { Helmet } from \"react-helmet\";\nimport \"./main.scss\";\n\nconst FooterWidget = () => {\n const [footerData, setFooterData] = useState(\"\");\n const config = getConfig();\n\n useEffect(() => {\n document.documentElement.style.setProperty(\n \"--primary-color\",\n config?.COLORS?.primary || \"#de2025\"\n );\n const scrollBtn = document.getElementById(\"scrollToTop\");\n if (scrollBtn) {\n const scrollToTop = () => {\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const toggleVisibility = () => {\n if (window.scrollY > 300) {\n scrollBtn.classList.add(\"show-btn\"); // We will style this class in SCSS\n } else {\n scrollBtn.classList.remove(\"show-btn\");\n }\n };\n\n scrollBtn.addEventListener(\"click\", scrollToTop);\n window.addEventListener(\"scroll\", toggleVisibility);\n\n return () => {\n scrollBtn.removeEventListener(\"click\", scrollToTop);\n window.removeEventListener(\"scroll\", toggleVisibility);\n };\n }\n return () => {\n document.documentElement.style.removeProperty(\"--primary-color\");\n };\n }, [config?.COLORS?.primary, footerData]);\n\n useEffect(() => {\n const fetchData = async () => {\n if (!config?.MARKETING_SITE_BASE_URL) {\n console.error(\"No url found for discovery\", config);\n return;\n }\n try {\n const response = await fetch(\n `${config.MARKETING_SITE_BASE_URL}/wp-json/edly-wp-routes/footer`,\n // `https://venus.discover.multitenantsdev.edly.io/wp-json/edly-wp-routes/footer`,\n { credentials: \"include\" }\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const jsonData = await response.json();\n const cleanHtml = DOMPurify.sanitize(jsonData, {\n ADD_ATTR: [\"target\", \"class\"],\n });\n setFooterData(cleanHtml);\n } catch (error) {\n console.error(error);\n }\n };\n\n fetchData();\n }, []);\n\n return (\n <>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\"\n crossOrigin=\"anonymous\"\n />\n </Helmet>\n <footer\n className=\"site-header\"\n dangerouslySetInnerHTML={{ __html: footerData }}\n />\n </>\n );\n};\n\nexport default FooterWidget;\n"],"mappings":"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","ignoreList":[]}
@@ -1,10 +1,10 @@
1
- $primary-color: black;
1
+ $primary-color: var(--primary-color);
2
2
  $text-color: #fff;
3
3
  $background-color: #ffffff;
4
4
  $submenu-bg: #ffffff;
5
5
  $submenu-border: #d1d5db;
6
6
  $submenu-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
7
- $hover-bg: lighten($primary-color, 45%);
7
+ $hover-bg: color-mix(in srgb, var(--primary-color) 5%, white 94%);
8
8
  $transition-speed: 0.25s;
9
9
  $font-family: 'Inter', sans-serif;
10
10
  $mobile-breakpoint: 1230px;
@@ -13,13 +13,21 @@ $font-size: 1em;
13
13
 
14
14
  .site-footer {
15
15
  background-color: $primary-color;
16
- padding: 40px 15px;
16
+ padding: 70px 15px;
17
17
  color:$text-color ;
18
+ .container {
19
+ max-width: 1240px;
20
+ }
18
21
  p {
19
22
  font-size: $font-size;
20
23
  }
21
- h3, h3 {
24
+ h2, h3 {
22
25
  margin-bottom: 20px;
26
+ color: white;
27
+ font-size: 18px;
28
+ line-height: 26px;
29
+ font-weight: 600;
30
+
23
31
  }
24
32
  }
25
33
 
@@ -41,9 +49,17 @@ $font-size: 1em;
41
49
  padding: 0;
42
50
  margin: 0;
43
51
  list-style: none;
52
+ column-count: 2;
53
+ list-style: none;
54
+ padding: 0;
55
+ margin: 0;
56
+ display: block !important;
57
+ max-height: max-content !important;
44
58
  li {
45
59
  margin-bottom: 5px;
46
60
  list-style: none;
61
+ font-size: 16px;
62
+ font-weight: 600;
47
63
  a {
48
64
  text-decoration: none;
49
65
  color: $text-color;
@@ -57,7 +73,40 @@ $font-size: 1em;
57
73
  list-style: none;
58
74
  display: flex;
59
75
  li {
60
- margin: 0 10px 10px 0;
76
+ margin: 0 16px 10px 0;
77
+ padding: 0;
78
+ width: 24px;
79
+ height: 24px;
80
+ a {
81
+ color: white;
82
+ position: relative;
83
+ width: 24px;
84
+ height: 24px;
85
+ display: inline-flex;
86
+ i, span {
87
+ display: none;
88
+ }
89
+ &:after {
90
+ content: "";
91
+ position: absolute;
92
+ top: 0;
93
+ left: 0;
94
+ width: 24px;
95
+ height: 24px;
96
+ display: block !important;
97
+ }
98
+ &.facebook {
99
+ &:after {
100
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3'/></svg>") no-repeat bottom;
101
+ }
102
+ }
103
+ &.twitter {
104
+ &:after {
105
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M4 4l11.733 16h4.267l-11.733 -16z'/><path d='M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772'/></svg>") no-repeat bottom;
106
+
107
+ }
108
+ }
109
+ }
61
110
  }
62
111
  }
63
112
 
@@ -89,6 +138,6 @@ $font-size: 1em;
89
138
  margin-bottom: 20px;
90
139
  }
91
140
  .site-footer {
92
- padding: 30px 0;
141
+ padding: 30px 20px;
93
142
  }
94
143
  }
@@ -15,9 +15,10 @@ const HeaderWidget = () => {
15
15
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
16
16
  const WIDTH = 1230;
17
17
  const [isMobile, setIsMobile] = (0, _react.useState)(window.innerWidth < WIDTH);
18
- const [isLoading, setIsLoading] = (0, _react.useState)(true);
19
18
  const config = (0, _frontendPlatform.getConfig)();
20
19
  (0, _react.useEffect)(() => {
20
+ console.log("color: ", config.COLORS);
21
+ document.documentElement.style.setProperty("--primary-color", config?.COLORS?.primary || "#de2025");
21
22
  const handleResize = () => {
22
23
  setIsMobile(window.innerWidth < WIDTH);
23
24
  if (window.innerWidth >= WIDTH) {
@@ -25,16 +26,21 @@ const HeaderWidget = () => {
25
26
  }
26
27
  };
27
28
  window.addEventListener("resize", handleResize);
28
- return () => window.removeEventListener("resize", handleResize);
29
- }, []);
29
+ return () => {
30
+ window.removeEventListener("resize", handleResize);
31
+ document.documentElement.style.removeProperty("--primary-color");
32
+ };
33
+ }, [config?.COLORS]);
30
34
  (0, _react.useEffect)(() => {
31
35
  const fetchData = async () => {
32
- if (!config?.DISCOVERY_URL) {
36
+ if (!config?.MARKETING_SITE_BASE_URL) {
33
37
  console.error("No url found for discovery", config);
34
38
  return;
35
39
  }
36
40
  try {
37
- const response = await fetch(`${config.DISCOVERY_URL}/wp-json/edly-wp-routes/nav-menu`, {
41
+ const response = await fetch(`${config.MARKETING_SITE_BASE_URL}/wp-json/edly-wp-routes/nav-menu`,
42
+ // "https://venus.discover.multitenantsdev.edly.io/wp-json/edly-wp-routes/nav-menu",
43
+ {
38
44
  credentials: "include"
39
45
  });
40
46
  if (!response.ok) {
@@ -51,8 +57,6 @@ const HeaderWidget = () => {
51
57
  }
52
58
  } catch (error) {
53
59
  console.error(error);
54
- } finally {
55
- setIsLoading(false);
56
60
  }
57
61
  };
58
62
  fetchData();
@@ -61,7 +65,7 @@ const HeaderWidget = () => {
61
65
  setIsOpen(!isOpen);
62
66
  };
63
67
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
64
- className: `shadow-lg ${isMobile ? "header-frame" : ""}`,
68
+ className: `shadow-sm ${isMobile ? "header-frame" : ""}`,
65
69
  children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
66
70
  className: "menuOpner",
67
71
  type: "button",
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_frontendPlatform","require","_react","_dompurify","_interopRequireDefault","_jsxRuntime","e","__esModule","default","HeaderWidget","headerData","setHeaderData","useState","isOpen","setIsOpen","WIDTH","isMobile","setIsMobile","window","innerWidth","isLoading","setIsLoading","config","getConfig","useEffect","handleResize","addEventListener","removeEventListener","fetchData","DISCOVERY_URL","console","error","response","fetch","credentials","ok","Error","status","jsonData","json","cleanHtml","DOMPurify","sanitize","primary","ADD_ATTR","toggleMenu","jsxs","className","children","jsx","type","onClick","style","background","border","cursor","fontSize","href","width","height","src","LOGO_URL","alt","decoding","dangerouslySetInnerHTML","__html","_default","exports"],"sources":["../../src/HeaderWidget/index.jsx"],"sourcesContent":["import { getConfig } from \"@edx/frontend-platform\";\nimport { useEffect, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport \"./main.scss\";\n\nconst HeaderWidget = () => {\n const [headerData, setHeaderData] = useState(\"\");\n const [isOpen, setIsOpen] = useState(false);\n const WIDTH = 1230;\n const [isMobile, setIsMobile] = useState(window.innerWidth < WIDTH);\n const [isLoading, setIsLoading] = useState(true);\n const config = getConfig();\n\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth < WIDTH);\n if (window.innerWidth >= WIDTH) {\n setIsOpen(false);\n }\n };\n\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const fetchData = async () => {\n if (!config?.DISCOVERY_URL) {\n console.error(\"No url found for discovery\", config);\n return;\n }\n try {\n const response = await fetch(\n `${config.DISCOVERY_URL}/wp-json/edly-wp-routes/nav-menu`,\n { credentials: \"include\" }\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const jsonData = await response.json();\n\n if (typeof jsonData === \"object\") {\n const cleanHtml = DOMPurify.sanitize(jsonData.primary, {\n ADD_ATTR: [\"target\", \"class\"],\n });\n setHeaderData(cleanHtml);\n } else {\n console.error(\"Data object is not json\");\n }\n } catch (error) {\n console.error(error);\n } finally {\n setIsLoading(false);\n }\n };\n\n fetchData();\n }, []);\n\n const toggleMenu = () => {\n setIsOpen(!isOpen);\n };\n\n return (\n <div className={`shadow-lg ${isMobile ? \"header-frame\" : \"\"}`}>\n {isMobile && (\n <button\n className=\"menuOpner\"\n type=\"button\"\n onClick={toggleMenu}\n style={{\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"24px\",\n }}\n >\n {isOpen ? \"✖\" : \"☰\"}\n </button>\n )}\n <div\n className={`header-holder ${isMobile ? \"mobile-menu\" : \"\"} ${\n isOpen ? \"\" : \"mobile-hide\"\n }`}\n >\n <a href=\"/\" className=\"custom-logo-link\">\n <img\n width=\"216\"\n height=\"140\"\n src={config.LOGO_URL}\n className=\"custom-logo\"\n alt=\"Venus\"\n decoding=\"async\"\n />\n </a>\n <header\n className=\"site-header\"\n dangerouslySetInnerHTML={{ __html: headerData }}\n />\n </div>\n </div>\n );\n};\n\nexport default HeaderWidget;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_frontendPlatform","require","_react","_dompurify","_interopRequireDefault","_jsxRuntime","e","__esModule","default","HeaderWidget","headerData","setHeaderData","useState","isOpen","setIsOpen","WIDTH","isMobile","setIsMobile","window","innerWidth","config","getConfig","useEffect","console","log","COLORS","document","documentElement","style","setProperty","primary","handleResize","addEventListener","removeEventListener","removeProperty","fetchData","MARKETING_SITE_BASE_URL","error","response","fetch","credentials","ok","Error","status","jsonData","json","cleanHtml","DOMPurify","sanitize","ADD_ATTR","toggleMenu","jsxs","className","children","jsx","type","onClick","background","border","cursor","fontSize","href","width","height","src","LOGO_URL","alt","decoding","dangerouslySetInnerHTML","__html","_default","exports"],"sources":["../../src/HeaderWidget/index.jsx"],"sourcesContent":["import { getConfig } from \"@edx/frontend-platform\";\nimport { useEffect, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport \"./main.scss\";\n\nconst HeaderWidget = () => {\n const [headerData, setHeaderData] = useState(\"\");\n const [isOpen, setIsOpen] = useState(false);\n const WIDTH = 1230;\n const [isMobile, setIsMobile] = useState(window.innerWidth < WIDTH);\n const config = getConfig();\n\n\n useEffect(() => {\n console.log(\"color: \", config.COLORS);\n document.documentElement.style.setProperty(\n \"--primary-color\",\n config?.COLORS?.primary || \"#de2025\"\n );\n\n const handleResize = () => {\n setIsMobile(window.innerWidth < WIDTH);\n if (window.innerWidth >= WIDTH) {\n setIsOpen(false);\n }\n };\n\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n document.documentElement.style.removeProperty(\"--primary-color\");\n };\n }, [config?.COLORS]);\n\n useEffect(() => {\n const fetchData = async () => {\n if (!config?.MARKETING_SITE_BASE_URL) {\n console.error(\"No url found for discovery\", config);\n return;\n }\n try {\n const response = await fetch(\n `${config.MARKETING_SITE_BASE_URL}/wp-json/edly-wp-routes/nav-menu`,\n // \"https://venus.discover.multitenantsdev.edly.io/wp-json/edly-wp-routes/nav-menu\",\n { credentials: \"include\" }\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const jsonData = await response.json();\n\n if (typeof jsonData === \"object\") {\n const cleanHtml = DOMPurify.sanitize(jsonData.primary, {\n ADD_ATTR: [\"target\", \"class\"],\n });\n setHeaderData(cleanHtml);\n } else {\n console.error(\"Data object is not json\");\n }\n } catch (error) {\n console.error(error);\n }\n };\n\n fetchData();\n }, []);\n\n const toggleMenu = () => {\n setIsOpen(!isOpen);\n };\n\n return (\n <div className={`shadow-sm ${isMobile ? \"header-frame\" : \"\"}`}>\n {isMobile && (\n <button\n className=\"menuOpner\"\n type=\"button\"\n onClick={toggleMenu}\n style={{\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"24px\",\n }}\n >\n {isOpen ? \"✖\" : \"☰\"}\n </button>\n )}\n <div\n className={`header-holder ${isMobile ? \"mobile-menu\" : \"\"} ${\n isOpen ? \"\" : \"mobile-hide\"\n }`}\n >\n <a href=\"/\" className=\"custom-logo-link\">\n <img\n width=\"216\"\n height=\"140\"\n src={config.LOGO_URL}\n className=\"custom-logo\"\n alt=\"Venus\"\n decoding=\"async\"\n />\n </a>\n <header\n className=\"site-header\"\n dangerouslySetInnerHTML={{ __html: headerData }}\n />\n </div>\n </div>\n );\n};\n\nexport default HeaderWidget;\n"],"mappings":"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","ignoreList":[]}
@@ -1,14 +1,20 @@
1
1
  @use "sass:color";
2
- $primary-color: #de2025;
2
+
3
+ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
4
+
5
+ $primary-color: var(--primary-color);
3
6
  $text-color: #0d1321;
4
7
  $background-color: #ffffff;
5
8
  $submenu-bg: #ffffff;
6
9
  $submenu-border: #d1d5db;
10
+ $light-gray: #dfdfdf;
7
11
  $submenu-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
8
- $hover-bg: color.adjust($primary-color, $lightness: 45%);
12
+ $hover-bg: color-mix(in srgb, var(--primary-color) 5%, white 94%);
9
13
  $transition-speed: 0.25s;
10
14
  $font-family: "Inter", sans-serif;
15
+ $font-family-secondary: "Open Sans", sans-serif;
11
16
  $mobile-breakpoint: 1230px;
17
+ $mobile-breakpoint-xl: 1280px;
12
18
  $icon-size: 0.95em;
13
19
 
14
20
  /* Header and logo */
@@ -24,12 +30,15 @@ $icon-size: 0.95em;
24
30
  flex: inherit !important;
25
31
  }
26
32
 
27
- .custom-logo-link img {
28
- margin: auto;
29
- max-width: 200px;
30
- max-height: 70px;
31
- height: auto;
32
- width: auto;
33
+ .custom-logo-link {
34
+ margin-right: 30px;
35
+ img {
36
+ margin: auto;
37
+ max-width: 200px;
38
+ max-height: 70px;
39
+ height: auto;
40
+ width: auto;
41
+ }
33
42
  }
34
43
 
35
44
  li.menu-item-object-menu_openedx {
@@ -37,7 +46,6 @@ li.menu-item-object-menu_openedx {
37
46
  }
38
47
 
39
48
  #menu-primary-menu > li > .sub-menu {
40
- left: auto !important;
41
49
  right: 0 !important;
42
50
  }
43
51
 
@@ -51,7 +59,122 @@ li.menu-item-object-menu_openedx {
51
59
 
52
60
  > li {
53
61
  position: relative;
54
- padding: 10px;
62
+ padding: 10px 16px;
63
+
64
+ &.menu-item-object-menu_openedx {
65
+ ul.sub-menu {
66
+ width: 241px;
67
+ left: auto;
68
+ right: 0;
69
+ li {
70
+ margin: 4px 0;
71
+ &.user-info-item,
72
+ &.menu-item-object-user_info_openedx {
73
+ padding: 0;
74
+ margin: 0;
75
+ .user-info-box {
76
+ padding: 15px 16px;
77
+ border-bottom: 1px solid $submenu-border;
78
+ margin-bottom: 5px;
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 10px;
82
+ .menu_openedx {
83
+ img {
84
+ margin-right: 10px;
85
+ width: 40px;
86
+ height: 40px;
87
+ object-fit: cover;
88
+ border-radius: 50%;
89
+ background: $light-gray;
90
+ }
91
+ }
92
+ .info-avatar {
93
+ img {
94
+ border-radius: 100%;
95
+ overflow: hidden;
96
+ width: 40px;
97
+ height: 40px;
98
+ }
99
+ }
100
+ .info-details {
101
+ display: flex;
102
+ flex-direction: column;
103
+ color: #111827;
104
+ .info-fullname {
105
+ font-size: 16px;
106
+ font-family: $font-family-secondary;
107
+ }
108
+ .info-username {
109
+ font-size: 12px;
110
+ font-family: $font-family-secondary;
111
+ }
112
+ }
113
+ }
114
+ }
115
+ a {
116
+ font-family: $font-family-secondary;
117
+ font-size: 14px;
118
+ font-weight: 600;
119
+ padding-left: 50px;
120
+ border-radius: 6px;
121
+ position: relative;
122
+ &:after {
123
+ content: "";
124
+ position: absolute;
125
+ top: 10px;
126
+ left: 16px;
127
+ width: 24px;
128
+ height: 24px;
129
+ display: block !important;
130
+ }
131
+ &:hover {
132
+ color: $text-color;
133
+ }
134
+ }
135
+ &.dashboard_openedx {
136
+ a {
137
+ &:after {
138
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_1026_1768)'><path d='M10 13C10 13.5304 10.2107 14.0391 10.5858 14.4142C10.9609 14.7893 11.4696 15 12 15C12.5304 15 13.0391 14.7893 13.4142 14.4142C13.7893 14.0391 14 13.5304 14 13C14 12.4696 13.7893 11.9609 13.4142 11.5858C13.0391 11.2107 12.5304 11 12 11C11.4696 11 10.9609 11.2107 10.5858 11.5858C10.2107 11.9609 10 12.4696 10 13Z' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M13.4502 11.55L15.5002 9.5' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M6.4 20C4.93815 18.8381 3.87391 17.2502 3.35478 15.4565C2.83564 13.6627 2.88732 11.7519 3.50265 9.98881C4.11797 8.22573 5.26647 6.69771 6.78899 5.6165C8.3115 4.53529 10.1326 3.95444 12 3.95444C13.8674 3.95444 15.6885 4.53529 17.211 5.6165C18.7335 6.69771 19.882 8.22573 20.4974 9.98881C21.1127 11.7519 21.1644 13.6627 20.6452 15.4565C20.1261 17.2502 19.0619 18.8381 17.6 20H6.4Z' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_1026_1768'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>")
139
+ no-repeat center/contain;
140
+ }
141
+ }
142
+ }
143
+ &.programs_dashboard_openedx {
144
+ a {
145
+ &:after {
146
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_1026_1809)'><path d='M3 19C4.36817 18.2101 5.92017 17.7942 7.5 17.7942C9.07983 17.7942 10.6318 18.2101 12 19C13.3682 18.2101 14.9202 17.7942 16.5 17.7942C18.0798 17.7942 19.6318 18.2101 21 19' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3 6.00001C4.36817 5.21009 5.92017 4.79424 7.5 4.79424C9.07983 4.79424 10.6318 5.21009 12 6.00001C13.3682 5.21009 14.9202 4.79424 16.5 4.79424C18.0798 4.79424 19.6318 5.21009 21 6.00001' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3 6V19' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12 6V19' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M21 6V19' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_1026_1809'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>")
147
+ no-repeat center/contain;
148
+ }
149
+ }
150
+ }
151
+ &.profile_openedx {
152
+ a {
153
+ &:after {
154
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_1026_664)'><path d='M8 7C8 8.06087 8.42143 9.07828 9.17157 9.82843C9.92172 10.5786 10.9391 11 12 11C13.0609 11 14.0783 10.5786 14.8284 9.82843C15.5786 9.07828 16 8.06087 16 7C16 5.93913 15.5786 4.92172 14.8284 4.17157C14.0783 3.42143 13.0609 3 12 3C10.9391 3 9.92172 3.42143 9.17157 4.17157C8.42143 4.92172 8 5.93913 8 7Z' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M6 21V19C6 17.9391 6.42143 16.9217 7.17157 16.1716C7.92172 15.4214 8.93913 15 10 15H14C15.0609 15 16.0783 15.4214 16.8284 16.1716C17.5786 16.9217 18 17.9391 18 19V21' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_1026_664'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>")
155
+ no-repeat center/contain;
156
+ }
157
+ }
158
+ }
159
+ &.account_openedx {
160
+ a {
161
+ &:after {
162
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_1026_1026)'><path d='M10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.439 10.751 21.439 13.249 19.683 13.675C19.4192 13.7389 19.1742 13.8642 18.968 14.0407C18.7618 14.2172 18.6001 14.4399 18.4963 14.6907C18.3924 14.9414 18.3491 15.2132 18.3701 15.4838C18.3911 15.7544 18.4757 16.0162 18.617 16.248C19.557 17.791 17.791 19.558 16.247 18.618C16.0153 18.4769 15.7537 18.3924 15.4832 18.3715C15.2128 18.3506 14.9412 18.3938 14.6906 18.4975C14.44 18.6013 14.2174 18.7627 14.0409 18.9687C13.8645 19.1747 13.7391 19.4194 13.675 19.683C13.249 21.439 10.751 21.439 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317Z' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12Z' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_1026_1026'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>")
163
+ no-repeat center/contain;
164
+ }
165
+ }
166
+ }
167
+ &.signout_openedx {
168
+ a {
169
+ &:after {
170
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_1026_750)'><path d='M7 6C5.78639 7.02477 4.91697 8.39771 4.50943 9.93294C4.10189 11.4682 4.17592 13.0915 4.7215 14.5833C5.26708 16.0751 6.25786 17.3632 7.55971 18.2732C8.86156 19.1833 10.4116 19.6714 12 19.6714C13.5884 19.6714 15.1384 19.1833 16.4403 18.2732C17.7421 17.3632 18.7329 16.0751 19.2785 14.5833C19.8241 13.0915 19.8981 11.4682 19.4906 9.93294C19.083 8.39771 18.2136 7.02477 17 6' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12 4V12' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_1026_750'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>")
171
+ no-repeat center/contain;
172
+ }
173
+ }
174
+ }
175
+ }
176
+ }
177
+ }
55
178
 
56
179
  &.menu-item-has-children {
57
180
  a {
@@ -61,24 +184,6 @@ li.menu-item-object-menu_openedx {
61
184
  }
62
185
  }
63
186
 
64
- .user-profile-wrap {
65
- &:hover {
66
- text-decoration: none;
67
- }
68
- &::before {
69
- display: none;
70
- }
71
-
72
- img {
73
- border-radius: 100%;
74
- overflow: hidden;
75
- }
76
-
77
- span {
78
- display: none;
79
- }
80
- }
81
-
82
187
  a {
83
188
  color: $text-color;
84
189
  text-decoration: none;
@@ -86,13 +191,15 @@ li.menu-item-object-menu_openedx {
86
191
  display: block;
87
192
  border-bottom: 1px solid transparent;
88
193
  transition:
89
- color $transition-speed ease,
90
- border-color $transition-speed ease;
194
+ color $transition-speed ease,
195
+ border-color $transition-speed ease;
91
196
  position: relative;
92
197
  display: block;
93
198
  padding-bottom: 0px;
94
199
  border: 0px;
95
200
  text-decoration: none;
201
+ font-family: $font-family-secondary;
202
+ font-weight: 600;
96
203
  &:before {
97
204
  content: "";
98
205
  background-color: $primary-color;
@@ -121,12 +228,15 @@ li.menu-item-object-menu_openedx {
121
228
  &.menu-item-has-children > a::after,
122
229
  &.menu-item-object-custom_link_filter > a::after,
123
230
  &.submenu-item-class > a::after {
124
- content: "";
231
+ content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6l-6 6'/></svg>");
125
232
  font-size: $icon-size;
126
233
  margin-left: 0.4em;
127
234
  display: inline-block;
128
235
  transform: rotate(90deg);
129
236
  transition: transform $transition-speed ease;
237
+ @media (max-width: $mobile-breakpoint) {
238
+ display: none;
239
+ }
130
240
  }
131
241
 
132
242
  &:hover > a::after {
@@ -143,8 +253,8 @@ li.menu-item-object-menu_openedx {
143
253
  border-radius: 6px;
144
254
  box-shadow: $submenu-shadow;
145
255
  list-style: none;
146
- min-width: 230px;
147
- padding: 0.5rem 0;
256
+ min-width: 270px;
257
+ padding: 8px;
148
258
  z-index: 10;
149
259
 
150
260
  > li {
@@ -153,11 +263,12 @@ li.menu-item-object-menu_openedx {
153
263
 
154
264
  a {
155
265
  display: block;
156
- padding: 0.6rem 1rem;
157
266
  color: $text-color;
267
+ border-radius: 6px;
268
+ padding: 0.6rem 1rem;
158
269
  transition:
159
- background $transition-speed ease,
160
- color $transition-speed ease;
270
+ background $transition-speed ease,
271
+ color $transition-speed ease;
161
272
 
162
273
  &:hover {
163
274
  background: $hover-bg;
@@ -169,9 +280,13 @@ li.menu-item-object-menu_openedx {
169
280
  }
170
281
 
171
282
  &.submenu-item-class > a::after {
172
- content: "";
283
+ content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6l-6 6'/></svg>");
173
284
  float: right;
285
+ margin-top: 4px;
174
286
  font-size: $icon-size;
287
+ @media (max-width: $mobile-breakpoint) {
288
+ display: none;
289
+ }
175
290
  }
176
291
 
177
292
  .sub-menu {
@@ -185,8 +300,8 @@ li.menu-item-object-menu_openedx {
185
300
  box-shadow: $submenu-shadow;
186
301
  background: $submenu-bg;
187
302
  min-width: 200px;
188
- padding: 0.5rem 0;
189
303
  list-style: none;
304
+ padding: 8px;
190
305
  }
191
306
 
192
307
  &:hover > .sub-menu {
@@ -199,6 +314,26 @@ li.menu-item-object-menu_openedx {
199
314
  display: block;
200
315
  }
201
316
  }
317
+
318
+ .user-profile-wrap {
319
+ &:hover {
320
+ text-decoration: none;
321
+ }
322
+ &::before {
323
+ display: none;
324
+ }
325
+
326
+ img {
327
+ width: 40px;
328
+ border-radius: 100%;
329
+ overflow: hidden;
330
+ border: 1px solid $primary-color;
331
+ }
332
+
333
+ span {
334
+ display: none;
335
+ }
336
+ }
202
337
  }
203
338
 
204
339
  .mobile-menu {
@@ -217,9 +352,8 @@ li.menu-item-object-menu_openedx {
217
352
  .site-header {
218
353
  opacity: 1;
219
354
  visibility: visible;
220
- max-height: 4000px;
221
355
  transition: all 0.3s ease;
222
- max-height: 200px;
356
+ max-height: calc(100vh - 130px);
223
357
  overflow-y: auto;
224
358
  overflow-x: hidden;
225
359
  }
@@ -227,7 +361,6 @@ li.menu-item-object-menu_openedx {
227
361
  .site-header {
228
362
  opacity: 0;
229
363
  visibility: hidden;
230
- max-height: 0;
231
364
  }
232
365
  }
233
366
  }
@@ -235,7 +368,7 @@ li.menu-item-object-menu_openedx {
235
368
  .menuOpner {
236
369
  position: absolute;
237
370
  top: 50%;
238
- right: 20px;
371
+ left: 20px;
239
372
  transform: translateY(-50%);
240
373
  }
241
374
 
@@ -269,8 +402,23 @@ li.menu-item-object-menu_openedx {
269
402
  }
270
403
  }
271
404
 
405
+ @media (max-width: $mobile-breakpoint-xl) {
406
+ .custom-logo-link {
407
+ margin-right: 10px;
408
+ }
409
+ #menu-primary-menu {
410
+ > li {
411
+ padding: 10px 12px;
412
+ }
413
+ }
414
+
415
+ }
416
+
272
417
  /* Mobile Menu */
273
418
  @media (max-width: $mobile-breakpoint) {
419
+ .header-holder {
420
+ justify-content: center;
421
+ }
274
422
  .custom-logo-link img {
275
423
  max-width: 160px;
276
424
  max-height: 50px;
@@ -278,7 +426,7 @@ li.menu-item-object-menu_openedx {
278
426
  .mobile-menu {
279
427
  .site-header {
280
428
  top: 70px;
281
- padding: 0 30px;
429
+ padding: 0;
282
430
  }
283
431
  }
284
432
  #menu-primary-menu {
@@ -286,9 +434,7 @@ li.menu-item-object-menu_openedx {
286
434
  display: block;
287
435
  width: 100%;
288
436
  border-top: 1px solid #ccc;
289
- &:first-child {
290
- border-top: none;
291
- }
437
+ padding: 10px 20px;
292
438
  > .sub-menu {
293
439
  position: static;
294
440
  display: block;
@@ -296,11 +442,6 @@ li.menu-item-object-menu_openedx {
296
442
  border-radius: 0;
297
443
  border: 0;
298
444
  box-shadow: none;
299
- li {
300
- a {
301
- font-size: 12px;
302
- }
303
- }
304
445
  }
305
446
  }
306
447
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anas_hameed/edly-saas-widget",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "Frontend application template",
5
5
  "main": "dist/index.js",
6
6
  "repository": {
@@ -58,7 +58,8 @@
58
58
  },
59
59
  "dependencies": {
60
60
  "dompurify": "^3.3.0",
61
- "react-bootstrap": "^2.10.10"
61
+ "react-bootstrap": "^2.10.10",
62
+ "react-helmet": "^6.1.0"
62
63
  },
63
64
  "directories": {
64
65
  "doc": "docs"