diff --git a/resources/css/sidebar.css b/resources/css/sidebar.css index 8fdcce1..bec5e14 100644 --- a/resources/css/sidebar.css +++ b/resources/css/sidebar.css @@ -1,19 +1,21 @@ /* Container */ -#container { +.container { margin-left: 250px; margin-bottom: 56px; transition: margin-left 0.3s ease; padding: 20px; } -#container.collapsed { +.container.collapsed { margin-left: 72px; } /* Sidebar */ .sidebar { + display: flex; width: 250px; transition: width 0.3s ease; + overflow-y: auto; } .sidebar.collapsed { @@ -21,28 +23,32 @@ } /* Toggle btn */ -.sidebar #toggle-sidebar { +.sidebar .toggle-sidebar { margin-left: auto; margin-right: 0; } -.sidebar #toggle-sidebar:hover { +.sidebar .toggle-sidebar:hover { --bs-text-opacity: .75 !important; } -.sidebar.collapsed #toggle-sidebar { +.sidebar.collapsed .toggle-sidebar { margin-right: auto; } /* Toggle icon */ -.sidebar #toggle-sidebar i::before { +.sidebar .toggle-sidebar i::before { content: "\f00d"; } -.sidebar.collapsed #toggle-sidebar i::before { +.sidebar.collapsed .toggle-sidebar i::before { content: "\f0c9"; } +.sidebar .navbar-nav { + padding-bottom: 4rem; +} + .sidebar .divider { width: 100%; height: 1px; @@ -156,4 +162,42 @@ .sidebar .nav-link.black i, .sidebar .nav-link.black.active { color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; +} + +header .toggle-sidebar { + display: none; + position: fixed; + padding-left: 1rem; + top: .5rem; + left: 0; + z-index: 0; +} + +@media (max-width: 768px) { + + .container { + margin-left: 0; + } + + header .toggle-sidebar { + display: block !important; + z-index: 9999; + } + + header.collapsed .toggle-sidebar i::before { + content: "\f00d" !important; + } + + .sidebar, + .sidebar .toggle-sidebar { + display: none !important; + } + + .sidebar.collapsed { + display: flex !important; + } + + .sidebar [data-bs-toggle="collapse"]::after { + content: none !important; + } } \ No newline at end of file diff --git a/resources/js/sidebar.js b/resources/js/sidebar.js index 78224f0..039b7a6 100644 --- a/resources/js/sidebar.js +++ b/resources/js/sidebar.js @@ -1,6 +1,7 @@ $(document).ready(function () { - $('#toggle-sidebar').on('click', function () { + $('.toggle-sidebar').on('click', function () { $('.sidebar').toggleClass('collapsed'); - $('#container').toggleClass('collapsed'); + $('.container').toggleClass('collapsed'); + $('header').toggleClass('collapsed'); }); }); diff --git a/resources/views/checklist/index.blade.php b/resources/views/checklist/index.blade.php index 1f9afad..d70a353 100644 --- a/resources/views/checklist/index.blade.php +++ b/resources/views/checklist/index.blade.php @@ -17,17 +17,15 @@
# | -Name | -Items | -Actions | +Name | +Items | +Actions | ||||
---|---|---|---|---|---|---|---|---|---|---|
{{ $checklist->id }} | {{ $checklist->name }} |
@foreach ($checklist->items as $item)
diff --git a/resources/views/item/index.blade.php b/resources/views/item/index.blade.php
index f881297..544fb5e 100644
--- a/resources/views/item/index.blade.php
+++ b/resources/views/item/index.blade.php
@@ -17,7 +17,6 @@
|