satis 2.1.28 → 2.1.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b59e1d63bb796965a6fa1a5c5b15fea4736f5b3c6f5a9b64fae463a15a132f30
-  data.tar.gz: e1614cd0f71eea8a0a6dbad386b17253b601fd386d8cbc42739c65c507264001
+  metadata.gz: 87796f0408dfd1f75c4959ac4d84951a10639a7efd9dd1a82c2925fd81007f07
+  data.tar.gz: cb79057144e524bc3784bb7365fe14db89739fd6578520634418d470c1037bda
 SHA512:
-  metadata.gz: 22f9b908ac49cc92d1131c87458ad191df8dffa903dfdf6ffd313387f807407e0c7678917646399aaf942d3844d0af4eae7cd554e2c4bb533227500f3fb66e8a
-  data.tar.gz: c9d57aaad815d1d98e0f34004ba0bd58cee7d64cb77d2e85e5a8045bd4bda651022a186300d7a067518e4e203b8dff3625d26eb0f3da381f16423c963907198c
+  metadata.gz: 80ea589f68b0019214eacf8a60c00dd96b736cfdc32c9b6f1cc732636a4ecbe689c0dfb16483ea05d6701543b94d9c517dcfd6adc5b93a3c49d0056c767a8930
+  data.tar.gz: 3d4081872a67e41a8d412b65e241aa6a19c4cfe52b8fc09cba97cdc4baf11fa8376428154a99c717a708bc5c5c19d8ea368262f9ceff34dca0dd72b9ce9b48e6

data/app/components/satis/dropdown/component.css

@@ -24,11 +24,11 @@
 }
 
 .topbar .satis-dropdown .sts-dropdown{
-  @apply bg-gray-50 rounded-lg shadow dark:bg-gray-900;
+  @apply bg-white dark:bg-gray-900 outline dark:outline-none outline-gray-200 outline-1 rounded-md shadow-none shadow-md;
 }
 
 .page_body .satis-dropdown .sts-dropdown{
-  @apply bg-white dark:bg-gray-900 outline dark:outline-none outline-gray-300 outline-1 shadow-none;
+  @apply bg-white dark:bg-gray-900 outline dark:outline-none outline-gray-300 outline-1 rounded-md shadow-none;
 }
 
 .page_body .satis-dropdown .sts-dropdown-results{
@@ -54,11 +54,11 @@
 
 .topbar .satis-dropdown .sts-dropdown-results{
   overflow-y: scroll;
-  @apply bg-gray-50 divide-gray-900 divide-opacity-25 shadow-gray-300 shadow-lg text-gray-900 text-opacity-75 dark:bg-gray-900 dark:shadow-gray-700 dark:shadow-lg dark:bg-opacity-75 dark:divide-gray-50 dark:divide-opacity-25 dark:text-gray-300;
+  @apply bg-white divide-gray-900 divide-opacity-25 shadow-gray-300 shadow-lg text-gray-900 text-opacity-75 dark:bg-gray-900 dark:shadow-gray-700 dark:shadow-lg dark:bg-opacity-75 dark:divide-gray-50 dark:divide-opacity-25 dark:text-gray-300;
 }
 
 .topbar .satis-dropdown .sts-dropdown .sts-dropdown-input{
-  @apply bg-gray-50 dark:bg-gray-900 dark:divide-gray-100;
+  @apply bg-white dark:bg-gray-900 dark:divide-gray-100;
 }
 
 .topbar .satis-dropdown .sts-dropdown-results-items{

data/app/components/satis/page/component.css

@@ -8,24 +8,54 @@
     background-color: #f3f3f4;
   }
 
-  .topbar .arrow {
-    opacity: 0.5; 
+  .arrow {
+    opacity: 0.5;
     display: block;
     width: 70px;
     margin-top: 20px;
-    margin-left: 20px;
+    margin-left: 220px;
+    transition: 0.3s ease;
+    transition-delay: 0.1s;
+  }
+
+  .sidebar.close .arrow{
+    margin-left: 15px;
+  }
+
+  .sidebar.close .arrow .fa-solid.arrow-left-to-bracket{
+    display: none;
+  }
+
+  .sidebar.close .fa-solid.fa-arrow-right-to-bracket{
+    display: block;
+  }
+
+  .sidebar .fa-solid.fa-arrow-right-to-bracket{
+    display: none;
+  }
+
+  .topbar .account-icon {
+    display: none;
+  }
+
+  .topbar.close .account-icon {
+    display:block;
+  }
+
+  .sidebar .fa-solid.arrow-left-to-bracket{
+    display: block;
   }
 
-  .topbar .arrow:hover {
+  .arrow:hover {
     color: #555555;
     cursor: pointer;
   }
 
-  .dark .topbar .arrow:hover {
+  .dark .arrow:hover {
     color: #c0c0c0;
   }
   
-  .dark .topbar .arrow {
+  .dark .arrow {
     color: #ffffff;
     opacity: 1;
     margin-top: 20px;
@@ -37,7 +67,6 @@
   
   .page_body {
     margin-left: 260px;
-    overflow-y: scroll;
     max-width: 87%;
     position: relative;
     transition: 0.3s ease;
@@ -47,13 +76,11 @@
     margin-left: 60px;
     z-index: 1;
     position: relative;
-    overflow: visible;
   }
 
   .page_bg .page_body.close .flex-1{
     z-index: 1;
     position: relative;
-    overflow: visible;
   }
   
   .dark .page_body {

data/app/components/satis/page/component.html.slim

@@ -10,8 +10,12 @@ html lang="en"
       / TOPBAR
       .page_bg
         .topbar
-          .arrow
-            .fa-solid.fa-bars
+          .account-icon
+            - if Current.account.logo.attached?
+              = image_tag url_for(Current.account.logo.variant(resize_to_limit: [nil, 25]).processed)
+            - else
+              .h-8.w-auto
+              = Current.account.name
           / NAVBAR
           .flex-1.px-4.flex.justify-between
             = navbar
@@ -25,32 +29,3 @@ html lang="en"
             .mt-4
               .max-w.mx-auto.px-4.sm:px-4.md:px-4
                 = body
-
-
-/ Minimize Sidebar
-javascript:
-  document.addEventListener("DOMContentLoaded", () => {
-    let sidebar_collapse = document.querySelector(".sidebar");
-    let topbar = document.querySelector(".topbar");
-    let page_body = document.querySelector(".page_body");
-    let sidebarBtn = document.querySelector(".arrow");
-
-    // Check stored state and apply it
-    const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
-    if (isClosed) {
-      sidebar_collapse.classList.add("close");
-      topbar.classList.add("close");
-      page_body.classList.add("close");
-    }
-
-    sidebarBtn.addEventListener("click", () => {
-      sidebar_collapse.classList.toggle("close");
-      topbar.classList.toggle("close");
-      page_body.classList.toggle("close");
-
-      // Save the current state to sessionStorage
-      const currentState = sidebar_collapse.classList.contains("close");
-      sessionStorage.setItem('sidebarClosed', currentState);
-    });
-  });
-

data/app/components/satis/sidebar/component.css

@@ -6,14 +6,12 @@
   background: #ffffff;
   overflow: visible;
   scrollbar-width: none;
-  overflow-y: scroll;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
 }
 
 .h-screen.flex .page_bg .sidebar.close{
   z-index: 1000;
   position: absolute;
+  margin-top: 4rem;
   overflow: visible;
 }
 
@@ -32,10 +30,7 @@
   height: 100%;
   width: 60px;
   z-index: 1000;
-  overflow-y: scroll;
   scrollbar-width: none;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
 }
 
 .sidebar::-webkit-scrollbar {
@@ -49,29 +44,22 @@
   height: 4rem;
   max-width: 87%;
   margin-left: 260px;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
   background: white;
   z-index: 2;
 }
 
-.page_bg .topbar.close {
-  max-width: 97%;
-  margin-left: 60px;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
+.h-screen.flex .page_bg .topbar.close {
+  max-width: 100%;
+  margin-left: 0px;
 }
 
 .page_body.close {
   margin-left: 50px;
   max-width: 97%;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
 }
 
 
 .account-icon {
-  opacity: 0.25;
   border-radius: 25px;
   padding: 20px;
 }
@@ -85,12 +73,16 @@
   opacity: 0;
 }
 
-.sidebar.close .sts-sidebar-menu-item{
-  margin-left: 2px;
+.sidebar.close .icon-link {
+  margin-top: -40px;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
 }
 
 
-
+.sidebar.close .sts-sidebar-menu-item{
+  margin-left: 2px;
+}
 
 .sidebar .boxture-logo {
   height: 52px;
@@ -125,8 +117,6 @@
 
 .dark .sidebar {
   background: #222836;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
 }
 
 .dark .sidebar .logo_name {

data/app/components/satis/sidebar/component.html.slim

@@ -1,8 +1,10 @@
-.sidebar
+.sidebar data-controller="sidebar-component" data-sidebar-component-target="sidebar"
   = header
   .icon-link
     - @menu.items.each do |item|
       = render Satis::SidebarMenuItem::Component.new(item: item, menu_options: menu_options)
+  .arrow data-sidebar-component-target="arrow"
+    .fa-solid.fa-arrow-right-to-bracket
   = footer
 
 

data/app/components/satis/sidebar/component_controller.js

@@ -0,0 +1,41 @@
+import ApplicationController from "satis/controllers/application_controller"
+import { debounce } from "satis/utils"
+
+export default class SidebarComponentController extends ApplicationController {
+    connect() {
+        super.connect();
+        this.initializeSidebar();
+    }
+
+    initializeSidebar() {
+        let sidebar_collapse = document.querySelector(".sidebar");
+        let topbar = document.querySelector(".topbar");
+        let page_body = document.querySelector(".page_body");
+        let sidebarBtn = document.querySelector(".arrow");
+
+        // Check stored state and apply it
+        const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
+        if (isClosed) {
+            sidebar_collapse.classList.add("close");
+            topbar.classList.add("close");
+            page_body.classList.add("close");
+        }
+
+
+        sidebarBtn.addEventListener("click", () => {
+            const isClosed = sidebar_collapse.classList.toggle("close");
+            topbar.classList.toggle("close");
+            page_body.classList.toggle("close");
+
+            // Save the current state to sessionStorage
+            sessionStorage.setItem('sidebarClosed', isClosed);
+        });
+        }
+    }
+
+// Ensure the function runs on every Turbo page load
+document.addEventListener("turbo:load", () => {
+    const controller = new SidebarComponentController();
+    controller.initializeSidebar();
+});
+

data/app/components/satis/sidebar_menu_item/component.css

@@ -17,13 +17,13 @@
     @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500
   }
   &__icon {
-    @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-100 group-hover:text-gray-500;
+    @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200 group-hover:text-gray-500;
   }
   &__no-icon {
     @apply mr-3 flex-shrink-0 h-6;
   }
   &__label {
-    @apply flex-1 text-gray-700;
+    @apply flex-1 text-gray-700 dark:text-gray-300;
   }
   &__menu-icon {
     @apply text-gray-300 ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150;
@@ -33,6 +33,7 @@
 
 .page_bg .sidebar.close .sts-sidebar-menu-item__menu-icon {
   display: none;
+  margin-left: 2px;
 }
 
 .page_bg .sidebar.close .sts-sidebar-menu-item__label {
@@ -43,7 +44,6 @@
   display: none;
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0s linear 1s, opacity 1s linear; /* Ensures it stays visible for 1 second after mouse leaves */
 }
 
 .page_bg .sidebar.close .sts-sidebar-menu-item:hover .sts-sidebar-menu-item__label {
@@ -52,7 +52,7 @@
 }
 
 .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
-  @apply bg-white dark:bg-gray-900 py-0 px-0;
+  @apply rounded-md bg-white dark:bg-gray-900 py-0 px-0;
   display: block;
   visibility: visible;
   opacity: 1;
@@ -62,9 +62,6 @@
   margin-left: 35px;
   margin-top: -60px;
   z-index: 1000;
-  overflow: visible;
-  box-shadow: -0.5px 0px 3px 0.3px #aaaaaa;
-  transition: visibility 0s linear 0s, opacity 0.5s linear;
 }
 
 .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover .sts-sidebar-menu-item__label {

data/app/javascript/satis/controllers/index.js

@@ -24,6 +24,9 @@ application.register("satis-menu", MenuComponentController);
 import PageComponentController from "satis/components/page/component_controller";
 application.register("satis-page", PageComponentController);
 
+import SidebarComponentController from "satis/components/sidebar/component_controller";
+application.register("satis-sidebar", SidebarComponentController);
+
 import SidebarMenuComponentController from "satis/components/sidebar_menu/component_controller";
 application.register("satis-sidebar-menu", SidebarMenuComponentController);
 

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.28"
+  VERSION = "2.1.29"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.28
+  version: 2.1.29
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-03 00:00:00.000000000 Z
+date: 2024-07-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -824,6 +824,7 @@ files:
 - app/components/satis/sidebar/component.css
 - app/components/satis/sidebar/component.html.slim
 - app/components/satis/sidebar/component.rb
+- app/components/satis/sidebar/component_controller.js
 - app/components/satis/sidebar_menu/component.css
 - app/components/satis/sidebar_menu/component.html.slim
 - app/components/satis/sidebar_menu/component.rb