xxxxxxxxxx1
<!DOCTYPE html>2
<html xmlns:th="http://www.thymeleaf.org" lang="en">3
4
<div th:fragment="navigation" th:remove="tag">5
6
<div id="slide-out" class="side-nav sn-bg-4 fixed">7
<ul class="custom-scrollbar">8
<li>9
<div class="logo-wrapper waves-light">10
11
<a th:href="${nav.userUrl}" th:if="${isUser || isAdmin}">12
<img class="img-fluid flex-center"13
th:src="@{{pictureLink}(pictureLink='/getClubPicture/'+${clubModel.code})}" th:if="${clubModel != null}"/>14
<strong th:text="${clubModel.name}" th:if="${clubModel !=null}"></strong>15
</a>16
17
<a th:href="${nav.homeUrl}" th:if="${!isUser && !isAdmin}">18
<img class="img-fluid flex-center" th:src="@{/picture/digital_night_club.png}">19
<strong th:text="${clubModel.name}" th:if="${clubModel != null}"></strong>20
</a>21
22
</div>23
24
<div class="col-auto">25
<small style="color: lime" th:text="${appName}" th:if="${isUser && clubModel != null}"></small>26
<small class="text-white-50" th:text="${appName}" th:if="${!isUser || clubModel == null}"></small>27
</div>28
</li>29
30
<li>31
<ul class="collapsible collapsible-accordion">32
33
<li>34
<a class="collapsible-header waves-effect arrow-r">35
<i class="fas fa-home"></i>36
<span th:text="#{navigation.main.home}"></span>37
<i class="fas fa-angle-down rotate-icon"></i></a>38
<div class="collapsible-body">39
<ul class="list-unstyled">40
<li>41
<a class="waves-effect" th:href="${nav.userUrl}" th:text="#{navigation.main.home}"></a>42
</li>43
<li>44
<a class="waves-effect" th:href="${nav.personalUserDataUrl}" th:text="#{navigation.main.personalUserData}"></a>45
</li>46
</ul>47
</div>48
</li>49
50
<li th:if="${clubModel != null}">51
<a class="collapsible-header waves-effect arrow-r">52
<i class="fas fa-cubes"></i>53
<span th:text="#{navigation.main.clubFeatures}"></span>54
<i class="fas fa-angle-down rotate-icon"></i>55
</a>56
<div class="collapsible-body">57
<ul class="list-unstyled">58
<li>59
<a class="waves-effect" th:href="${nav.publicChatUrl}" th:text="#{navigation.main.publicChat}"></a>60
</li>61
<li>62
<a class="waves-effect" th:href="${nav.privateChatContactsUrl}" th:text="#{navigation.main.privateChat}"></a>63
</li>64
<li th:if="${orderFeature}">65
<a class="waves-effect" th:href="${nav.orderUrl}" th:text="#{navigation.main.order}"></a>66
</li>67
</ul>68
</div>69
</li>70
71
<li class="nav-item">72
<a class="nav-link text-danger" th:href="${nav.logoutUrl}" th:text="#{navigation.main.logout}"></a>73
</li>74
75
</ul>76
</li>77
</ul>78
<div class="sidenav-bg mask-strong"></div>79
</div>80
81
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-xl scrolling-navbar double-nav">82
<div class="float-left">83
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fas fa-bars"></i></a>84
</div>85
</nav>86
87
</div>88
89
1
1
xxxxxxxxxx1
// SideNav Button Initialization2
$(".button-collapse").sideNav();3
// SideNav Scrollbar Initialization4
var sideNavScrollbar = document.querySelector('.custom-scrollbar');5
var ps = new PerfectScrollbar(sideNavScrollbar); Console errors: 0