Merge remote-tracking branch 'upstream/layer5-ng' into kishore007k/wo…

…rkshop-page-update
Mehdi-Messaadi · Dec 23, 2020 · d764963 · d764963
2 parents dc64081 + 18b2e2a
commit d764963
Show file tree

Hide file tree

Showing 5 changed files with 266 additions and 225 deletions.
diff --git a/src/sections/Navigation/index.js b/src/sections/Navigation/index.js
@@ -26,8 +26,8 @@ const Navigation = () => {
  title
  thumbnail{
  childImageSharp{
- fluid(maxWidth: 1000){
- ...GatsbyImageSharpFluid_withWebp
+ fixed(width: 240, height: 160, cropFocus: CENTER) {
+ ...GatsbyImageSharpFixed_withWebp
  }
  }
  extension
@@ -50,8 +50,8 @@ const Navigation = () => {
  title
  thumbnail{
  childImageSharp{
- fluid(maxWidth: 1000){
- ...GatsbyImageSharpFluid_withWebp
+ fixed(width: 240, height: 160, cropFocus: CENTER) {
+ ...GatsbyImageSharpFixed_withWebp
  }
  }
  publicURL
@@ -73,8 +73,8 @@ const Navigation = () => {
  title
  thumbnail{
  childImageSharp{
- fluid(maxWidth: 1000){
- ...GatsbyImageSharpFluid_withWebp
+ fixed(width: 240, height: 160, cropFocus: CENTER) {
+ ...GatsbyImageSharpFixed_withWebp
  }
  }
  publicURL
@@ -96,8 +96,8 @@ const Navigation = () => {
  title
  thumbnail{
  childImageSharp{
- fluid(maxWidth: 1000){
- ...GatsbyImageSharpFluid_withWebp
+ fixed(width: 240, height: 160, cropFocus: CENTER) {
+ ...GatsbyImageSharpFixed_withWebp
  }
  }
  publicURL
@@ -119,8 +119,8 @@ const Navigation = () => {
  title
  thumbnail{
  childImageSharp{
- fluid(maxWidth: 1000){
- ...GatsbyImageSharpFluid_withWebp
+ fixed(width: 240, height: 160, cropFocus: CENTER) {
+ ...GatsbyImageSharpFixed_withWebp
  }
  }
  extension
@@ -141,7 +141,11 @@ const Navigation = () => {
  window.addEventListener("scroll", () =>
  window.pageYOffset > 50 ? setScroll(true) : setScroll(false)
  );
- }, [ ]);
+ }, []);
+
+ const changeDropdownState = () => {
+ setExpand(!expand);
+ };
  return (
  <NavigationWrap className={`nav-block ${scroll ? "scrolled" : ""}`}>
  <Container>
@@ -154,6 +158,34 @@ const Navigation = () => {
  className="mobile-menu-icon"
  onClick={() => setExpand(!expand)}
  />
+ {expand &&
+ <div className="mobile-dropdown-container">
+ <div className="mobile-dropdown">
+ <ul className="mobile-collapsed">
+ {Data.menuItems.map((menu, index) => (
+ <li
+ key={index}
+ className={
+ menu.subItems !== undefined ? "mobile-nav-item has-dropdown" : "mobile-nav-item"
+ }
+ >
+ <Link to={menu.path} onClick={changeDropdownState} className="menu-item">{menu.name}</Link>
+ <ul>
+ {menu.subItems !== undefined && menu.subItems.map((subItems, index) => (
+ <li
+ key={index}
+ className="mobile-nav-subitem"
+ >
+ <Link to={subItems.path} onClick={changeDropdownState} className="sub-menu-item">{subItems.name}</Link>
+ </li>
+ ))}
+ </ul>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ }
  <ScrollspyMenu
  className={`collapsed ${expand ? "is-expanded" : ""}`}
  menuItems={Data.menuItems}