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

View File

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