365DevNet/Nicole
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Header and LanguageSelector components for improved layout and responsiveness

Browse Source
This commit is contained in:
becarta
2025-05-18 22:04:22 +02:00
parent 3f5a192281
commit 61074be5c3
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Header.astro
View File

@@ -18,21 +18,27 @@ const phone = t['phone'];
--- ---
<header class="sticky top-0 z-50 bg-gradient-to-r from-black-deep to-black-medium backdrop-blur-md border-b border-silver-dark/30"> <header class="sticky top-0 z-50 bg-gradient-to-r from-black-deep to-black-medium backdrop-blur-md border-b border-silver-dark/30">
<div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3"> <div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
<a href={`/${currentLang}/`} class="flex items-center gap-3 group"> <!-- Logo and JPM text -->
<div class="relative w-14 h-14 flex items-center justify-center shadow-lg"> <a href={`/${currentLang}/`} class="flex items-center gap-2 group">
<img src="/Logo.png" alt="JPM Security Logo" class="h-12 w-12 object-contain transition-all group-hover:scale-110" /> <div class="relative w-10 h-10 md:w-14 md:h-14 flex items-center justify-center shadow-lg">
<img src="/Logo.png" alt="JPM Security Logo" class="h-8 w-8 md:h-12 md:w-12 object-contain transition-all group-hover:scale-110" />
</div> </div>
<span class="text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span> <span class="text-lg md:text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
</a> </a>
<div class="flex items-center gap-6">
<!-- Right side content -->
<div class="flex items-center gap-3 md:gap-6">
<!-- Language selector -->
<LanguageSelector /> <LanguageSelector />
<!-- Security & Services and phone -->
<div class="flex flex-col items-end text-right"> <div class="flex flex-col items-end text-right">
<span class="text-xl font-bold tracking-wide text-silver-light">Security & Services</span> <span class="text-base md:text-xl font-bold tracking-wide text-silver-light hidden sm:block">Security & Services</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-1 md:gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 md:h-4 md:w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" /> <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg> </svg>
<span class="text-silver-light text-sm font-medium">{phone}</span> <span class="text-silver-light text-xs sm:text-sm font-medium">{phone}</span>
</div> </div>
</div> </div>
</div> </div>

6
src/components/LanguageSelector.astro
View File

@@ -5,7 +5,7 @@ import { languages } from '../i18n/ui';
const { pathname } = Astro.url; const { pathname } = Astro.url;
// Function to get the current language and generate the URL for a different language // Function to get the current language and generate the URL for a different language
function getTargetPath(targetLang) { function getTargetPath(targetLang: string): string {
// Check if the current path starts with a language code, if so, replace it // Check if the current path starts with a language code, if so, replace it
const langPathRegex = /^\/(en|nl)\//; const langPathRegex = /^\/(en|nl)\//;
const matches = pathname.match(langPathRegex); const matches = pathname.match(langPathRegex);
@@ -20,11 +20,11 @@ function getTargetPath(targetLang) {
} }
--- ---
<div class="flex items-center space-x-2"> <div class="flex items-center">
{Object.entries(languages).map(([lang, label]) => ( {Object.entries(languages).map(([lang, label]) => (
<a <a
href={getTargetPath(lang)} href={getTargetPath(lang)}
class={`text-sm px-2 py-1 rounded ${pathname.includes(`/${lang}/`) || (pathname === '/' && lang === 'en') class={`text-xs md:text-sm px-1.5 md:px-2 py-0.5 md:py-1 rounded ${pathname.includes(`/${lang}/`) || (pathname === '/' && lang === 'en')
? 'bg-accent-blue/20 text-silver-metallic font-medium' ? 'bg-accent-blue/20 text-silver-metallic font-medium'
: 'text-silver-light/70 hover:text-silver-metallic'}`} : 'text-silver-light/70 hover:text-silver-metallic'}`}
> >