diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
index f8414191..b101a052 100644
--- a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
+++ b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
@@ -85,7 +85,7 @@
[pTooltip]="'Title: ' + displayTitle">
{{ displayTitle }}
-
+
();
+ @Output() menuToggled = new EventEmitter();
@Input() index!: number;
@Input() book!: Book;
@@ -126,6 +127,14 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
this.bookService.readBook(book.id);
}
+ onMenuShow(): void {
+ this.menuToggled.emit(true);
+ }
+
+ onMenuHide(): void {
+ this.menuToggled.emit(false);
+ }
+
onMenuToggle(event: Event, menu: TieredMenu): void {
menu.toggle(event);
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html
index 1c6c5774..a98860a4 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html
@@ -23,8 +23,8 @@
#scrollContainer
[horizontal]="true">
@for (book of books; track book.id) {
-
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss
index ee046706..90dd2c1d 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss
@@ -96,7 +96,7 @@
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
- &:hover {
+ &:hover, &.menu-open {
transform: translateY(-4px) scale(1.04);
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts
index 25c5aae8..8a31aee2 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts
@@ -25,4 +25,9 @@ export class DashboardScrollerComponent {
@Input() isMagicShelf: boolean = false;
@ViewChild('scrollContainer') scrollContainer!: ElementRef;
+ openMenuBookId: number | null = null;
+
+ handleMenuToggle(bookId: number, isOpen: boolean) {
+ this.openMenuBookId = isOpen ? bookId : null;
+ }
}