Discover: sidebarFilter toggle button done.

src/assets/components.css

@@ -31,63 +31,6 @@
   }
 }
 
-/* toggle */
-/* <div class="toggle">
-    <input type="checkbox"/>
-    <label></label>
-</div> */
-.toggle {
-  position: relative;
-}
-.toggle input[type="checkbox"] {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  opacity: 0;
-}
-.toggle label {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.toggle label:before {
-    content: '';
-    border: 5px solid #bbb;
-    height: 35px;
-    width: 70px;
-    position: relative;
-    display: inline-block;
-    border-radius: 46px;
-    transition: 0.2s ease-in;
-}
-.toggle label:after {
-    content: '';
-    position: absolute;
-    background: #555;
-    width: 28px;
-    height: 28px;
-    left: 8px;
-    top: 8px;
-    border-radius: 50%;
-    z-index: 2;
-    box-shadow: 0 0 5px #0002;
-    transition: 0.2s ease-in;
-}
-.toggle input[type="checkbox"]:hover + label:after  {
-    box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
-}
-.toggle input[type="checkbox"]:checked + label:before {
-  border-color: #77C2BB;
-}
-.toggle input[type="checkbox"]:checked + label:after {
-  background: #009688;
-  left: 44px;
-}
-
 /* components */
 /* Scrollbar */
 @layer utilities {

src/assets/vendors.css

@@ -19,6 +19,7 @@
 }
 
 /* Primevue */
+/* sidebar */
 .p-sidebar-left {
   @apply ml-14
 }
@@ -32,11 +33,19 @@
 .p-sidebar-header {
   @apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between
 };
-
 .p-sidebar-right .p-sidebar-header {
   @apply flex-row-reverse !justify-end text-neutral-500
 }
-
 .p-sidebar-right .p-sidebar {
   @apply !shadow-[-1px_0px_4px_rgba(0,0,0,0.25)]
 }
+/* inputswitch */
+.p-inputswitch {
+  @apply !w-11 !h-6
+}
+.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+  @apply !bg-primary
+}
+.p-inputswitch .p-inputswitch-slider:before {
+  @apply !w-5 !h-5 !left-0.5
+}