Fixes the sidebar's jank
This commit is contained in:
@@ -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"
|
||||
@@ -67,9 +70,9 @@
|
||||
[:template {:x-teleport "body"}
|
||||
|
||||
[:div.fixed.inset-0.lg:hidden {:x-show "leftNavShow" :x-transition:enter "transition duration-500" :x-transition:enter-start "opacity-0" :x-transition:enter-end "opacity-100"
|
||||
:x-transition:leave "transition duration-500" :x-transition:leave-start "opacity-100" :x-transition:leave-end "opacity-0"
|
||||
:x-transition:leave "transition duration-500" :x-transition:leave-start "opacity-100" :x-transition:leave-end "opacity-0"
|
||||
"@click.capture.prevent" "leftNavShow=false"}
|
||||
[:div.fixed.inset-0.bg-gray-800.z-10.opacity-70 ]]]
|
||||
[:div.fixed.inset-0.bg-gray-800.z-10.opacity-70]]]
|
||||
|
||||
[:div {:class "overflow-y-auto py-5 px-3 h-full bg-gray-50 border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"}
|
||||
nav
|
||||
@@ -80,158 +83,163 @@
|
||||
page-specific])]])
|
||||
|
||||
(defn main-aside-nav- [request]
|
||||
[:ul {:class "space-y-1"
|
||||
: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))
|
||||
"invoices"
|
||||
(let [selected (cond
|
||||
(#{::invoice-route/all-page ::invoice-route/unpaid-page ::invoice-route/voided-page ::invoice-route/paid-page} (:matched-route request))
|
||||
"invoices"
|
||||
|
||||
(#{:pos-sales :pos-expected-deposits :pos-tenders :pos-refunds :pos-cash-drawer-shifts} (:matched-route request))
|
||||
"sales"
|
||||
(#{::payment-routes/all-page ::payment-routes/pending-page ::payment-routes/cleared-page ::payment-routes/voided-page } (:matched-route request))
|
||||
"payments"
|
||||
:else
|
||||
nil)})}
|
||||
(#{:pos-sales :pos-expected-deposits :pos-tenders :pos-refunds :pos-cash-drawer-shifts} (:matched-route request))
|
||||
"sales"
|
||||
(#{::payment-routes/all-page ::payment-routes/pending-page ::payment-routes/cleared-page ::payment-routes/voided-page } (:matched-route request))
|
||||
"payments"
|
||||
:else
|
||||
nil)]
|
||||
[:ul {:class "space-y-1"
|
||||
:x-data (hx/json {:selected selected})}
|
||||
|
||||
[:li
|
||||
(menu-button- {:icon svg/pie
|
||||
:href "/"}
|
||||
"Dashboard")]
|
||||
[:li
|
||||
(menu-button- {:icon svg/pie
|
||||
:href "/"}
|
||||
"Dashboard")]
|
||||
|
||||
(menu-button- {"@click.prevent" "if (selected == 'invoices') {selected = null } else { selected = 'invoices'} "
|
||||
:icon svg/accounting-invoice-mail}
|
||||
"Invoices")
|
||||
(sub-menu-
|
||||
{:selector "invoices"}
|
||||
(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}
|
||||
(menu-button- {"@click.prevent" "if (selected == 'invoices') {selected = null } else { selected = 'invoices'} "
|
||||
:icon svg/accounting-invoice-mail}
|
||||
"Invoices")
|
||||
(sub-menu-
|
||||
{: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"}
|
||||
|
||||
"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}
|
||||
"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}
|
||||
"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}
|
||||
"Voided"))
|
||||
"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"}
|
||||
"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"}
|
||||
"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"}
|
||||
"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'} " }
|
||||
"Sales")
|
||||
(sub-menu- {:selector "sales"}
|
||||
(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}
|
||||
"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}
|
||||
"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}
|
||||
"Tenders")
|
||||
"@click.prevent" "if (selected == 'sales') {selected = null } else { selected = 'sales'} "}
|
||||
"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"}
|
||||
"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"}
|
||||
"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"}
|
||||
"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}
|
||||
(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"}
|
||||
|
||||
"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}
|
||||
"Cash drawer shifts"))
|
||||
"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"}
|
||||
"Cash drawer shifts"))
|
||||
;; TODO make specific routes for categories
|
||||
;; TODO auto-apen sub menus
|
||||
|
||||
(menu-button- {"@click.prevent" "if (selected == 'payments') {selected = null } else { selected = 'payments'} "
|
||||
:icon svg/payments}
|
||||
"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"}
|
||||
"All")
|
||||
|
||||
(menu-button- {"@click.prevent" "if (selected == 'payments') {selected = null } else { selected = 'payments'} "
|
||||
:icon svg/payments}
|
||||
"Payments")
|
||||
(sub-menu- {:selector "payments"}
|
||||
(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}
|
||||
"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"}
|
||||
"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"}
|
||||
"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"}
|
||||
"Voided"))
|
||||
|
||||
(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}
|
||||
"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}
|
||||
"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}
|
||||
"Voided"))
|
||||
[:li {:x-data (hx/json {:open false})}
|
||||
(menu-button- {"@click.prevent" "if (selected == 'transactions') {selected = null } else { selected = 'transactions'} "
|
||||
:icon svg/bank}
|
||||
"Transactions")
|
||||
|
||||
[:li {:x-data (hx/json {:open false})}
|
||||
(menu-button- {"@click.prevent" "if (selected == 'transactions') {selected = null } else { selected = 'transactions'} "
|
||||
:icon svg/bank}
|
||||
"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
|
||||
:unapproved-transactions)} "Unapproved")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:requires-feedback-transactions)} "Client Review")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:approved-transactions)} "Approved")
|
||||
(menu-button- {:href (bidi/path-for ssr-routes/only-routes
|
||||
:transaction-insights)} "Insights"))]
|
||||
|
||||
(sub-menu- {:selector "transactions"}
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:transactions)} "All")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:unapproved-transactions)} "Unapproved")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:requires-feedback-transactions)} "Client Review")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:approved-transactions)} "Approved")
|
||||
(menu-button- {:href (bidi/path-for ssr-routes/only-routes
|
||||
:transaction-insights)} "Insights"))]
|
||||
|
||||
(menu-button- {"@click.prevent" "if (selected == 'ledger') {selected = null } else { selected = 'ledger'} "
|
||||
:icon svg/receipt}
|
||||
"Ledger")
|
||||
(sub-menu- {:selector "ledger"}
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:ledger)} "Register")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:profit-and-loss)} "Profit & Loss")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:profit-and-loss-detail)} "Profit & Loss Detail")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:cash-flows)} "Cash Flows")
|
||||
(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"))])
|
||||
(menu-button- {"@click.prevent" "if (selected == 'ledger') {selected = null } else { selected = 'ledger'} "
|
||||
:icon svg/receipt}
|
||||
"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
|
||||
:profit-and-loss)} "Profit & Loss")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:profit-and-loss-detail)} "Profit & Loss Detail")
|
||||
(menu-button- {:href (bidi/path-for client-routes/routes
|
||||
:cash-flows)} "Cash Flows")
|
||||
(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"))]))
|
||||
|
||||
|
||||
(defn company-aside-nav- [_]
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user