logo-switch.astro 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. ---
  2. import Head from "@components/_head.astro";
  3. import Footer from "@components/dashboard/_footer.astro";
  4. import Topbar from "@components/dashboard/_topbar.astro";
  5. import Scripts from "@components/_scripts.astro";
  6. import { convertPathToHtml } from "../../../utils/index.js";
  7. const title = "AdminLTE 4 | Sidebar Mini";
  8. const path = "../../../dist";
  9. const htmlPath = convertPathToHtml(path);
  10. ---
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <!--begin::Head-->
  14. <head>
  15. <Head title={title} path={path} />
  16. </head>
  17. <!--end::Head-->
  18. <!--begin::Body-->
  19. <body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
  20. <!--begin::App Wrapper-->
  21. <div class="app-wrapper">
  22. <Topbar path={path} />
  23. <!--begin::Sidebar-->
  24. <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
  25. <!--begin::Sidebar Brand-->
  26. <div class="sidebar-brand">
  27. <!--begin::Brand Link-->
  28. <a href={htmlPath + "/index.html"} class="brand-link logo-switch">
  29. <!--begin::Brand Image Small-->
  30. <img
  31. src={path + "/assets/img/AdminLTELogo.png"}
  32. alt="AdminLTE Logo Small"
  33. class="brand-image-xl logo-xs opacity-75 shadow"
  34. />
  35. <!--end::Brand Image Small-->
  36. <!--begin::Brand Image Large-->
  37. <img
  38. src={path + "/assets/img/AdminLTEFullLogo.png"}
  39. alt="AdminLTE Logo Large"
  40. class="brand-image-xs logo-xl opacity-75"
  41. />
  42. <!--end::Brand Image Large-->
  43. </a>
  44. <!--end::Brand Link-->
  45. </div>
  46. <!-- Sidebar -->
  47. <!--begin::Sidebar Wrapper-->
  48. <div class="sidebar-wrapper">
  49. <nav class="mt-2">
  50. <!--begin::Sidebar Menu-->
  51. <ul
  52. class="nav sidebar-menu flex-column"
  53. data-lte-toggle="treeview"
  54. role="menu"
  55. data-accordion="false"
  56. >
  57. <li class="nav-header">MULTI LEVEL EXAMPLE</li>
  58. <li class="nav-item">
  59. <a href="#" class="nav-link">
  60. <i class="nav-icon bi bi-circle-fill"></i>
  61. <p>Level 1</p>
  62. </a>
  63. </li>
  64. <li class="nav-item">
  65. <a href="#" class="nav-link">
  66. <i class="nav-icon bi bi-circle-fill"></i>
  67. <p>
  68. Level 1
  69. <i class="nav-arrow bi bi-chevron-right"></i>
  70. </p>
  71. </a>
  72. <ul class="nav nav-treeview">
  73. <li class="nav-item">
  74. <a href="#" class="nav-link">
  75. <i class="nav-icon bi bi-circle"></i>
  76. <p>Level 2</p>
  77. </a>
  78. </li>
  79. <li class="nav-item">
  80. <a href="#" class="nav-link">
  81. <i class="nav-icon bi bi-circle"></i>
  82. <p>
  83. Level 2
  84. <i class="nav-arrow bi bi-chevron-right"></i>
  85. </p>
  86. </a>
  87. <ul class="nav nav-treeview">
  88. <li class="nav-item">
  89. <a href="#" class="nav-link">
  90. <i class="nav-icon bi bi-record-circle-fill"></i>
  91. <p>Level 3</p>
  92. </a>
  93. </li>
  94. <li class="nav-item">
  95. <a href="#" class="nav-link">
  96. <i class="nav-icon bi bi-record-circle-fill"></i>
  97. <p>Level 3</p>
  98. </a>
  99. </li>
  100. <li class="nav-item">
  101. <a href="#" class="nav-link">
  102. <i class="nav-icon bi bi-record-circle-fill"></i>
  103. <p>Level 3</p>
  104. </a>
  105. </li>
  106. </ul>
  107. </li>
  108. <li class="nav-item">
  109. <a href="#" class="nav-link">
  110. <i class="nav-icon bi bi-circle"></i>
  111. <p>Level 2</p>
  112. </a>
  113. </li>
  114. </ul>
  115. </li>
  116. <li class="nav-item">
  117. <a href="#" class="nav-link">
  118. <i class="nav-icon bi bi-circle-fill"></i>
  119. <p>Level 1</p>
  120. </a>
  121. </li>
  122. </ul>
  123. <!--end::Sidebar Menu-->
  124. </nav>
  125. </div>
  126. <!--end::Sidebar Wrapper-->
  127. </aside>
  128. <!--end::Sidebar-->
  129. <!--begin::App Main-->
  130. <main class="app-main">
  131. <!--begin::App Content Header-->
  132. <div class="app-content-header">
  133. <!--begin::Container-->
  134. <div class="container-fluid">
  135. <!--begin::Row-->
  136. <div class="row">
  137. <div class="col-sm-6">
  138. <h3 class="mb-0">Logo Switch</h3>
  139. </div>
  140. <div class="col-sm-6">
  141. <ol class="breadcrumb float-sm-end">
  142. <li class="breadcrumb-item"><a href="#">Home</a></li>
  143. <li class="breadcrumb-item active" aria-current="page">
  144. Logo Switch
  145. </li>
  146. </ol>
  147. </div>
  148. </div>
  149. <!--end::Row-->
  150. </div>
  151. <!--end::Container-->
  152. </div>
  153. <!--end::App Content Header-->
  154. <!--begin::App Content-->
  155. <div class="app-content">
  156. <!--begin::Container-->
  157. <div class="container-fluid">
  158. <!--begin::Row-->
  159. <div class="row">
  160. <div class="col-12">
  161. <!-- Default box -->
  162. <div class="card">
  163. <div class="card-header">
  164. <h3 class="card-title">Title</h3>
  165. <div class="card-tools">
  166. <button
  167. type="button"
  168. class="btn btn-tool"
  169. data-lte-toggle="card-collapse"
  170. title="Collapse"
  171. >
  172. <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
  173. <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
  174. </button>
  175. <button
  176. type="button"
  177. class="btn btn-tool"
  178. data-lte-toggle="card-remove"
  179. title="Remove"
  180. >
  181. <i class="bi bi-x-lg"></i>
  182. </button>
  183. </div>
  184. </div>
  185. <div class="card-body">
  186. Start creating your amazing application!
  187. </div>
  188. <!-- /.card-body -->
  189. <div class="card-footer">Footer</div>
  190. <!-- /.card-footer-->
  191. </div>
  192. <!-- /.card -->
  193. </div>
  194. </div>
  195. <!--begin::Row-->
  196. </div>
  197. <!--end::Container-->
  198. </div>
  199. <!--end::App Content-->
  200. </main>
  201. <!--end::App Main-->
  202. <Footer />
  203. </div>
  204. <!--end::App Wrapper-->
  205. <!--begin::Script-->
  206. <Scripts path={path} />
  207. <!--end::Script-->
  208. </body><!--end::Body-->
  209. </html>