Как предотвратить рывки Навбара? - PullRequest
Новая
       24

Как предотвратить рывки Навбара?

0 голосов
/ 14 октября 2019

Я работаю над небольшим личным проектом, и у меня есть небольшая проблема, которую я не знаю, как решить. Я использую Bootstrap4, ejs templating engine и express. Мой проект имеет панель навигации, на которой я показываю Вход , если пользователь не вошел в систему, и Учетная запись в противоположном случае.

Вот соответствующая часть Navbar: 

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto ">
    <li class="nav-item  navbar-item">
      <a class="nav-link" href="/">Home </a>
    </li>
    <li class="nav-item navbar-item">
      <a class="nav-link" href="/">Some link </a>
    </li>
    <li class="nav-item navbar-item " id="nav-signIn">
      <a class="nav-link" href="/signIn">Sign in</a>
    </li>
    <li class="nav-item dropdown  navbar-item" id="nav-account">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Account
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</div>

Это функция, которая управляет тем, что показывать на стороне клиента: 

  function displayAccountOrSignIn() {
    if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
      document.querySelector('#nav-account').style.display = 'none'
    }
    else {
      document.querySelector('#nav-signIn').style.display = 'none'
    }
  }

Моя проблемаэтот Navbar «дергается», потому что сначала загружает HTML, а затем скрывает то, что не должно отображаться. Я могу это исправить, проверив файлы cookie на сервере, а затем условно отобразить части Navbar, но я не думаю, что это хорошая идея. Буду признателен за любые предложения.

1 Ответ

1 голос
/ 15 октября 2019

Здесь есть несколько вариантов. Чтобы узнать, какой из них порекомендовать, нам, вероятно, нужно поиграть с вашим реальным сайтом и попробовать несколько вещей. Все сработает и не позволит отобразить то, что не должно быть видно, некоторые могут отобразиться раньше.

  1. Сначала спрятать весь условный контент (чтобы ничего не отображалось, что не должно), а затем включитьотображение соответствующих частей с использованием вашего условного Javascript.

  2. Скрыть всю панель инструментов по умолчанию в HTML, пока вы не запустите свой условный код, а затем показать всю панель инструментов только после того, как ее состояние будет завершено вконец вашего Javascript. При желании вы можете настроить панель инструментов на visibility: hidden, а не display: none, чтобы она по-прежнему занимала соответствующую вертикальную высоту и не вызывала смещение другого содержимого при окончательном отображении.

  3. Запустите ваш условный скрипт в виде встроенного тега <script> сразу после панели инструментов HTML. Это обеспечит выполнение сценария как можно скорее после того, как HTML-код панели инструментов станет доступен. Вы можете объединить это с # 1 или # 2 выше.

  4. Определите правильную серверную панель инструментов, чтобы HTML-код, поступающий в браузер, уже был правильно сформирован. Поскольку сервер уже знает, вошел ли пользователь в систему или нет, это должно быть возможно.

...