|
|
@@ -1,153 +1,243 @@
|
|
|
<html>
|
|
|
-<head>
|
|
|
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
|
|
-<style>
|
|
|
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
|
|
|
|
|
|
-body {
|
|
|
- overflow-x: hidden;
|
|
|
- font-family: 'Roboto', sans-serif;
|
|
|
- font-size: 16px;
|
|
|
+ <head>
|
|
|
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
|
|
+ <style>
|
|
|
+
|
|
|
+
|
|
|
+ .nav-pills > li > a {
|
|
|
+ border-radius: 0;
|
|
|
}
|
|
|
|
|
|
-/* Toggle Styles */
|
|
|
+#wrapper {
|
|
|
+ padding-left: 0;
|
|
|
+ -webkit-transition: all 0.5s ease;
|
|
|
+ -moz-transition: all 0.5s ease;
|
|
|
+ -o-transition: all 0.5s ease;
|
|
|
+ transition: all 0.5s ease;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
|
|
|
-#viewport {
|
|
|
- padding-left: 250px;
|
|
|
- -webkit-transition: all 0.5s ease;
|
|
|
- -moz-transition: all 0.5s ease;
|
|
|
- -o-transition: all 0.5s ease;
|
|
|
- transition: all 0.5s ease;
|
|
|
+#wrapper.toggled {
|
|
|
+ padding-left: 250px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-#content {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- margin-right: 0;
|
|
|
+#sidebar-wrapper {
|
|
|
+ z-index: 1000;
|
|
|
+ position: absolute;
|
|
|
+ left: 250px;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: -250px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #000;
|
|
|
+ -webkit-transition: all 0.5s ease;
|
|
|
+ -moz-transition: all 0.5s ease;
|
|
|
+ -o-transition: all 0.5s ease;
|
|
|
+ transition: all 0.5s ease;
|
|
|
}
|
|
|
|
|
|
+#wrapper.toggled #sidebar-wrapper {
|
|
|
+ width: 250px;
|
|
|
+}
|
|
|
+
|
|
|
+#page-content-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ padding: 15px;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.xyz {
|
|
|
+ min-width: 360px;
|
|
|
+}
|
|
|
+
|
|
|
+#wrapper.toggled #page-content-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.fixed-brand {
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
/* Sidebar Styles */
|
|
|
|
|
|
-#sidebar {
|
|
|
- z-index: 1000;
|
|
|
- position: fixed;
|
|
|
- left: 250px;
|
|
|
- width: 250px;
|
|
|
- height: 100%;
|
|
|
- margin-left: -250px;
|
|
|
- overflow-y: auto;
|
|
|
- background: #37474F;
|
|
|
- -webkit-transition: all 0.5s ease;
|
|
|
- -moz-transition: all 0.5s ease;
|
|
|
- -o-transition: all 0.5s ease;
|
|
|
- transition: all 0.5s ease;
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar header {
|
|
|
- background-color: #263238;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 52px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar header a {
|
|
|
- color: #fff;
|
|
|
- display: block;
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar header a:hover {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar .nav{
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar .nav a{
|
|
|
- background: none;
|
|
|
- border-bottom: 1px solid #455A64;
|
|
|
- color: #CFD8DC;
|
|
|
- font-size: 14px;
|
|
|
- padding: 16px 24px;
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar .nav a:hover{
|
|
|
- background: none;
|
|
|
- color: #ECEFF1;
|
|
|
-}
|
|
|
-
|
|
|
-#sidebar .nav a i{
|
|
|
- margin-right: 16px;
|
|
|
-}
|
|
|
-</style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div id="viewport">
|
|
|
- <!-- Sidebar -->
|
|
|
- <div id="sidebar">
|
|
|
- <header>
|
|
|
- <a href="#">My App</a>
|
|
|
- </header>
|
|
|
- <ul class="nav">
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-view-dashboard"></i> Dashboard
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-link"></i> Shortcuts
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-widgets"></i> Overview
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-calendar"></i> Events
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-info-outline"></i> About
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-settings"></i> Services
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#">
|
|
|
- <i class="zmdi zmdi-comment-more"></i> Contact
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- Content -->
|
|
|
- <div id="content">
|
|
|
- <nav class="navbar navbar-default">
|
|
|
- <div class="container-fluid">
|
|
|
- <ul class="nav navbar-nav navbar-right">
|
|
|
- <li>
|
|
|
- <a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li><a href="#">Test User</a></li>
|
|
|
+.sidebar-nav {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 250px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav li {
|
|
|
+ text-indent: 15px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav li a {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav li a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border-left: red 2px solid;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav li a:active,
|
|
|
+.sidebar-nav li a:focus {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav > .sidebar-brand {
|
|
|
+ height: 65px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav > .sidebar-brand a {
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-nav > .sidebar-brand a:hover {
|
|
|
+ color: #fff;
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+
|
|
|
+.no-margin {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px) {
|
|
|
+ #wrapper {
|
|
|
+ padding-left: 250px;
|
|
|
+ }
|
|
|
+ .fixed-brand {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ #wrapper.toggled {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ #sidebar-wrapper {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ #wrapper.toggled #sidebar-wrapper {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ #wrapper.toggled-2 #sidebar-wrapper {
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ #wrapper.toggled-2 #sidebar-wrapper:hover {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ #page-content-wrapper {
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ -webkit-transition: all 0.5s ease;
|
|
|
+ -moz-transition: all 0.5s ease;
|
|
|
+ -o-transition: all 0.5s ease;
|
|
|
+ transition: all 0.5s ease;
|
|
|
+ }
|
|
|
+ #wrapper.toggled #page-content-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 0;
|
|
|
+ padding-left: 250px;
|
|
|
+ }
|
|
|
+ #wrapper.toggled-2 #page-content-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-left: -200px;
|
|
|
+ -webkit-transition: all 0.5s ease;
|
|
|
+ -moz-transition: all 0.5s ease;
|
|
|
+ -o-transition: all 0.5s ease;
|
|
|
+ transition: all 0.5s ease;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <nav class="navbar navbar-default no-margin">
|
|
|
+ <!-- Brand and toggle get grouped for better mobile display -->
|
|
|
+ <div class="navbar-header fixed-brand">
|
|
|
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
|
|
|
+ <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
|
|
|
+ </button>
|
|
|
+ <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> M-33</a>
|
|
|
+ </div>
|
|
|
+ <!-- navbar-header-->
|
|
|
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
|
+ <ul class="nav navbar-nav">
|
|
|
+ <li class="active">
|
|
|
+ <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- bs-example-navbar-collapse-1 -->
|
|
|
+ </nav>
|
|
|
+ <div id="wrapper">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <div id="sidebar-wrapper">
|
|
|
+ <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
|
|
|
+ <li class="active">
|
|
|
+ <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>
|
|
|
+ <ul class="nav-pills nav-stacked" style="list-style-type:none;">
|
|
|
+ <li><a href="#">link1</a></li>
|
|
|
+ <li><a href="#">link2</a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Shortcut</a>
|
|
|
+ <ul class="nav-pills nav-stacked" style="list-style-type:none;">
|
|
|
+ <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>
|
|
|
+ <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
- </div>
|
|
|
- </nav>
|
|
|
- <div class="container-fluid">
|
|
|
- <h1>Simple Sidebar</h1>
|
|
|
- <p>
|
|
|
- Make sure to keep all page content within the
|
|
|
- <code>#content</code>.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <!-- /#sidebar-wrapper -->
|
|
|
+ <!-- Page Content -->
|
|
|
+ <div id="page-content-wrapper">
|
|
|
+ <div class="container-fluid xyz">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-12">
|
|
|
+ <h1>Simple Admin Sidebar With Bootstrap by <a href="http://http://codepen.io/hughbalboa/">@hughbalboa</a></h1>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident laudantium nobis cum dignissimos ex inventore, velit blanditiis. Quod laborum soluta quidem culpa officia eligendi, quam, recusandae iste aliquid amet odit! </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- /#page-content-wrapper -->
|
|
|
</div>
|
|
|
- </div>
|
|
|
-</body>
|
|
|
+ <!-- /#wrapper -->
|
|
|
+ <!-- jQuery -->
|
|
|
+
|
|
|
+ </body>
|
|
|
+
|
|
|
+ </html>
|
|
|
</html>
|
Your Name