x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat: split header menus for desktop and mobile

Browse Source
This commit is contained in:
4gray committed 2026-01-05 21:54:54 +01:00
1 parent f462569879
commit e2f3583e13
2 files changed
+176 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/app/shared/components/header/header.component.html
+94 -4
View File
@@ -21,7 +21,9 @@
(input)="onSearchQueryUpdate(searchInput.value)"
/>
</div>
<div class="menu">
<!-- Desktop menu buttons -->
<div class="menu desktop-menu">
<button
mat-icon-button
class="add-playlist-btn"
@@ -42,7 +44,6 @@
>
<mat-icon>star</mat-icon>
</button>
<!-- Combined Filter & Sort button -->
<button
mat-icon-button
#filterMenuTrigger="matMenuTrigger"
@@ -71,13 +72,13 @@
} @else {
<button
mat-icon-button
[matMenuTriggerFor]="menu"
[matMenuTriggerFor]="pwaMenu"
[attr.aria-label]="'MENU.OPEN' | translate"
data-test-id="pwa-menu"
>
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<mat-menu #pwaMenu="matMenu">
@if (isHome) {
<button
mat-menu-item
@@ -129,5 +130,94 @@
</mat-menu>
}
</div>
<!-- Mobile three-dots menu (all buttons consolidated) -->
<div class="menu mobile-menu">
<button
mat-icon-button
[matMenuTriggerFor]="mobileActionsMenu"
[attr.aria-label]="'MENU.OPEN' | translate"
data-test-id="mobile-menu"
>
<mat-icon>more_vert</mat-icon>
</button>
<app-add-playlist-menu
(playlistTypeSelected)="openAddPlaylistDialog($event)"
/>
<app-filter-sort-menu [menuTrigger]="mobileFilterTrigger" />
<mat-menu #mobileActionsMenu="matMenu">
<button
mat-menu-item
[matMenuTriggerFor]="addPlaylistMenuComponent().menu()"
data-test-id="mobile-add-playlist"
>
<mat-icon>add</mat-icon>
<span>{{ 'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate }}</span>
</button>
<button
mat-menu-item
(click)="navigateToGlobalFavorites()"
data-test-id="mobile-global-favorites"
>
<mat-icon>star</mat-icon>
<span>{{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }}</span>
</button>
<button
mat-menu-item
#mobileFilterTrigger="matMenuTrigger"
[matMenuTriggerFor]="filterSortMenuComponent().menu()"
data-test-id="mobile-filter-sort"
>
<mat-icon
[matBadge]="filterSortMenuComponent().activeFiltersCount"
[matBadgeHidden]="filterSortMenuComponent().activeFiltersCount === 0"
matBadgeSize="small"
matBadgeColor="accent"
>tune</mat-icon>
<span>{{ 'HOME.FILTER_AND_SORT' | translate }}</span>
</button>
<mat-divider />
<button
mat-menu-item
(click)="openSettings()"
data-test-id="mobile-settings"
>
<mat-icon>settings</mat-icon>
<span>{{ 'MENU.SETTINGS' | translate }}</span>
</button>
@if (!isDesktop) {
<mat-divider />
<button
mat-menu-item
(click)="openUrl('https://github.com/4gray/iptvnator')"
>
<mat-icon>recommend</mat-icon>
<span>GitHub</span>
</button>
<button
mat-menu-item
(click)="openUrl('https://github.com/4gray/iptvnator/issues')"
>
<mat-icon>bug_report</mat-icon>
<span>{{ 'MENU.BUG_REPORT' | translate }}</span>
</button>
<button
mat-menu-item
(click)="openUrl('https://github.com/sponsors/4gray')"
>
<mat-icon>savings</mat-icon>
<span>{{ 'MENU.SUPPORT_PROJECT' | translate }}</span>
</button>
<mat-divider />
<button
mat-menu-item
(click)="openAboutDialog()"
>
<mat-icon>info</mat-icon>
<span>{{ 'MENU.ABOUT' | translate }}</span>
</button>
}
</mat-menu>
</div>
}
</div>
apps/web/src/app/shared/components/header/header.component.scss
+82 -19
View File
@@ -444,6 +444,15 @@
}
}
// Mobile menu visibility
.mobile-menu {
display: none;
}
.desktop-menu {
display: flex;
}
// Responsive design
@media (max-width: 899px) {
.search-container {
@@ -452,42 +461,96 @@
}
}
@media (max-width: 599px) {
.modern-header {
height: 64px;
padding-left: 70px; // Reduced padding for smaller screens
@media (max-width: 768px) {
// Hide desktop menu, show mobile menu
.desktop-menu {
display: none;
}
.mobile-menu {
display: flex;
}
// Hide brand text, keep only icon
.brand-text {
display: none;
}
.brand-block {
padding: 6px 12px 6px 6px;
gap: 8px;
padding: 6px;
border-radius: 50%;
gap: 0;
}
// Smaller search bar
.search-container {
flex: 1;
max-width: none;
margin: 0 12px;
height: 40px;
padding: 0 14px;
border-radius: 16px;
.search-input {
font-size: 13px;
&::placeholder {
font-size: 13px;
}
}
.search-icon {
font-size: 18px;
width: 18px;
height: 18px;
margin-right: 10px;
}
}
}
@media (max-width: 599px) {
.modern-header {
height: 56px;
padding: 0 12px;
}
.brand-block {
padding: 4px;
}
.logo-pulse {
width: 40px;
height: 40px;
width: 36px;
height: 36px;
img {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
}
}
.brand-text .title {
font-size: 0.95rem;
}
.search-container {
margin: 0 12px;
height: 42px;
padding: 0 16px;
margin: 0 8px;
height: 36px;
padding: 0 12px;
border-radius: 14px;
.search-input {
font-size: 14px;
font-size: 12px;
&::placeholder {
font-size: 12px;
}
}
.search-icon {
font-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
}
}
.menu {
gap: 2px;
gap: 0;
}
}