diff --git a/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.html b/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.html index e850103b2..b6492fb42 100644 --- a/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.html +++ b/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.html @@ -1,27 +1,53 @@
- - - +
+ + + +
{{ bookTitle }} - - - - - +
+ + + +
+ + @if (overflowOpen) { +
+
+ + + +
+ } +
+ + +
diff --git a/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.scss b/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.scss index 5e1015067..e05ebdd38 100644 --- a/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.scss +++ b/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.scss @@ -24,6 +24,13 @@ transform: translateY(0); } + .header-left, + .header-right { + display: flex; + align-items: center; + z-index: 1; + } + .icon-btn { background: none; border: none; @@ -42,7 +49,7 @@ opacity: 1; } - &:last-of-type { + &:last-child { margin-right: 0; } @@ -58,6 +65,7 @@ .chapter-title { flex: 1; + min-width: 0; text-align: center; font-size: 14px; font-weight: 500; @@ -68,6 +76,53 @@ overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; + padding: 0 8px; + } + + .mobile-only { + display: none; + } + + .overflow-menu { + position: relative; + } + + .overflow-backdrop { + position: fixed; + inset: 0; + z-index: 999; + } + + .overflow-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 4px; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + z-index: 1000; + min-width: 180px; + padding: 4px; + } + + .overflow-item { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 8px 12px; + background: none; + border: none; + color: inherit; + font-size: 13px; + cursor: pointer; + border-radius: 6px; + white-space: nowrap; + + &:hover { + background: rgba(128, 128, 128, 0.15); + } } } @@ -79,5 +134,13 @@ padding: 10px; margin-right: 2px; } + + .desktop-only { + display: none; + } + + .mobile-only { + display: block; + } } } diff --git a/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.ts b/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.ts index 8222a1496..447ba6fdb 100644 --- a/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.ts +++ b/booklore-ui/src/app/features/readers/ebook-reader/layout/header/header.component.ts @@ -20,6 +20,7 @@ export class ReaderHeaderComponent implements OnInit, OnDestroy { isVisible = false; isCurrentCfiBookmarked = false; isFullscreen = false; + overflowOpen = false; get bookTitle(): string { return this.headerService.title;