aril 1.0.39 → 1.0.41

package/theme/layout/app/topbar/app.topbar.component.scss

@@ -1,22 +1,198 @@
+// Layout Topbar Responsive Styles
+.layout-topbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+	gap: 0.5rem;
+	padding: 0 1rem;
+
+	@media (max-width: 768px) {
+		padding: 0 0.5rem;
+		gap: 0.25rem;
+	}
+}
+
+.topbar-start {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.topbar-logo {
+	height: 32px;
+	width: auto;
+
+	@media (max-width: 768px) {
+		display: none; // Logo'yu mobile'da gizle
+	}
+}
+
+.topbar-search {
+	flex: 1;
+	max-width: 50rem;
+	margin: 0 1rem;
+
+	@media (max-width: 1024px) {
+		max-width: 30rem;
+	}
+
+	@media (max-width: 768px) {
+		max-width: 20rem;
+		margin: 0 0.5rem;
+	}
+
+	@media (max-width: 480px) {
+		max-width: 15rem;
+		margin: 0 0.25rem;
+	}
+
+	.p-input-icon-left {
+		width: 100%;
+	}
+}
+
+.topbar-search-input {
+	width: 100% !important;
+}
+
+.topbar-end {
+	flex-shrink: 0;
+}
+
+.topbar-menu {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	@media (max-width: 768px) {
+		gap: 0.25rem;
+	}
+
+	@media (max-width: 480px) {
+		gap: 0.1rem;
+	}
+}
+
+.topbar-menu-item {
+	display: flex;
+	align-items: center;
+}
+
+// Responsive visibility classes - Daha iyi yaklaşım
+.desktop-only {
+	@media (max-width: 1024px) {
+		display: none !important;
+	}
+}
+
+.mobile-only {
+	display: none !important;
+
+	@media (max-width: 1024px) {
+		display: flex !important;
+	}
+}
+
+// Custom dropdown styles
 .custom-dropdown .p-dropdown {
-  border-radius: 50px;
-  padding: 0.5rem 1rem;
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
+	border-radius: 50px;
+	padding: 0.5rem 1rem;
+	border: 1px solid #c8c8c8;
+	background-color: #f4f4f4;
+
+	@media (max-width: 768px) {
+		padding: 0.4rem 0.8rem;
+	}
+
+	@media (max-width: 480px) {
+		padding: 0.3rem 0.6rem;
+	}
 }
 
 .custom-dropdown .p-dropdown-label {
-  padding: 0;
-  line-height: 1.5;
+	padding: 0;
+	line-height: 1.5;
 }
 
 .custom-dropdown .p-dropdown-trigger {
-  border-radius: 50px;
+	border-radius: 50px;
 }
 
 .flag-icon {
-  width: 18px;
-  height: 18px;
-  display: inline-block;
-  vertical-align: middle;
-}
+	width: 18px;
+	height: 18px;
+	display: inline-block;
+	vertical-align: middle;
+
+	@media (max-width: 768px) {
+		width: 16px;
+		height: 16px;
+	}
+}
+
+// Language text responsive visibility
+.language-text {
+	@media (max-width: 480px) {
+		display: none;
+	}
+}
+
+// Menu button responsiveness
+.topbar-menubutton {
+	@media (max-width: 768px) {
+		padding: 0.4rem !important;
+	}
+
+	@media (max-width: 480px) {
+		padding: 0.3rem !important;
+	}
+}
+
+// Button responsive sizing
+@media (max-width: 768px) {
+	.topbar-menu-item p-button {
+		min-width: auto;
+
+		.p-button-icon {
+			margin: 0;
+		}
+
+		.p-button-label {
+			font-size: 0.9rem;
+		}
+	}
+}
+
+@media (max-width: 480px) {
+	.topbar-menu-item p-button {
+		.p-button-label {
+			font-size: 0.8rem;
+		}
+	}
+
+	// Divider'ı mobile'da gizle
+	.topbar-menu-item p-divider {
+		display: none;
+	}
+}
+
+// Notification icon styles
+.notification-icon {
+	cursor: pointer;
+	padding: 0.5rem;
+	border-radius: 50%;
+	transition: background-color 0.2s;
+
+	&:hover {
+		background-color: var(--surface-hover);
+	}
+
+	@media (max-width: 480px) {
+		font-size: 0.9rem;
+		padding: 0.4rem;
+	}
+}

package/theme/layout/app/topbar/app.topbar.component.ts

@@ -8,16 +8,16 @@ import { DividerModule } from 'primeng/divider';
 import { DropdownModule } from 'primeng/dropdown';
 import { MenubarModule } from 'primeng/menubar';
 
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { KeycloakService } from 'keycloak-angular';
 
 import { Apps } from 'aril/boot/config/apps';
 import { PubSubService } from 'aril/util/pub-sub';
 
 import { LayoutService } from '../../service/app.layout.service';
