layout-sidenav-light.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  7. <meta name="description" content="" />
  8. <meta name="author" content="" />
  9. <title>Sidenav Light - SB Admin</title>
  10. <link href="css/styles.css" rel="stylesheet" />
  11. <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
  12. </head>
  13. <body class="sb-nav-fixed">
  14. <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
  15. <!-- Navbar Brand-->
  16. <a class="navbar-brand ps-3" href="index.html">Start Bootstrap</a>
  17. <!-- Sidebar Toggle-->
  18. <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
  19. <!-- Navbar Search-->
  20. <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
  21. <div class="input-group">
  22. <input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
  23. <button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
  24. </div>
  25. </form>
  26. <!-- Navbar-->
  27. <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
  28. <li class="nav-item dropdown">
  29. <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
  30. <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
  31. <li><a class="dropdown-item" href="#!">Settings</a></li>
  32. <li><a class="dropdown-item" href="#!">Activity Log</a></li>
  33. <li><hr class="dropdown-divider" /></li>
  34. <li><a class="dropdown-item" href="#!">Logout</a></li>
  35. </ul>
  36. </li>
  37. </ul>
  38. </nav>
  39. <div id="layoutSidenav">
  40. <div id="layoutSidenav_nav">
  41. <nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
  42. <div class="sb-sidenav-menu">
  43. <div class="nav">
  44. <div class="sb-sidenav-menu-heading">Core</div>
  45. <a class="nav-link" href="index.html">
  46. <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
  47. Dashboard
  48. </a>
  49. <div class="sb-sidenav-menu-heading">Interface</div>
  50. <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
  51. <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
  52. Layouts
  53. <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
  54. </a>
  55. <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
  56. <nav class="sb-sidenav-menu-nested nav">
  57. <a class="nav-link" href="layout-static.html">Static Navigation</a>
  58. <a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
  59. </nav>
  60. </div>
  61. <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
  62. <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
  63. Pages
  64. <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
  65. </a>
  66. <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
  67. <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
  68. <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
  69. Authentication
  70. <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
  71. </a>
  72. <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
  73. <nav class="sb-sidenav-menu-nested nav">
  74. <a class="nav-link" href="login.html">Login</a>
  75. <a class="nav-link" href="register.html">Register</a>
  76. <a class="nav-link" href="password.html">Forgot Password</a>
  77. </nav>
  78. </div>
  79. <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
  80. Error
  81. <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
  82. </a>
  83. <div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
  84. <nav class="sb-sidenav-menu-nested nav">
  85. <a class="nav-link" href="401.html">401 Page</a>
  86. <a class="nav-link" href="404.html">404 Page</a>
  87. <a class="nav-link" href="500.html">500 Page</a>
  88. </nav>
  89. </div>
  90. </nav>
  91. </div>
  92. <div class="sb-sidenav-menu-heading">Addons</div>
  93. <a class="nav-link" href="charts.html">
  94. <div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
  95. Charts
  96. </a>
  97. <a class="nav-link" href="tables.html">
  98. <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
  99. Tables
  100. </a>
  101. </div>
  102. </div>
  103. <div class="sb-sidenav-footer">
  104. <div class="small">Logged in as:</div>
  105. Start Bootstrap
  106. </div>
  107. </nav>
  108. </div>
  109. <div id="layoutSidenav_content">
  110. <main>
  111. <div class="container-fluid px-4">
  112. <h1 class="mt-4">Sidenav Light</h1>
  113. <ol class="breadcrumb mb-4">
  114. <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
  115. <li class="breadcrumb-item active">Sidenav Light</li>
  116. </ol>
  117. <div class="card mb-4">
  118. <div class="card-body">
  119. This page is an example of using the light side navigation option. By appending the
  120. <code>.sb-sidenav-light</code>
  121. class to the
  122. <code>.sb-sidenav</code>
  123. class, the side navigation will take on a light color scheme. The
  124. <code>.sb-sidenav-dark</code>
  125. is also available for a darker option.
  126. </div>
  127. </div>
  128. </div>
  129. </main>
  130. <footer class="py-4 bg-light mt-auto">
  131. <div class="container-fluid px-4">
  132. <div class="d-flex align-items-center justify-content-between small">
  133. <div class="text-muted">Copyright &copy; Your Website 2023</div>
  134. <div>
  135. <a href="#">Privacy Policy</a>
  136. &middot;
  137. <a href="#">Terms &amp; Conditions</a>
  138. </div>
  139. </div>
  140. </div>
  141. </footer>
  142. </div>
  143. </div>
  144. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  145. <script src="js/scripts.js"></script>
  146. </body>
  147. </html>