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")
|
: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- [_]
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user