diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 91e34f8..57000b0 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,6 +1,8 @@ import { Routes } from '@angular/router'; +import { languageGuard } from './guards/language.guard'; -export const routes: Routes = [ +// Child routes without language prefix +const childRoutes: Routes = [ { path: '', loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent) @@ -64,9 +66,25 @@ export const routes: Routes = [ { path: 'guarantee', loadComponent: () => import('./pages/info/guarantee/guarantee.component').then(m => m.GuaranteeComponent) - }, - { - path: '**', - redirectTo: '' + } +]; + +export const routes: Routes = [ + // Routes with language prefix: /ru, /en, /hy + { + path: ':lang', + canActivate: [languageGuard], + children: childRoutes + }, + // Redirect root to default language + { + path: '', + pathMatch: 'full', + redirectTo: 'ru' + }, + // Catch-all: redirect unknown routes to home with default language + { + path: '**', + redirectTo: 'ru' } ]; diff --git a/src/app/guards/language.guard.ts b/src/app/guards/language.guard.ts new file mode 100644 index 0000000..7cc6099 --- /dev/null +++ b/src/app/guards/language.guard.ts @@ -0,0 +1,56 @@ +import { inject } from '@angular/core'; +import { CanActivateFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; +import { LanguageService } from '../services/language.service'; + +export const languageGuard: CanActivateFn = ( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot +) => { + const languageService = inject(LanguageService); + const router = inject(Router); + + const langParam = route.paramMap.get('lang'); + + if (langParam) { + const validLanguage = languageService.languages.find( + l => l.code === langParam && l.enabled + ); + + if (validLanguage) { + languageService.setLanguage(langParam); + return true; + } else { + // Invalid language code - redirect to default language + const currentLang = languageService.currentLanguage(); + const pathWithoutLang = state.url.replace(`/${langParam}`, ''); + router.navigate([`/${currentLang}${pathWithoutLang || '/'}`]); + return false; + } + } + + return true; +}; + +export const redirectToLanguageGuard: CanActivateFn = ( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot +) => { + const languageService = inject(LanguageService); + const router = inject(Router); + + // Check if URL already has language prefix + const firstSegment = state.url.split('/')[1]; + const hasLangPrefix = languageService.languages.some( + l => l.code === firstSegment && l.enabled + ); + + if (!hasLangPrefix) { + // Redirect to URL with language prefix + const currentLang = languageService.currentLanguage(); + const newUrl = `/${currentLang}${state.url === '/' ? '' : state.url}`; + router.navigate([newUrl], { replaceUrl: true }); + return false; + } + + return true; +}; diff --git a/src/app/pages/info/contacts/contacts.component.scss b/src/app/pages/info/contacts/contacts.component.scss index 4ea0567..acb266a 100644 --- a/src/app/pages/info/contacts/contacts.component.scss +++ b/src/app/pages/info/contacts/contacts.component.scss @@ -27,14 +27,17 @@ strong { display: block; margin-bottom: 0.25rem; - color: var(--text-primary); + color: var(--text-secondary); + font-size: 0.85rem; } a { - color: var(--primary-color); + color: var(--text-primary); text-decoration: none; + font-weight: 500; &:hover { + color: var(--primary-color); text-decoration: underline; } } diff --git a/src/styles/shared-legal.scss b/src/styles/shared-legal.scss index 4196da7..0fa3a8a 100644 --- a/src/styles/shared-legal.scss +++ b/src/styles/shared-legal.scss @@ -391,20 +391,22 @@ transform: translateY(-2px); box-shadow: var(--shadow-sm); - strong, p, a { + *, strong, p, a, .contact-label, .contact-value { color: white !important; } } - strong { + strong, .contact-label { display: block; - color: var(--primary-color); + color: var(--text-secondary); margin-bottom: 0.5rem; + font-size: 0.85rem; } - p, a { + p, a, .contact-value { margin: 0; color: var(--text-primary); + font-weight: 500; } } }