fix sidebar

kinouzero · Mar 30, 2024 · 464c8a6 · 464c8a6
1 parent fbcc3e6
commit 464c8a6
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 35 deletions.
diff --git a/resources/css/sidebar.css b/resources/css/sidebar.css
@@ -1,48 +1,54 @@
 /* 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 {
   width: 72px;
 }
 
 /* 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;
+  }
 }
diff --git 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
@@ -17,17 +17,15 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
-            <th>Name</th>
-            <th>Items</th>
-            <th class="text-end">Actions</th>
+            <th data-priority="1">Name</th>
+            <th data-priority="2" data-orderable="false">Items</th>
+            <th class="text-end" data-orderable="false">Actions</th>
           </tr>
         </thead>
         @if ($checklists)
           <tbody>
             @foreach ($checklists as $checklist)
               <tr>
-                <td class="text-center">{{ $checklist->id }}</td>
                 <td>{{ $checklist->name }}</td>
                 <td>
                   @foreach ($checklist->items as $item)

diff --git a/resources/views/item/index.blade.php b/resources/views/item/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Checklist</th>
             <th>Parent</th>
@@ -28,7 +27,6 @@
           <tbody>
             @foreach ($items as $item)
               <tr>
-                <td class="text-center">{{ $item->id }}</td>
                 <td>{{ $item->name }}</td>
                 <td>{{ $item->checklist->name }}</td>
                 <td>{{ $item->parent ? $item->parent->name : '' }}</td>

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -31,11 +31,13 @@
   <body class="bg-light z-2">
 
       @if (auth()->check())
-        @include('layouts.header')
         @include('layouts.sidebar')
       @endif
 
-      <div id="container" class="p-3 {{ auth()->check() ? '' : 'ms-0' }}">
+      <div class="container p-3 {{ auth()->check() ? '' : 'ms-0' }}">
+         @if (auth()->check())
+          @include('layouts.header')
+        @endif
         @if (session('success'))
             @include('layouts.alert', [
                 'color' => 'success',

diff --git a/resources/views/layouts/header.blade.php b/resources/views/layouts/header.blade.php
@@ -1,3 +1,3 @@
 <header>
-
+  <button class="btn btn-dark ps-3 rounded-0 rounded-end toggle-sidebar"><i class="fas fa-bars"></i></button>
 </header>
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
@@ -1,4 +1,4 @@
-<div class="sidebar bg-dark position-fixed h-100 top-0 left-0 d-flex flex-column" id="sidebar">
+<div class="sidebar bg-dark position-fixed h-100 top-0 left-0 flex-column" id="sidebar">
 
   <div class="d-flex pt-3 px-3">
     <a class="text-white text-decoration-none d-flex align-items-center justify-content-center" href="/">
@@ -7,7 +7,7 @@
       </div>
       <div class="nav-title">kzPlants</div>
     </a>
-    <a href="#" class="text-white" id="toggle-sidebar"><i class="fas fa-bars"></i></a>
+    <a href="#" class="text-white toggle-sidebar"><i class="fas fa-bars"></i></a>
   </div>
 
   <ul class="navbar-nav flex-column mb-auto mx-auto w-100">

diff --git a/resources/views/plant/index.blade.php b/resources/views/plant/index.blade.php
@@ -21,7 +21,6 @@ class="fas fa-plus"></i></a>
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Strain</th>
             <th>Tags</th>
@@ -33,7 +32,6 @@ class="fas fa-plus"></i></a>
           <tbody>
             @foreach ($plants as $plant)
               <tr>
-                <td class="text-center">{{ $plant->id }}</td>
                 <td>
                   <div class="d-flex align-items-center">
                     <span class="badge text-nowrap me-2" style="background-color:{{ $plant->statut->color }}">

diff --git a/resources/views/preference/index.blade.php b/resources/views/preference/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th class="text-end">Actions</th>
           </tr>
@@ -26,7 +25,6 @@
           <tbody>
             @foreach ($preferences as $preference)
               <tr>
-                <td class="text-center">{{ $preference->id }}</td>
                 <td>{{ $preference->name }}</td>
                 <td>
                   <div class="d-flex align-items-center">

diff --git a/resources/views/property/index.blade.php b/resources/views/property/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th class="text-end">Actions</th>
           </tr>
@@ -26,7 +25,6 @@
           <tbody>
             @foreach ($properties as $property)
               <tr>
-                <td class="text-center">{{ $property->id }}</td>
                 <td>{{ $property->name }}</td>
                 <td>
                   <div class="d-flex align-items-center">

diff --git a/resources/views/statut/index.blade.php b/resources/views/statut/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Color</th>
             <th class="text-end">Actions</th>
@@ -27,7 +26,6 @@
           <tbody>
             @foreach ($status as $statut)
               <tr>
-                <td class="text-center">{{ $statut->id }}</td>
                 <td>{{ $statut->name }}</td>
                 <td>
                   <div class="d-flex align-items-center">

diff --git a/resources/views/strain/index.blade.php b/resources/views/strain/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Tags</th>
             <th>Properties</th>
@@ -28,7 +27,6 @@
           <tbody>
             @foreach ($strains as $strain)
               <tr>
-                <td class="text-center">{{ $strain->id }}</td>
                 <td>{{ $strain->name }}</td>
                 <td>
                   {!! $strain->templateTags() !!}

diff --git a/resources/views/tag/index.blade.php b/resources/views/tag/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Color</th>
             <th class="text-end">Actions</th>
@@ -27,7 +26,6 @@
           <tbody>
             @foreach ($tags as $tag)
               <tr>
-                <td class="text-center">{{ $tag->id }}</td>
                 <td>{{ $tag->name }}</td>
                 <td>
                   <div class="d-flex align-items-center">

diff --git a/resources/views/user/index.blade.php b/resources/views/user/index.blade.php
@@ -17,7 +17,6 @@
       <table class="datatable w-100" data-page-length={{ App\Models\User::getTableLength(auth()->user()) }}>
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Roles</th>
             <th class="text-end">Actions</th>
@@ -27,7 +26,6 @@
           <tbody>
             @foreach ($users as $user)
               <tr>
-                <td class="text-center">{{ $user->id }}</td>
                 <td>{{ $user->name }}</td>
                 <td>
                   {{ implode(', ', $user->roles->pluck('name')->toArray()) }}