success to show navbar correctly but in the middle of the fixing and need to add swig on the html file

src/client/js/services/AppContainer.js

@@ -41,9 +41,23 @@ export default class AppContainer extends Container {
 
     const userAgent = window.navigator.userAgent.toLowerCase();
     this.isMobile = /iphone|ipad|android/.test(userAgent);
-    const appVersion = window.navigator.appVersion.toLowerCase();
-    this.isOldIos = /iphone 12/.test(appVersion);
-    console.log(`isOldios = ${this.isOldIos}`);
+
+    // this.isIos = /iphone|ipad/.test(userAgent);
+    // const appVersion = window.navigator.appVersion.toLowerCase();
+    // if (isIos && appVersion < 12.5) {
+    //   return false;
+    // }
+    // const this.isOldIos =
+    // const isOldIos = false;
+    // if (userAgent.indexOf('iphone') !== -1 && appVersion.indexOf('12') !== -1) {
+    //   isOldIos = true;
+    //   console.log(appVersion);
+    // const iphone = userAagent.indexOf('iphone');
+    // this.isOldIos = /iphone 12/.test(appVersion);
+    // if (appVersion <= 12) {
+
+    // }
+
 
     const currentUserElem = document.getElementById('growi-current-user');
     if (currentUserElem != null) {

src/client/styles/scss/_navbar.scss

@@ -1,6 +1,10 @@
 .grw-navbar {
   top: -$grw-navbar-height !important;
 
+  &.grw-navbar-for-old-ios {
+    top: initial !important;
+  }
+
   max-height: $grw-navbar-height + $grw-navbar-border-width;
   border-top: 0;
   border-right: 0;

src/server/views/layout/layout.html

@@ -71,7 +71,7 @@
 <div id="wrapper">
 
   {% block layout_head_nav %}
-    <nav id="grw-navbar" class="navbar grw-navbar navbar-expand navbar-dark sticky-top mb-0 px-0"></nav>
+    <nav id="grw-navbar" class="navbar grw-navbar sticky-top grw-navbar-for-old-ios navbar-expand navbar-dark  mb-0 px-0"></nav>
   {% endblock  %} {# layout_head_nav #}
 
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}