diff options
author | Mario <mario@mariovavti.com> | 2023-06-02 16:36:57 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2023-06-02 19:35:23 +0000 |
commit | 51266138250d017951b588050860872ca42367a4 (patch) | |
tree | b19630763ef8a46d53dfeb8038832d1199054fde /vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard | |
parent | 07097d2fa3cfe38a199ce4b3f9647aacc05f35e3 (diff) | |
download | volse-hubzilla-51266138250d017951b588050860872ca42367a4.tar.gz volse-hubzilla-51266138250d017951b588050860872ca42367a4.tar.bz2 volse-hubzilla-51266138250d017951b588050860872ca42367a4.zip |
update bootstrap to version 5.3
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard')
4 files changed, 194 insertions, 200 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css index ad12048e7..154940c90 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css @@ -1,61 +1,33 @@ -body { - font-size: .875rem; -} - -.feather { - width: 16px; - height: 16px; +.bi { + display: inline-block; + width: 1rem; + height: 1rem; } /* * Sidebar */ -.sidebar { - position: fixed; - top: 0; - /* rtl:raw: - right: 0; - */ - bottom: 0; - /* rtl:remove */ - left: 0; - z-index: 100; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ - box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); -} - -@media (max-width: 767.98px) { - .sidebar { - top: 5rem; +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; } -} - -.sidebar-sticky { - height: calc(100vh - 48px); - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } .sidebar .nav-link { + font-size: .875rem; font-weight: 500; - color: #333; -} - -.sidebar .nav-link .feather { - margin-right: 4px; - color: #727272; } .sidebar .nav-link.active { color: #2470dc; } -.sidebar .nav-link:hover .feather, -.sidebar .nav-link.active .feather { - color: inherit; -} - .sidebar-heading { font-size: .75rem; } @@ -71,22 +43,6 @@ body { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); } -.navbar .navbar-toggler { - top: .25rem; - right: 1rem; -} - .navbar .form-control { padding: .75rem 1rem; } - -.form-control-dark { - color: #fff; - background-color: rgba(255, 255, 255, .1); - border-color: rgba(255, 255, 255, .1); -} - -.form-control-dark:focus { - border-color: transparent; - box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); -} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js index d190d7961..a60b39356 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js @@ -1,10 +1,8 @@ -/* globals Chart:false, feather:false */ +/* globals Chart:false */ (() => { 'use strict' - feather.replace({ 'aria-hidden': 'true' }) - // Graphs const ctx = document.getElementById('myChart') // eslint-disable-next-line no-unused-vars diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css index 31ea3cc64..5c8a7e257 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css @@ -1,57 +1,33 @@ -body { - font-size: .875rem; -} - -.feather { - width: 16px; - height: 16px; +.bi { + display: inline-block; + width: 1rem; + height: 1rem; } /* * Sidebar */ -.sidebar { - position: fixed; - top: 0; - right: 0; - bottom: 0; - z-index: 100; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ - box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); -} - -@media (max-width: 767.98px) { - .sidebar { - top: 5rem; +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; } -} - -.sidebar-sticky { - height: calc(100vh - 48px); - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } .sidebar .nav-link { + font-size: .875rem; font-weight: 500; - color: #333; -} - -.sidebar .nav-link .feather { - margin-left: 4px; - color: #727272; } .sidebar .nav-link.active { color: #2470dc; } -.sidebar .nav-link:hover .feather, -.sidebar .nav-link.active .feather { - color: inherit; -} - .sidebar-heading { font-size: .75rem; } @@ -67,22 +43,6 @@ body { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25); } -.navbar .navbar-toggler { - top: .25rem; - left: 1rem; -} - .navbar .form-control { padding: .75rem 1rem; } - -.form-control-dark { - color: #fff; - background-color: rgba(255, 255, 255, .1); - border-color: rgba(255, 255, 255, .1); -} - -.form-control-dark:focus { - border-color: transparent; - box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); -} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html index 88ac303ab..4ae3f6f2f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html @@ -2,105 +2,185 @@ layout: examples title: Dashboard Template extra_css: + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" - "dashboard.css" extra_js: - - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" - integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" - src: "dashboard.js" --- -<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> - <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a> - <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search"> - <div class="navbar-nav"> - <div class="nav-item text-nowrap"> - <a class="nav-link px-3" href="#">Sign out</a> - </div> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="door-closed" viewBox="0 0 16 16"> + <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/> + <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/> + </symbol> + <symbol id="file-earmark" viewBox="0 0 16 16"> + <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/> + </symbol> + <symbol id="file-earmark-text" viewBox="0 0 16 16"> + <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/> + <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/> + </symbol> + <symbol id="gear-wide-connected" viewBox="0 0 16 16"> + <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/> + </symbol> + <symbol id="graph-up" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/> + </symbol> + <symbol id="house-fill" viewBox="0 0 16 16"> + <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/> + <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/> + </symbol> + <symbol id="list" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> + </symbol> + <symbol id="people" viewBox="0 0 16 16"> + <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/> + </symbol> + <symbol id="plus-circle" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> + <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> + </symbol> + <symbol id="puzzle" viewBox="0 0 16 16"> + <path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/> + </symbol> + <symbol id="search" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </symbol> +</svg> + +<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark"> + <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">Company name</a> + + <ul class="navbar-nav flex-row d-md-none"> + <li class="nav-item text-nowrap"> + <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search"> + <svg class="bi"><use xlink:href="#search"/></svg> + </button> + </li> + <li class="nav-item text-nowrap"> + <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> + <svg class="bi"><use xlink:href="#list"/></svg> + </button> + </li> + </ul> + + <div id="navbarSearch" class="navbar-search w-100 collapse"> + <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search"> </div> </header> <div class="container-fluid"> <div class="row"> - <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse"> - <div class="position-sticky pt-3 sidebar-sticky"> - <ul class="nav flex-column"> - <li class="nav-item"> - <a class="nav-link active" aria-current="page" href="#"> - <span data-feather="home" class="align-text-bottom"></span> - Dashboard - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file" class="align-text-bottom"></span> - Orders - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="shopping-cart" class="align-text-bottom"></span> - Products - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="users" class="align-text-bottom"></span> - Customers - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="bar-chart-2" class="align-text-bottom"></span> - Reports - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="layers" class="align-text-bottom"></span> - Integrations - </a> - </li> - </ul> + <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary"> + <div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5> + <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button> + </div> + <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> + <svg class="bi"><use xlink:href="#house-fill"/></svg> + Dashboard + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark"/></svg> + Orders + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#cart"/></svg> + Products + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#people"/></svg> + Customers + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#graph-up"/></svg> + Reports + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#puzzle"/></svg> + Integrations + </a> + </li> + </ul> - <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> - <span>Saved reports</span> - <a class="link-secondary" href="#" aria-label="Add a new report"> - <span data-feather="plus-circle" class="align-text-bottom"></span> - </a> - </h6> - <ul class="nav flex-column mb-2"> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Current month - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Last quarter - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Social engagement - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Year-end sale + <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> + <span>Saved reports</span> + <a class="link-secondary" href="#" aria-label="Add a new report"> + <svg class="bi"><use xlink:href="#plus-circle"/></svg> </a> - </li> - </ul> + </h6> + <ul class="nav flex-column mb-auto"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Current month + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Last quarter + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Social engagement + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Year-end sale + </a> + </li> + </ul> + + <hr class="my-3"> + + <ul class="nav flex-column mb-auto"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> + Settings + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#door-closed"/></svg> + Sign out + </a> + </li> + </ul> + </div> </div> - </nav> + </div> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> @@ -110,8 +190,8 @@ extra_js: <button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button> </div> - <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> - <span data-feather="calendar" class="align-text-bottom"></span> + <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> + <svg class="bi"><use xlink:href="#calendar3"/></svg> This week </button> </div> @@ -120,7 +200,7 @@ extra_js: <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> <h2>Section title</h2> - <div class="table-responsive"> + <div class="table-responsive small"> <table class="table table-striped table-sm"> <thead> <tr> |