feature 9125: Fix top menu for mobile screens (#9143)

* feature-9125: Fix top menu for mobile screens

* feature-9125: Fix top menu for mobile screens

* feature-9125: Fix top menu for mobile screens

* feature-9125: Fix top menu for mobile screens

* feature-9125: Fix top menu for mobile screens

* feature-9125: Fix top menu for mobile screens

* feature-9125: Fix top menu for mobile screens

---------

Co-authored-by: ntthitrinh <[email protected]>

Author: 2 people

app/components/nav-bar.js

@@ -86,6 +86,23 @@ export default class NavBar extends Component {
     return !(String(this.session.currentRouteName).includes('events.view'));
   }
 
+  @computed('isNotPublicPageRoute')
+  get checkShowClassCssPublic() {
+    if (this.session.isAuthenticated) {
+      if (this.isNotPublicPageRoute) {
+        return 'au-home-page';
+      } else {
+        return 'au-public-page';
+      }
+    } else {
+      if (this.isNotPublicPageRoute) {
+        return 'un-home-page';
+      } else {
+        return 'un-public-page';
+      }
+    }
+  }
+
   @action
   handleKeyPress() {
     if (event.keyCode === 13 || event.which === 13) {
@@ -120,6 +137,7 @@ export default class NavBar extends Component {
     });
   }
 
+
   @action
   handleClick() {
     this.router.replaceWith('public.index',  this.globalData.idEvent);

app/styles/pages/public-event.scss

@@ -228,17 +228,11 @@
 }
 
 .logo-event {
-  margin: 10px !important;
-  width: 56px !important;
+  // margin: 10px !important;
+  // width: 56px !important;
   height: auto;
 }
 
-.btn-un-bd {
-  border: unset;
-  padding: unset !important;
-  height: 46px !important;
-}
-
 .public-social-links {
   margin-top: 1.5rem !important;
 }

app/styles/partials/nav-bar.scss

@@ -34,9 +34,10 @@
 }
 
 .menu-item-public {
+  height: 100%;
   padding-left: unset !important;
   padding-right: unset !important;
-  font-size: 12px;
+  font-size: 10px;
 }
 
 .item-exhibition {
@@ -45,12 +46,8 @@
   }
 }
 
-.rm-pd-l {
-  width: 100% !important;
-}
-
 .item-public {
-  font-size: .85714286rem !important;
+  font-size: 9px !important;
 }
 
 .item-menu-right {
@@ -62,6 +59,181 @@
 }
 
 .item-padding {
-  padding-left: 8px !important;
-  padding-right: 8px !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.header-mobile > .layout-header-mobile > .row > .two.wide.column.bl-six {
+  width: 14.5% !important;
+}
+
+.layout-header-mobile {
+
+  .row {
+    position: absolute;
+  }
+
+
+  .reset-pd {
+    padding: unset !important;
+  }
+
+  .bl-one {
+    display: flex !important;
+    margin-right: -22px !important;
+    padding-left: 18px !important;
+    border-left: 1px solid rgba(34, 36, 38, .15) !important;
+
+    .item-bl-one {
+      width: calc(100% - 44px);
+    }
+  }
+
+  .bl-two {
+    margin-left: 9px !important;
+    border-left: 1px solid rgba(34, 36, 38, .15);
+    font-size: 14px;
+
+    .item-bl-two-login {
+      border-right: 1px solid rgba(34, 36, 38, .15) !important;
+      height: 100%;
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .btn-un-bd {
+      border: unset;
+      padding: unset !important;
+      height: 46px !important;
+      width: 100%;
+      margin: auto !important;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 80%;
+      }
+    }
+  }
+
+  .bl-three {
+    display: flex !important;
+    text-align: center;
+    justify-content: center;
+  }
+
+  .bl-three-border {
+    border-right: 1px solid rgba(34, 36, 38, .15);
+  }
+
+  .bl-four {
+    display: flex !important;
+    text-align: center;
+    justify-content: center;
+
+    .menu-speakers {
+      padding-left: 8px !important;
+      padding-right: 8px !important;
+    }
+  }
+
+  .bl-six {
+    border-right: 1px solid rgba(34, 36, 38, .15);
+
+    .au-public-page {
+      justify-content: center;
+    }
+
+    .un-public-page {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .bl-six-border {
+    border-left: 1px solid rgba(34, 36, 38, .15);
+  }
+
+  .bl-seven-au-public-page {
+    margin-right: auto !important;
+    margin-left: auto !important;
+
+    .au-public-page-text {
+      text-align: center !important;
+      justify-content: center;
+    }
+  }
+
+  .au-home-page-text {
+    justify-content: center;
+  }
+
+  .bl-seven-au-home-page {
+    .text-home-page {
+      display: flex !important;
+      justify-content: center;
+    }
+  }
+
+  .bl-seven {
+    left: 3px;
+    width: 18.5% !important;
+    margin: unset !important;
+    display: flex !important;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      width: calc(100% - 4px);
+      background-color: #fff !important;
+    }
+
+    .tag-a-not-login {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: unset !important;
+    }
+
+    .a-login-public {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: unset !important;
+    }
+  }
+
+  .bl-six-login {
+    button {
+      padding-left: 7px !important;
+    }
+  }
+
+  .bl-seven-not-login {
+    margin-right: unset !important;
+  }
+
+  .item {
+    &::before {
+      position: unset !important;
+      content: unset !important;
+      top: unset !important;
+      right: unset !important;
+      height: unset !important;
+      width: unset !important;
+      background: unset !important;
+    }
+  }
+}
+
+.set-bd-home {
+  padding-left: 21px !important;
+  padding-top: unset !important;
+  padding-right: unset !important;
+  padding-bottom: unset !important;
 }