xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="he" dir="rtl">3
<head>4
<meta charset="utf-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />6
<meta name="author" content="Sami Halabi" />7
<meta name="description" content="Nashtap" />8
<meta name="keywords" content="Nashtap" />9
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />10
<title>sidenav RTL</title>11
<!-- this has import of mdb.rtl.min.css -->12
<link href= "css/app0.rtl.css" rel="stylesheet" type="text/css" />13
<style>14
body {15
background-color: hsl(218, 41%, 15%);16
background-image: radial-gradient(17
650px circle at 0% 0%,18
hsl(218, 41%, 35%) 15%,19
hsl(218, 41%, 30%) 35%,20
hsl(218, 41%, 20%) 75%,21
hsl(218, 41%, 19%) 80%,22
transparent 100%23
),24
radial-gradient(25
1250px circle at 100% 100%,26
hsl(218, 41%, 45%) 15%,27
hsl(218, 41%, 30%) 35%,28
hsl(218, 41%, 20%) 75%,29
hsl(218, 41%, 19%) 80%,30
transparent 100%31
);32
height: 100vh;33
/*padding-right: 70px;*/34
overflow-x: hidden;35
/*color: #fff;*/36
}37
@media (max-width: 991.98px) {38
body {39
height: 100%;40
}41
}42
.bg-theme {43
background-color: hsl(218, 41%, 25%);44
}45
.bg-glass {46
background: hsla(0, 0%, 100%, 0.15);47
backdrop-filter: blur(30px);48
}49
.text-muted {50
color: hsl(0, 0%, 80%) !important;51
}52
.hr-muted {53
border-top: 2px solid hsl(0, 0%, 50%) !important;54
}55
.text-success {56
color: hsl(144, 100%, 40.9%) !important;57
}58
.text-danger {59
color: hsl(350, 94.3%, 68.4%) !important;60
}61
.badge {62
padding: 5px 10px;63
}64
.sidenavColor {65
color: #fff;66
}67
.forceActive {68
color: #1266f1 !important;69
}70
</style>71
</head>72
<body dir="rtl" style='direction:rtl;'>73
74
<!-- SIDENAV -->75
<nav id="sidenav-1" class="sidenav bg-theme opacity-100 sidenavColor"76
data-mdb-hidden="true"77
data-mdb-accordion="true"78
data-mdb-mode="over"79
data-mdb-right="false"80
data-mdb-width="300"81
data-mdb-content="#allContent"82
data-mdb-scroll-container="#scroll-container"83
>84
85
<a class="ripple d-flex justify-content-center py-2" href="#!" data-mdb-ripple-color="primary">86
<img id="MDB-logo" src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"87
alt="MDB Logo" draggable="false" /> 88
</a>89
90
<ul class="sidenav-menu" id='scroll-container'>91
<li class="sidenav-item">92
<a class="sidenav-link fs-5" href="#">93
<i class="fas fa-home fa-fw me-3"></i><span>Home</span></a>94
</li>95
<li class="sidenav-item">96
<a class="sidenav-link fs-5" href="#">97
<i class="fas fa-list fa-fw me-3"></i><span>LINK1</span></a>98
</li>99
<li class="sidenav-item">100
<a class="sidenav-link fs-5" href="#">101
<i class="fas fa-chart-line fa-fw me-3"></i><span>LINK2</span></a>102
</li>103
</ul>104
<div class="sidenav-footer">105
footer106
</div>107
</nav>108
<!-- END of SIDENAV -->109
<!-- TOP NAVBAR -->110
<nav111
id="main-navbar"112
class="navbar navbar-expand-lg navbar-light bg-white fixed-top"113
>114
<!-- Container wrapper -->115
<div class="container-fluid">116
<!-- Toggler -->117
<button118
data-mdb-toggle="sidenav"119
data-mdb-target="#sidenav-1"120
class="btn shadow-0 p-0 me-3 d-block "121
aria-controls="#sidenav-1"122
aria-haspopup="true"123
>124
<i class="fas fa-bars fa-lg"></i>125
</button>126
127
<div class='mr-3 align-items-center text-center'>128
<div class="navbar-brand fs-2 " href="#">HEADER</div>129
</div>130
131
<div class='ml-3'>132
<button id="btnCollapseHeader" type="button" class="btn btn-link text-black-50 " data-mdb-toggle="collapse" data-mdb-target="#collapseHeader" aria-expanded="true" aria-controls="collapseHeader" ><i data-feather="maximize-2" ></i></button>133
</div>134
</div>135
<!-- Container wrapper -->136
</nav>137
<!-- END OF TOPNAV -->138
139
<!--Main Navigation-->140
<div class='container-fluid' id='allContent'>141
142
<!--Main layout-->143
<main class='' style='margin-top: 70px;'>144
<div class="container-fluid">145
146
<header id="collapseHeader"147
class="collapse show visible page-header page-header-compact page-header-light border-bottom bg-white mb-4 rounded">148
149
<div class="container-fluid">150
151
<div class="page-header-content ">152
153
<div class="row align-items-center w-100 pt-3">154
155
<div class="col-12 w-100 mb-3 ">156
<h1 class="page-header-title text-center d-flex w-100">157
Header Title Goes Here158
</h1>159
Header 2 Goes Here160
</div>161
<div class="container w-100 text-start">162
Title 2 goes Here163
</div>164
</div>165
166
</div>167
</div>168
</header>169
Content goes Here....170
</div>171
</main>172
<!--Main layout-->173
174
<!--Footer-->175
<footer class='my-3 sidenavColor'>176
<div class="container-fluid">177
<div class="row">178
<div class="col-md-12 small text-md-center">All rights Reserved</div>179
</div>180
</div>181
</footer>182
<!--END OF Footer-->183
184
</div>185
186
</body>187
</html>1
1
1
1
Console errors: 0