xxxxxxxxxx1
2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<meta content="width=device-width, initial-scale=1.0" />6
<title>Home</title>7
8
<!-- Font Awesome -->9
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />10
11
<!-- Google Fonts Roboto -->12
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />13
14
<!-- MDB -->15
<link rel="stylesheet" href="~/mdb/css/mdb.min.css" /> 16
17
<!-- MDB Plugins -->18
<link rel="stylesheet" href="~/mdb/plugins/css/all.min.css"/>19
20
21
</head>22
<body>23
<header>24
<!-- Sidenav -->25
<nav26
id="sidenav-1"27
class="sidenav"28
data-mdb-mode="push"29
data-mdb-slim="true"30
data-mdb-slim-collapsed="true"31
data-mdb-content="#mainView"32
>33
34
<hr class="mx-0 mt-5" />35
<ul class="sidenav-menu">36
<li class="sidenav-item">37
<a class="sidenav-link">38
<i class="far fa-smile me-3"></i39
><span data-mdb-slim="false">Link 1</span></a40
>41
</li>42
<li class="sidenav-item">43
<a class="sidenav-link"44
><i class="fas fa-grin me-3"></i45
><span data-mdb-slim="false">Category 1</span></a46
>47
<ul class="sidenav-collapse">48
<li class="sidenav-item">49
<a class="sidenav-link">Link 2</a>50
</li>51
<li class="sidenav-item">52
<a class="sidenav-link">Link 3</a>53
</li>54
</ul>55
</li>56
<li class="sidenav-item">57
<a class="sidenav-link"58
><i class="fas fa-grin-wink me-3"></i59
><span data-mdb-slim="false">Category 2</span></a60
>61
<ul class="sidenav-collapse">62
<li class="sidenav-item">63
<a class="sidenav-link">Link 4</a>64
</li>65
<li class="sidenav-item">66
<a class="sidenav-link">Link 5</a>67
</li>68
</ul>69
</li>70
</ul>71
</nav>72
<!-- Sidenav -->73
<!-- Navbar -->74
<nav75
id="main-navbar"76
class="navbar navbar-expand-lg navbar-light bg-light fixed-top"77
>78
<!-- Container wrapper -->79
<div class="container-fluid">80
<!-- Toggler -->81
<button82
data-mdb-toggle="sidenav"83
data-mdb-target="#sidenav-1"84
class="btn shadow-0 p-0 me-3 d-block"85
aria-controls="#sidenav-1"86
aria-haspopup="true"87
>88
<i class="fas fa-bars fa-lg"></i>89
</button>90
91
<!-- Search form -->92
<form class="d-none d-md-flex input-group w-auto my-auto">93
<input94
autocomplete="off"95
type="search"96
class="form-control rounded"97
placeholder='Search (ctrl + "/" to focus)'98
style="min-width: 225px"99
/>100
<span class="input-group-text border-0"101
><i class="fas fa-search"></i102
></span>103
</form>104
105
<!-- Right links -->106
<ul class="navbar-nav ms-auto d-flex flex-row">107
<!-- Notification dropdown -->108
<li class="nav-item dropdown">109
<a110
class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"111
href="#"112
id="navbarDropdownMenuLink"113
role="button"114
data-mdb-toggle="dropdown"115
aria-expanded="false"116
>117
<i class="fas fa-bell"></i>118
<span class="badge rounded-pill badge-notification bg-danger"119
>1</span120
>121
</a>122
<ul123
class="dropdown-menu dropdown-menu-end"124
aria-labelledby="navbarDropdownMenuLink"125
>126
<li><a class="dropdown-item" href="#">Some news</a></li>127
<li><a class="dropdown-item" href="#">Another news</a></li>128
<li>129
<a class="dropdown-item" href="#">Something else here</a>130
</li>131
</ul>132
</li>133
134
<!-- Icon -->135
<li class="nav-item">136
<a class="nav-link me-3 me-lg-0" href="#">137
<i class="fas fa-fill-drip"></i>138
</a>139
</li>140
<!-- Icon -->141
<li class="nav-item me-3 me-lg-0">142
<a class="nav-link" href="#">143
<i class="fab fa-github"></i>144
</a>145
</li>146
147
<!-- Icon dropdown -->148
<li class="nav-item dropdown">149
<a150
class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"151
href="#"152
id="navbarDropdown"153
role="button"154
data-mdb-toggle="dropdown"155
aria-expanded="false"156
>157
<i class="united kingdom flag m-0"></i>158
</a>159
<ul160
class="dropdown-menu dropdown-menu-end"161
aria-labelledby="navbarDropdown"162
>163
<li>164
<a class="dropdown-item"165
><i class="united kingdom flag"></i>English166
<i class="fa fa-check text-success ms-2"></i167
></a>168
</li>169
<li><hr class="dropdown-divider" /></li>170
<li>171
<a class="dropdown-item"172
><i class="poland flag"></i>Polski</a173
>174
</li>175
<li>176
<a class="dropdown-item"177
><i class="china flag"></i>中文</a178
>179
</li>180
<li>181
<a class="dropdown-item"182
><i class="japan flag"></i>日本語</a183
>184
</li>185
<li>186
<a class="dropdown-item"187
><i class="germany flag"></i>Deutsch</a188
>189
</li>190
<li>191
<a class="dropdown-item"192
><i class="france flag"></i>Français</a193
>194
</li>195
<li>196
<a class="dropdown-item"197
><i class="spain flag"></i>Español</a198
>199
</li>200
<li>201
<a class="dropdown-item"202
><i class="russia flag"></i>Русский</a203
>204
</li>205
<li>206
<a class="dropdown-item"207
><i class="portugal flag"></i>Português</a208
>209
</li>210
</ul>211
</li>212
213
<!-- Avatar -->214
<li class="nav-item dropdown">215
<a216
class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"217
href="#"218
id="navbarDropdownMenuLink"219
role="button"220
data-mdb-toggle="dropdown"221
aria-expanded="false"222
>223
@*<img224
src="@avatarPreview"225
class="rounded-circle"226
height="22"227
alt=""228
loading="lazy"229
/>*@230
<i class="portugal flag"></i>231
</a>232
<ul233
class="dropdown-menu dropdown-menu-end"234
aria-labelledby="navbarDropdownMenuLink"235
>236
<li><a class="dropdown-item" asp-action="UserProfile">My Profile</a></li>237
<li><a class="dropdown-item" asp-controller="Auth" asp-action="Logout">Logout</a></li>238
</ul>239
</li>240
</ul>241
</div>242
<!-- Container wrapper -->243
</nav>244
<!-- Navbar -->245
</header>246
247
<main id="mainview" role="main" class="pb-3 py-5">248
aaaaaaaaaaaaaaaaa249
<div class="container-fluid">250
<h1 class="h3 text-center mb-0">Home</h1>251
@RenderBody()252
</div>253
254
<!--Alerts-->255
<div256
class="alert fade"257
id="alert-success"258
role="alert"259
data-mdb-color="success"260
data-mdb-position="top-right"261
data-mdb-stacking="true"262
data-mdb-width="535px"263
data-mdb-append-to-body="true"264
data-mdb-hidden="true"265
data-mdb-autohide="true"266
>267
</div>268
<div269
class="alert fade"270
id="alert-error"271
role="alert"272
data-mdb-color="danger"273
data-mdb-position="top-right"274
data-mdb-stacking="true"275
data-mdb-width="535px"276
data-mdb-append-to-body="true"277
data-mdb-hidden="true"278
data-mdb-autohide="true"279
>280
<strong>Error</strong> - Something went wrong!281
</div>282
</main>283
284
285
<!-- Footer -->286
<footer class="mt-5"></footer>287
<!-- Footer -->288
289
<!-- MDB -->290
291
292
293
</body>294
</html>xxxxxxxxxx1
@media (min-width: 1400px) {2
main,3
header,4
#main-navbar {5
/*padding-left: 240px;*/6
}7
}8
9
.table > thead > tr > th {10
border-bottom-width: 2px;11
}12
13
.table > :not(:last-child) > :last-child > * {14
border-bottom-color: inherit;15
}16
17
body {18
background-color: #fbfbfb;19
}20
21
.navbar {22
padding-left: 0 !important;23
z-index: 1041;24
}25
#mainview{26
margin-top:38px;27
}xxxxxxxxxx1
let sidenav = document.querySelector("#sidenav-1");2
3
const instance = new mdb.Sidenav(sidenav);4
console.log(instance)5
let innerWidth = null;6
let shouldBeSlim = window.innerWidth < 768 ? false : true;7
const setMode = (e) => {8
// Check necessary for Android devices9
if (window.innerWidth === innerWidth) {10
return;11
}12
13
innerWidth = window.innerWidth;14
15
if ((window.innerWidth < 768) && shouldBeSlim) {16
shouldBeSlim = false;17
instance.toggleSlim();18
19
} else if ((window.innerWidth > 768) && !shouldBeSlim) {20
shouldBeSlim = true;21
instance.toggleSlim();22
}23
24
};25
26
setMode();27
28
// Event listeners29
window.addEventListener("resize", setMode); Console errors: 0