Add BrandLogo and LanguagePicker components
Introduced two new components (BrandLogo and LanguagePicker) to the Navbar component. This refactor improves readability and maintainability of the code. Additionally, SVG icons are extracted into reusable components
This commit is contained in:
Emil Gulamov
parent
d3212bc62d
commit
9bd4ff79ac
9 changed files with 193 additions and 127 deletions
61
src/components/BrandLogo.astro
Normal file
61
src/components/BrandLogo.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
const { width } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
width: string;
|
||||
}
|
||||
---
|
||||
|
||||
<svg class=`h-auto ${width}` viewBox="0 0 521 226" fill="none">
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="269"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 269 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="319"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 319 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="369.285"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 369.285 154.911)"></rect>
|
||||
<rect
|
||||
width="28.464"
|
||||
height="18.485"
|
||||
x="419.57"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 419.57 154.911)"></rect>
|
||||
<path
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -5,6 +5,7 @@ import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
|
|||
import enStrings from "@/utils/navigation.ts";
|
||||
import frStrings from "@/utils/fr/navigation.ts";
|
||||
import Icon from "../ui/icons/Icon.astro";
|
||||
import BrandLogo from "@/components/BrandLogo.astro";
|
||||
import { SITE } from "@/data_files/constants";
|
||||
|
||||
// Select the correct translation based on the page's lang prop:
|
||||
|
|
@ -24,59 +25,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
|
|||
<div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
|
||||
<div class="col-span-full lg:col-span-1">
|
||||
<!-- Brand Logo -->
|
||||
<svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="269"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 269 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="319"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 319 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="369.285"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 369.285 154.911)"></rect>
|
||||
<rect
|
||||
width="28.464"
|
||||
height="18.485"
|
||||
x="419.57"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 419.57 154.911)"></rect>
|
||||
<path
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
|
||||
></path>
|
||||
</svg>
|
||||
<BrandLogo width="w-32" />
|
||||
</div>
|
||||
<!-- An array of links for Product and Company sections -->
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import NavLink from "../ui/links/NavLink.astro";
|
|||
import Authentication from "./Authentication.astro";
|
||||
import enStrings from "@/utils/navigation.ts";
|
||||
import frStrings from "@/utils/fr/navigation.ts";
|
||||
import BrandLogo from "../BrandLogo.astro";
|
||||
import LanguagePicker from "../ui/LanguagePicker.astro";
|
||||
|
||||
// Select the correct translation based on the page's lang prop:
|
||||
const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
|
||||
|
|
@ -27,59 +29,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
|
|||
href={homeUrl}
|
||||
aria-label="Brand"
|
||||
>
|
||||
<svg class="h-auto w-24" viewBox="0 0 521 226" fill="none">
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="269"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 269 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="319"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 319 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="369.285"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 369.285 154.911)"></rect>
|
||||
<rect
|
||||
width="28.464"
|
||||
height="18.485"
|
||||
x="419.57"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 419.57 154.911)"></rect>
|
||||
<path
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
|
||||
></path>
|
||||
</svg>
|
||||
<BrandLogo width="w-24" />
|
||||
</a>
|
||||
<!-- Collapse toggle for smaller screens -->
|
||||
<div class="ml-auto mr-5 md:hidden">
|
||||
|
|
@ -133,7 +83,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
|
|||
>
|
||||
<!-- Navigation links container -->
|
||||
<div
|
||||
class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-7 md:gap-y-0 md:ps-7"
|
||||
class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-4 lg:gap-x-7 md:gap-y-0 md:ps-7"
|
||||
>
|
||||
<!-- Navigation links and Authentication component -->
|
||||
{strings.navBarLinks.map(link => (
|
||||
|
|
@ -141,6 +91,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
|
|||
))}
|
||||
|
||||
<Authentication />
|
||||
<LanguagePicker />
|
||||
<!-- ThemeIcon component specifically for larger screens -->
|
||||
<span class="hidden md:inline-block">
|
||||
<ThemeIcon />
|
||||
|
|
|
|||
79
src/components/ui/LanguagePicker.astro
Normal file
79
src/components/ui/LanguagePicker.astro
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
import { languages } from "@/utils//ui";
|
||||
import Icon from "./icons/Icon.astro";
|
||||
---
|
||||
|
||||
<div class="hs-dropdown relative inline-flex">
|
||||
<button
|
||||
id="hs-dropdown-default"
|
||||
type="button"
|
||||
class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
|
||||
>
|
||||
<Icon name="earth" />
|
||||
<svg
|
||||
class="size-4 hs-dropdown-open:rotate-180"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
|
||||
>
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="hs-dropdown-menu duration mt-2 hidden rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] before:absolute before:-top-4 before:start-0 before:h-4 before:w-full after:absolute after:-bottom-4 after:start-0 after:h-4 after:w-full hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
|
||||
aria-labelledby="hs-dropdown-hover-event"
|
||||
>
|
||||
{
|
||||
Object.entries(languages).map(([lang, label]) => (
|
||||
<a
|
||||
class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
|
||||
href={`/${lang === "en" ? "" : lang}`}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Import the necessary Dropdown plugin-->
|
||||
<!--https://preline.co/plugins/html/dropdown.html-->
|
||||
<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>
|
||||
|
||||
<script>
|
||||
type TLanguage = "en" | "fr";
|
||||
const languages: TLanguage[] = ["en", "fr"];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const languageLinks = document.querySelectorAll(".hs-dropdown-menu a");
|
||||
languageLinks.forEach((element) => {
|
||||
const link = element as HTMLAnchorElement;
|
||||
const lang = link
|
||||
.getAttribute("href")
|
||||
?.replace("/", "")
|
||||
.replace("/", "") as TLanguage;
|
||||
|
||||
link.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const url = new URL(window.location.href);
|
||||
const pathParts = url.pathname
|
||||
.split("/")
|
||||
.filter((part) => part && !languages.includes(part as TLanguage));
|
||||
|
||||
if (lang === url.pathname.split("/")[1]) return;
|
||||
|
||||
if (lang !== "en") {
|
||||
pathParts.unshift(lang);
|
||||
}
|
||||
|
||||
url.pathname = pathParts.join("/");
|
||||
window.location.href = url.toString();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -406,4 +406,19 @@ export const Icons = {
|
|||
strokeLinejoin: "round",
|
||||
stroke: "currentColor",
|
||||
},
|
||||
earth: {
|
||||
paths: [
|
||||
{
|
||||
d: "m20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525",
|
||||
},
|
||||
],
|
||||
class:
|
||||
"w-4 h-4 flex-shrink-0",
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
strokeWidth: "1.5",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
stroke: "currentColor",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ We assign an ID matching the URL for easy reference in our script.
|
|||
If URL is '/' (home page), assign ID as 'home'
|
||||
-->
|
||||
<a
|
||||
id={url === "/" ? "home" : url.split("/")[1]}
|
||||
id={url === "/" ? "home" : url.replace("/", "")}
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
class="rounded-lg text-base font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 md:text-sm 2xl:text-base"
|
||||
|
|
@ -25,18 +25,25 @@ If URL is '/' (home page), assign ID as 'home'
|
|||
</a>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let url = window.location.pathname;
|
||||
let urlSegments = url.split("/");
|
||||
let navId = urlSegments[1] === 'fr' ? urlSegments[2] : urlSegments[1];
|
||||
navId = navId ? navId : 'home';
|
||||
let navId;
|
||||
|
||||
if (url === "/") {
|
||||
navId = "home";
|
||||
} else {
|
||||
navId = url.replace("/", "");
|
||||
}
|
||||
|
||||
let nav = document.getElementById(navId);
|
||||
|
||||
if (nav) {
|
||||
nav.classList.remove(
|
||||
"text-neutral-600",
|
||||
"dark:text-neutral-400",
|
||||
"hover:text-neutral-500",
|
||||
"dark:hover:text-neutral-500",
|
||||
"dark:hover:text-neutral-500"
|
||||
);
|
||||
nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
|
||||
nav.setAttribute("aria-current", "page");
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const footerLinks = [
|
|||
section: "Société",
|
||||
links: [
|
||||
{ name: "À propos de nous", url: "#" },
|
||||
{ name: "Blog", url: "#" },
|
||||
{ name: "Blog", url: "/fr/blog" },
|
||||
{ name: "Carrières", url: "#" },
|
||||
{ name: "Clients", url: "#" },
|
||||
],
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const footerLinks = [
|
|||
section: "Company",
|
||||
links: [
|
||||
{ name: "About us", url: "#" },
|
||||
{ name: "Blog", url: "#" },
|
||||
{ name: "Blog", url: "/blog" },
|
||||
{ name: "Careers", url: "#" },
|
||||
{ name: "Customers", url: "#" },
|
||||
],
|
||||
|
|
|
|||
4
src/utils/ui.ts
Normal file
4
src/utils/ui.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export const languages = {
|
||||
en: "English",
|
||||
fr: "Français",
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue