Fixes the sidebar's jank

This commit is contained in:
2024-03-25 22:02:11 -07:00
parent 3897b16aaf
commit 554d0af35e
2 changed files with 150 additions and 143 deletions

View File

@@ -44,6 +44,7 @@
:class (fnil hh/add-class "") "space-y-1.5 max-h-0 transition transition-all overflow-hidden") :class (fnil hh/add-class "") "space-y-1.5 max-h-0 transition transition-all overflow-hidden")
true (assoc ":class" (format "selected == '%s' ? 'py-0.5' : 'py-0'" (:selector params)) true (assoc ":class" (format "selected == '%s' ? 'py-0.5' : 'py-0'" (:selector params))
:x-ref "submenu" :x-ref "submenu"
:style (cond-> {} (:active? params) (assoc "max-height" "400px"))
":style" (format "selected == '%s' ? 'max-height: ' + $refs.submenu.scrollHeight + 'px' : ''" (:selector params)))) ":style" (format "selected == '%s' ? 'max-height: ' + $refs.submenu.scrollHeight + 'px' : ''" (:selector params))))
(for [c children] (for [c children]
[:li [:li
@@ -51,6 +52,8 @@
(hh/add-class (or c "") " flex items-center p-2 pl-11 w-full text-base font-normal rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700")))])]) (hh/add-class (or c "") " flex items-center p-2 pl-11 w-full text-base font-normal rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700")))])])
(defn left-aside- [{:keys [nav page-specific]} & children] (defn left-aside- [{:keys [nav page-specific]} & children]
(Thread/sleep 500)
[:aside {:id "left-nav", [:aside {:id "left-nav",
:class "fixed top-0 left-0 pt-16 z-20 w-64 h-screen transition-transform", :class "fixed top-0 left-0 pt-16 z-20 w-64 h-screen transition-transform",
"x-transition:enter" "transition duration-500" "x-transition:enter" "transition duration-500"
@@ -80,9 +83,7 @@
page-specific])]]) page-specific])]])
(defn main-aside-nav- [request] (defn main-aside-nav- [request]
[:ul {:class "space-y-1" (let [selected (cond
:x-data (hx/json {:selected
(cond
(#{::invoice-route/all-page ::invoice-route/unpaid-page ::invoice-route/voided-page ::invoice-route/paid-page} (:matched-route request)) (#{::invoice-route/all-page ::invoice-route/unpaid-page ::invoice-route/voided-page ::invoice-route/paid-page} (:matched-route request))
"invoices" "invoices"
@@ -91,7 +92,9 @@
(#{::payment-routes/all-page ::payment-routes/pending-page ::payment-routes/cleared-page ::payment-routes/voided-page } (:matched-route request)) (#{::payment-routes/all-page ::payment-routes/pending-page ::payment-routes/cleared-page ::payment-routes/voided-page } (:matched-route request))
"payments" "payments"
:else :else
nil)})} nil)]
[:ul {:class "space-y-1"
:x-data (hx/json {:selected selected})}
[:li [:li
(menu-button- {:icon svg/pie (menu-button- {:icon svg/pie
@@ -102,69 +105,71 @@
:icon svg/accounting-invoice-mail} :icon svg/accounting-invoice-mail}
"Invoices") "Invoices")
(sub-menu- (sub-menu-
{:selector "invoices"} {:selector "invoices"
:active? (= "invoices" selected)}
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::invoice-route/all-page) ::invoice-route/all-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::invoice-route/all-page (:matched-route request)) :active? (= ::invoice-route/all-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"All") "All")
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::invoice-route/paid-page) ::invoice-route/paid-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::invoice-route/paid-page (:matched-route request)) :active? (= ::invoice-route/paid-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Paid") "Paid")
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::invoice-route/unpaid-page) ::invoice-route/unpaid-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::invoice-route/unpaid-page (:matched-route request)) :active? (= ::invoice-route/unpaid-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Unpaid") "Unpaid")
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::invoice-route/voided-page) ::invoice-route/voided-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::invoice-route/voided-page (:matched-route request)) :active? (= ::invoice-route/voided-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Voided")) "Voided"))
(menu-button- {:icon svg/receipt-register-1 (menu-button- {:icon svg/receipt-register-1
"@click.prevent" "if (selected == 'sales') {selected = null } else { selected = 'sales'} "} "@click.prevent" "if (selected == 'sales') {selected = null } else { selected = 'sales'} "}
"Sales") "Sales")
(sub-menu- {:selector "sales"} (sub-menu- {:selector "sales"
:active? (= "sales" selected)}
(menu-button- {:href (str (bidi/path-for ssr-routes/only-routes (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes
:pos-sales) :pos-sales)
"?date-range=week") "?date-range=week")
:active? (= :pos-sales (:matched-route request)) :active? (= :pos-sales (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Sales") "Sales")
(menu-button- {:href (str (bidi/path-for ssr-routes/only-routes (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes
:pos-expected-deposits) :pos-expected-deposits)
"?date-range=week") "?date-range=week")
:active? (= :pos-expected-deposits (:matched-route request)) :active? (= :pos-expected-deposits (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Expected Deposits") "Expected Deposits")
(menu-button- {:href (str (bidi/path-for ssr-routes/only-routes (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes
:pos-tenders) :pos-tenders)
"?date-range=week") "?date-range=week")
:active? (= :pos-tenders (:matched-route request)) :active? (= :pos-tenders (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Tenders") "Tenders")
(menu-button- {:href (str (bidi/path-for ssr-routes/only-routes (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes
:pos-refunds) :pos-refunds)
"?date-range=week") "?date-range=week")
:active? (= :pos-refunds (:matched-route request)) :active? (= :pos-refunds (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Refunds") "Refunds")
(menu-button- {:href (str (bidi/path-for ssr-routes/only-routes (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes
:pos-cash-drawer-shifts) :pos-cash-drawer-shifts)
"?date-range=week") "?date-range=week")
:active? (= :cash-drawer-shifts (:matched-route request)) :active? (= :cash-drawer-shifts (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Cash drawer shifts")) "Cash drawer shifts"))
;; TODO make specific routes for categories ;; TODO make specific routes for categories
;; TODO auto-apen sub menus ;; TODO auto-apen sub menus
@@ -172,31 +177,32 @@
(menu-button- {"@click.prevent" "if (selected == 'payments') {selected = null } else { selected = 'payments'} " (menu-button- {"@click.prevent" "if (selected == 'payments') {selected = null } else { selected = 'payments'} "
:icon svg/payments} :icon svg/payments}
"Payments") "Payments")
(sub-menu- {:selector "payments"} (sub-menu- {:selector "payments"
:active? (= "payments" selected)}
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::payment-routes/all-page) ::payment-routes/all-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::payment-routes/all-page (:matched-route request)) :active? (= ::payment-routes/all-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"All") "All")
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::payment-routes/pending-page) ::payment-routes/pending-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::payment-routes/pending-page (:matched-route request)) :active? (= ::payment-routes/pending-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Pending") "Pending")
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::payment-routes/cleared-page) ::payment-routes/cleared-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::payment-routes/cleared-page (:matched-route request)) :active? (= ::payment-routes/cleared-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Cleared") "Cleared")
(menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes
::payment-routes/voided-page) ::payment-routes/voided-page)
{:date-range "month"}) {:date-range "month"})
:active? (= ::payment-routes/voided-page (:matched-route request)) :active? (= ::payment-routes/voided-page (:matched-route request))
:hx-boost true} :hx-boost "true"}
"Voided")) "Voided"))
[:li {:x-data (hx/json {:open false})} [:li {:x-data (hx/json {:open false})}
@@ -204,7 +210,8 @@
:icon svg/bank} :icon svg/bank}
"Transactions") "Transactions")
(sub-menu- {:selector "transactions"} (sub-menu- {:selector "transactions"
:active? (= "transactions" selected)}
(menu-button- {:href (bidi/path-for client-routes/routes (menu-button- {:href (bidi/path-for client-routes/routes
:transactions)} "All") :transactions)} "All")
(menu-button- {:href (bidi/path-for client-routes/routes (menu-button- {:href (bidi/path-for client-routes/routes
@@ -219,7 +226,8 @@
(menu-button- {"@click.prevent" "if (selected == 'ledger') {selected = null } else { selected = 'ledger'} " (menu-button- {"@click.prevent" "if (selected == 'ledger') {selected = null } else { selected = 'ledger'} "
:icon svg/receipt} :icon svg/receipt}
"Ledger") "Ledger")
(sub-menu- {:selector "ledger"} (sub-menu- {:selector "ledger"
:active? (= "ledger" selected)}
(menu-button- {:href (bidi/path-for client-routes/routes (menu-button- {:href (bidi/path-for client-routes/routes
:ledger)} "Register") :ledger)} "Register")
(menu-button- {:href (bidi/path-for client-routes/routes (menu-button- {:href (bidi/path-for client-routes/routes
@@ -231,7 +239,7 @@
(menu-button- {:href (bidi/path-for client-routes/routes (menu-button- {:href (bidi/path-for client-routes/routes
:balance-sheet)} "Balance Sheet") :balance-sheet)} "Balance Sheet")
(menu-button- {:href (bidi/path-for client-routes/routes (menu-button- {:href (bidi/path-for client-routes/routes
:external-import-ledger)} "External Ledger Import"))]) :external-import-ledger)} "External Ledger Import"))]))
(defn company-aside-nav- [_] (defn company-aside-nav- [_]

View File

@@ -84,10 +84,9 @@
matching-count])) matching-count]))
(def grid-page (def grid-page
{} (helper/build
#_(helper/build
{:id "cash-drawer-shift-table" {:id "cash-drawer-shift-table"
:nav (com/main-aside-nav) :nav com/main-aside-nav
:page-specific-nav filters :page-specific-nav filters
:fetch-page fetch-page :fetch-page fetch-page
:oob-render :oob-render