-import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
 import { LanguageCode } from '../../service/interfaces/enum';
 import { Language, LanguageChangeEvent } from '../../service/interfaces/interfaces';
-import { KeycloakService } from 'keycloak-angular';
+import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
 
 @Component({
 	standalone: true,
@@ -30,7 +30,8 @@ import { KeycloakService } from 'keycloak-angular';
 		DividerModule,
 		BadgeModule,
 		MenubarModule,
-		DropdownModule
+		DropdownModule,
+		TranslocoModule
 	],
 	templateUrl: './app.topbar.component.html',
 	styleUrls: ['./app.topbar.component.scss']
@@ -43,6 +44,7 @@ export class AppTopbarComponent {
 	search: string = '';
 
 	filePath = signal<string>('');
+	isNotificationsVisible = signal<boolean>(false);
 
 	currentLang: LanguageCode = (localStorage.getItem('lang') as LanguageCode) || LanguageCode.TR;
 
@@ -52,9 +54,9 @@ export class AppTopbarComponent {
 	];
 
 	constructor(
-		private	readonly translocoService: TranslocoService,
-		private	readonly pubSubService: PubSubService,
-		private readonly keycloak:KeycloakService
+		private readonly translocoService: TranslocoService,
+		private readonly pubSubService: PubSubService,
+		private readonly keycloak: KeycloakService
 	) {
 		this.translocoService.setActiveLang(this.currentLang);
 		this.publishLanguageChange(this.currentLang);
@@ -110,6 +112,26 @@ export class AppTopbarComponent {
 		this.layoutService.showConfigSidebar();
 	}
 
+	onHistoryButtonClick(): void {
+		this.layoutService.showHistorySidebar();
+	}
+
+	onSiteMapButtonClick(): void {
+		this.layoutService.showSiteMapSidebar();
+	}
+
+	onFavoritePagesButtonClick(): void {
+		this.layoutService.showFavoritePagesSidebar();
+	}
+
+	onNotificationsButtonClick(): void {
+		this.isNotificationsVisible.update((visible) => !visible);
+	}
+
+	onNotificationsClose(): void {
+		this.isNotificationsVisible.set(false);
+	}
+
 	onLanguageChange(): void {
 		localStorage.setItem('lang', this.currentLang);
 

package/theme/layout/service/app.layout.service.d.ts

@@ -16,6 +16,9 @@ interface LayoutState {
     overlayMenuActive: boolean;
     profileSidebarVisible: boolean;
     configSidebarVisible: boolean;
+    historySidebarVisible: boolean;
+    siteMapSidebarVisible: boolean;
+    favoritePagesSidebarVisible: boolean;
     staticMenuMobileActive: boolean;
     menuHoverActive: boolean;
     sidebarActive: boolean;
@@ -41,6 +44,9 @@ export declare class LayoutService {
     onOverlaySubmenuOpen(): void;
     showProfileSidebar(): void;
     showConfigSidebar(): void;
+    showHistorySidebar(): void;
+    showSiteMapSidebar(): void;
+    showFavoritePagesSidebar(): void;
     isOverlay(): boolean;
     isDesktop(): boolean;
     isSlim(): boolean;

package/theme/layout/service/app.layout.service.ts

@@ -23,6 +23,9 @@ interface LayoutState {
 	overlayMenuActive: boolean;
 	profileSidebarVisible: boolean;
 	configSidebarVisible: boolean;
+	historySidebarVisible: boolean;
+	siteMapSidebarVisible: boolean;
+	favoritePagesSidebarVisible: boolean;
 	staticMenuMobileActive: boolean;
 	menuHoverActive: boolean;
 	sidebarActive: boolean;
@@ -58,6 +61,9 @@ export class LayoutService {
 		overlayMenuActive: false,
 		profileSidebarVisible: false,
 		configSidebarVisible: false,
+		historySidebarVisible: false,
+		siteMapSidebarVisible: false,
+		favoritePagesSidebarVisible: false,
 		staticMenuMobileActive: false,
 		menuHoverActive: false,
 		sidebarActive: false,
@@ -121,6 +127,18 @@ export class LayoutService {
 		this.state.configSidebarVisible = true;
 	}
 
+	showHistorySidebar() {
+		this.state.historySidebarVisible = true;
+	}
+
+	showSiteMapSidebar() {
+		this.state.siteMapSidebarVisible = true;
+	}
+
+	showFavoritePagesSidebar() {
+		this.state.favoritePagesSidebarVisible = true;
+	}
+
 	isOverlay() {
 		return this.config().menuMode === 'overlay';
 	}
@@ -184,4 +202,4 @@ export class LayoutService {
 	changeScale(value: number) {
 		document.documentElement.style.fontSize = `${value}px`;
 	}
-}
+}