implement figma mobile header
This commit is contained in:
TerryM
14
public/assets/ark-library/header-logo.svg
Normal file
14
public/assets/ark-library/header-logo.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="160" height="28" viewBox="0 0 160 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.2292 0H14.7588C14.968 0.0559368 15.3865 0.0554861 15.6195 0.0840509C16.2433 0.162323 16.8618 0.27846 17.4717 0.431819C20.9605 1.32834 23.9712 3.53168 25.8809 6.58602C26.9807 8.36946 27.6798 10.3191 27.9116 12.4051C27.931 12.5791 27.9586 13.1381 28 13.2575V14.7616C27.9676 14.8639 27.9719 14.9852 27.9605 15.0932C27.9371 15.3119 27.9209 15.5322 27.8947 15.7506C27.8185 16.3464 27.7057 16.937 27.5569 17.519C26.5949 21.2012 24.1805 24.3356 20.8658 26.2054C19.4694 26.9929 17.9489 27.5368 16.3697 27.8135C16.0039 27.8747 15.6678 27.9112 15.2988 27.9456C15.2372 27.9513 14.8315 27.9891 14.7922 28H13.2085C13.136 27.9806 12.6766 27.9411 12.5688 27.9299C12.2029 27.8949 11.8385 27.845 11.4767 27.7804C9.73788 27.4608 8.07524 26.8151 6.57646 25.8775C3.52331 23.9654 1.32177 20.9531 0.427118 17.4636C0.277887 16.8667 0.166006 16.2613 0.092126 15.6505C0.0674328 15.455 0.0559867 15.2559 0.0327946 15.0602C0.0214944 14.9648 0.0248092 14.8683 0 14.7752V13.1977C0.0460458 13.0568 0.0670753 12.5781 0.0875412 12.3988C0.310021 10.4492 0.93663 8.58551 1.93264 6.89483C3.81428 3.6906 6.89473 1.36783 10.4929 0.440082C11.1077 0.284221 11.7315 0.166538 12.3608 0.0877055C12.5813 0.0594732 13.0519 0.0521982 13.2292 0Z" fill="#EEB726"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1891 2.60941C12.701 2.56624 12.6125 3.00264 12.6117 3.35345V9.8802C12.6117 10.034 12.5971 10.6733 12.6375 10.7682C12.7071 10.8139 13.7307 10.7781 13.9027 10.7751C14.3888 10.7705 14.875 10.7689 15.3612 10.7703C15.3813 8.99519 15.363 7.18132 15.3626 5.40324L15.3618 3.86335C15.3617 3.58055 15.3579 3.29193 15.3681 3.00944C15.3738 2.93137 15.3867 2.83559 15.4389 2.77359C15.5682 2.62 15.7888 2.57608 15.9393 2.72444C16.0842 2.86728 16.2125 3.01844 16.3463 3.16836L16.9572 3.84415L22.8228 10.3571C23.5497 11.1619 24.2812 11.9802 25.0125 12.7824C25.2384 13.03 25.1348 13.3572 24.8165 13.3995C24.6432 13.4225 24.3794 13.4049 24.2038 13.4042L23.0303 13.4034L18.9579 13.4053C18.3146 13.406 18.3034 13.3306 18.3059 12.7031L18.3109 12.0322C18.3476 11.9649 18.4345 11.8475 18.5062 11.8303C18.7431 11.7734 19.1128 11.7934 19.358 11.7935L20.9084 11.7944C21.0378 11.7945 21.7312 11.8134 21.7861 11.7627C21.789 11.7284 21.7928 11.7202 21.7679 11.6873C21.617 11.4881 21.4302 11.2918 21.2654 11.103L20.2341 9.91872L18.1284 7.50599C17.7953 7.11763 17.4593 6.7317 17.1206 6.34826C17.0728 6.29512 16.9576 6.15754 16.8964 6.1434C16.8777 6.15652 16.8448 6.17443 16.8441 6.19825C16.8248 6.85013 16.8339 7.77911 16.8339 8.40253L16.834 13.1406C16.834 13.8992 16.8338 14.6583 16.833 15.4169C16.833 15.4812 16.8333 15.5191 16.8597 15.5772C16.8928 15.6042 16.9062 15.6168 16.9563 15.6171C17.1543 15.6181 17.3584 15.6167 17.5561 15.6167L18.863 15.6168C20.0666 15.617 21.3042 15.6321 22.5053 15.6159L23.9465 15.6061C24.2317 15.6034 24.5774 15.5845 24.8589 15.6212C24.9427 15.632 25.0352 15.7511 25.0818 15.8194L25.0825 16.0677C24.9189 16.2908 24.3788 16.8111 24.1593 17.0329L22.1842 19.0121C20.143 21.094 18.0907 23.1648 16.0273 25.2247C15.9692 25.2821 15.901 25.3529 15.8268 25.3864C15.7293 25.4013 15.7021 25.3981 15.6047 25.3913C15.4555 25.3029 15.3821 25.2292 15.3714 25.0493C15.3545 24.7676 15.3616 24.4822 15.3618 24.1997L15.3631 22.6405C15.3634 20.8442 15.3814 19.0147 15.36 17.2209C14.9505 17.1981 14.4132 17.2271 13.9934 17.2264C13.5396 17.2256 13.0751 17.2294 12.621 17.2339C12.6011 17.3973 12.6115 17.7905 12.6116 17.9757L12.611 23.2273C12.6109 23.8122 12.6149 24.3989 12.6137 24.9838C12.6113 25.1041 12.6033 25.1905 12.5083 25.2747C12.294 25.4643 12.1009 25.3436 11.9355 25.1647C11.7337 24.9467 11.5405 24.7228 11.3416 24.5028L3.33502 15.6643C3.17265 15.4855 2.65571 15.0332 2.95454 14.7717C3.09774 14.6465 3.46022 14.6815 3.65291 14.6819L8.6174 14.6809C8.88141 14.6803 9.1523 14.6725 9.41535 14.6906C9.55607 14.7004 9.685 14.8644 9.68691 15.0045C9.70522 16.3518 9.83461 16.2719 8.56919 16.2706L7.05394 16.2693C6.91394 16.2692 6.20621 16.2495 6.1304 16.3031C6.12265 16.4159 6.56244 16.8563 6.66078 16.9646L7.61022 18.0189L9.46351 20.0817C9.63868 20.2775 10.9909 21.8328 11.113 21.8536C11.1502 21.8075 11.1551 21.7003 11.1552 21.6392C11.1562 21.1993 11.1548 20.7578 11.1548 20.3179L11.1553 14.2807C11.1553 13.665 11.1629 13.0315 11.1518 12.418C10.4961 12.3888 9.65859 12.412 8.98743 12.412L4.9296 12.4123C4.61482 12.4126 3.29975 12.4476 3.11921 12.3871C3.03444 12.3587 2.95983 12.2922 2.92133 12.2116C2.88601 12.1377 2.86569 12.0224 2.90073 11.9448C2.96966 11.7921 4.00903 10.7972 4.19657 10.6081C5.27639 9.50373 6.36483 8.40778 7.46177 7.3204C8.51159 6.23863 9.57247 5.16762 10.6442 4.10756C11.0959 3.65305 11.5414 3.18692 11.9959 2.73484C12.0585 2.67249 12.1097 2.64526 12.1891 2.60941ZM21.5437 17.2632C21.4934 17.168 21.0535 17.2029 20.9298 17.203L17.903 17.2026C17.6138 17.2026 17.189 17.1895 16.9088 17.2081C16.8809 17.2237 16.8444 17.2359 16.8431 17.2653C16.8261 17.6275 16.8331 18.115 16.833 18.4714V20.5952C16.8331 20.8195 16.8108 21.7254 16.8564 21.8735C16.8941 21.9062 16.8736 21.9002 16.9176 21.8994C17.1782 21.6763 17.5175 21.3177 17.7695 21.0661L19.1828 19.6571L20.7606 18.0798C20.9074 17.9335 21.4632 17.4004 21.5437 17.2632ZM15.3618 12.386C14.4598 12.3828 13.5243 12.3746 12.6233 12.3871C12.6042 12.4876 12.6091 13.2867 12.6115 13.4354C12.623 14.1523 12.596 14.902 12.6149 15.6151L15.3568 15.6161C15.381 15.3849 15.3618 14.81 15.3618 14.5477V12.386ZM11.0833 6.05982C10.8784 6.24413 10.6747 6.45771 10.4764 6.65159L9.08557 8.0201L7.38494 9.68779C7.06785 9.99626 6.74932 10.3069 6.42935 10.6124C6.39062 10.6494 6.36511 10.6843 6.35175 10.7358L6.36204 10.7702C6.38831 10.7842 6.39302 10.7868 6.42116 10.7978L9.43157 10.7995C9.67547 10.7995 11.0652 10.8204 11.1326 10.7675C11.1711 10.6673 11.1552 9.88121 11.1552 9.72831L11.1555 6.79627C11.1554 6.65257 11.1658 6.21028 11.1332 6.09746C11.1058 6.06999 11.1164 6.07484 11.0833 6.05982Z" fill="#08070C"/>
|
||||
<path d="M154.152 12.9068L156.945 7.39551H160L155.557 15.5688V20.7802H152.746V15.6625L148.303 7.39551H151.377L154.152 12.9068Z" fill="#EEB726"/>
|
||||
<path d="M141.513 7.39551C142.726 7.39551 143.725 7.54548 144.513 7.84541C145.3 8.13285 145.888 8.57651 146.275 9.17638C146.662 9.76376 146.856 10.5074 146.856 11.4072C146.856 12.0195 146.737 12.5569 146.5 13.0193C146.275 13.4692 145.969 13.8566 145.581 14.1816C145.206 14.494 144.8 14.7502 144.363 14.9502L148.299 20.7802H145.15L141.963 15.6438H140.445V20.7802H137.614V7.39551H141.513ZM141.307 9.72002H140.445V13.338H141.363C141.988 13.338 142.494 13.2693 142.882 13.1318C143.269 12.9943 143.55 12.7881 143.725 12.5132C143.9 12.2257 143.988 11.8821 143.988 11.4821C143.988 11.0572 143.888 10.7198 143.688 10.4699C143.501 10.2074 143.207 10.02 142.807 9.90748C142.419 9.78251 141.92 9.72002 141.307 9.72002Z" fill="#EEB726"/>
|
||||
<path d="M132.864 20.7798L131.889 17.593H127.015L126.04 20.7798H122.984L127.708 7.33887H131.176L135.919 20.7798H132.864ZM130.239 12.1004C130.177 11.8879 130.095 11.6192 129.995 11.2943C129.895 10.9694 129.795 10.6382 129.695 10.3007C129.595 9.96331 129.514 9.66963 129.452 9.41968C129.389 9.66963 129.302 9.98206 129.189 10.357C129.089 10.7194 128.989 11.0693 128.889 11.4068C128.802 11.7317 128.733 11.9629 128.683 12.1004L127.727 15.2122H131.214L130.239 12.1004Z" fill="#EEB726"/>
|
||||
<path d="M116.195 7.39551C117.407 7.39551 118.407 7.54548 119.194 7.84541C119.982 8.13285 120.569 8.57651 120.957 9.17638C121.344 9.76376 121.538 10.5074 121.538 11.4072C121.538 12.0195 121.419 12.5569 121.182 13.0193C120.957 13.4692 120.65 13.8566 120.263 14.1816C119.888 14.494 119.482 14.7502 119.044 14.9502L122.981 20.7802H119.832L116.645 15.6438H115.127V20.7802H112.296V7.39551H116.195ZM115.989 9.72002H115.127V13.338H116.045C116.67 13.338 117.176 13.2693 117.564 13.1318C117.951 12.9943 118.232 12.7881 118.407 12.5132C118.582 12.2257 118.67 11.8821 118.67 11.4821C118.67 11.0572 118.57 10.7198 118.37 10.4699C118.182 10.2074 117.888 10.02 117.489 9.90748C117.101 9.78251 116.601 9.72002 115.989 9.72002Z" fill="#EEB726"/>
|
||||
<path d="M103.863 7.39551C105.05 7.39551 106.044 7.50798 106.843 7.73294C107.656 7.94539 108.262 8.30157 108.662 8.80146C109.074 9.28886 109.28 9.95122 109.28 10.7885C109.28 11.2884 109.199 11.7446 109.037 12.157C108.874 12.5694 108.637 12.9068 108.324 13.1693C108.024 13.4317 107.656 13.6005 107.218 13.6754V13.7692C107.668 13.8566 108.074 14.0129 108.437 14.2378C108.799 14.4628 109.087 14.7877 109.299 15.2126C109.512 15.6375 109.618 16.1999 109.618 16.8998C109.618 17.7121 109.418 18.4119 109.018 18.9993C108.631 19.5742 108.068 20.0178 107.331 20.3303C106.593 20.6302 105.719 20.7802 104.706 20.7802H99.7012V7.39551H103.863ZM104.181 12.7006C105.006 12.7006 105.575 12.5694 105.887 12.307C106.212 12.0445 106.375 11.6634 106.375 11.1635C106.375 10.6511 106.187 10.2824 105.812 10.0574C105.437 9.83249 104.844 9.72002 104.032 9.72002H102.532V12.7006H104.181ZM102.532 14.9502V18.4369H104.388C105.238 18.4369 105.831 18.2745 106.169 17.9495C106.506 17.6121 106.675 17.1684 106.675 16.6186C106.675 16.2811 106.6 15.9874 106.45 15.7375C106.312 15.4876 106.069 15.2938 105.719 15.1564C105.369 15.0189 104.894 14.9502 104.294 14.9502H102.532Z" fill="#EEB726"/>
|
||||
<path d="M97.4196 20.7802H91.3271V19.168L92.9581 18.4182V9.75751L91.3271 9.00767V7.39551H97.4196V9.00767L95.7887 9.75751V18.4182L97.4196 19.168V20.7802Z" fill="#EEB726"/>
|
||||
<path d="M81.8154 20.7802V7.39551H84.6461V18.4369H90.0824V20.7802H81.8154Z" fill="#EEB726"/>
|
||||
<path d="M75.2573 20.7802H72.033L68.5275 15.1376L67.3277 15.9999V20.7802H64.4971V7.39551H67.3277V13.5255C67.5152 13.263 67.7026 13.0006 67.8901 12.7381C68.0776 12.4757 68.265 12.2132 68.4525 11.9508L72.0705 7.39551H75.2198L70.552 13.3193L75.2573 20.7802Z" fill="#EEB726"/>
|
||||
<path d="M56.0212 7.39551C57.2335 7.39551 58.2333 7.54548 59.0206 7.84541C59.808 8.13285 60.3953 8.57651 60.7827 9.17638C61.1702 9.76376 61.3639 10.5074 61.3639 11.4072C61.3639 12.0195 61.2451 12.5569 61.0077 13.0193C60.7827 13.4692 60.4766 13.8566 60.0891 14.1816C59.7142 14.494 59.3081 14.7502 58.8706 14.9502L62.8073 20.7802H59.658L56.4712 15.6438H54.9527V20.7802H52.1221V7.39551H56.0212ZM55.815 9.72002H54.9527V13.338H55.8713C56.4961 13.338 57.0023 13.2693 57.3897 13.1318C57.7771 12.9943 58.0583 12.7881 58.2333 12.5132C58.4082 12.2257 58.4957 11.8821 58.4957 11.4821C58.4957 11.0572 58.3957 10.7198 58.1958 10.4699C58.0083 10.2074 57.7146 10.02 57.3147 9.90748C56.9273 9.78251 56.4274 9.72002 55.815 9.72002Z" fill="#EEB726"/>
|
||||
<path d="M47.3714 20.7798L46.3966 17.593H41.5226L40.5478 20.7798H37.4922L42.2162 7.33887H45.6842L50.427 20.7798H47.3714ZM44.7469 12.1004C44.6844 11.8879 44.6032 11.6192 44.5032 11.2943C44.4032 10.9694 44.3033 10.6382 44.2033 10.3007C44.1033 9.96331 44.0221 9.66963 43.9596 9.41968C43.8971 9.66963 43.8096 9.98206 43.6971 10.357C43.5972 10.7194 43.4972 11.0693 43.3972 11.4068C43.3097 11.7317 43.241 11.9629 43.191 12.1004L42.2349 15.2122H45.7217L44.7469 12.1004Z" fill="#EEB726"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
3
public/assets/ark-library/header-menu.svg
Normal file
3
public/assets/ark-library/header-menu.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.875 16.5C20.5125 16.5 21 16.9875 21 17.625C21 18.2625 20.5125 18.75 19.875 18.75H4.125C3.4875 18.75 3 18.2625 3 17.625C3 16.9875 3.4875 16.5 4.125 16.5H19.875ZM19.875 11.25C20.5125 11.25 21 11.7375 21 12.375C21 13.0125 20.5125 13.5 19.875 13.5H4.125C3.4875 13.5 3 13.0125 3 12.375C3 11.7375 3.4875 11.25 4.125 11.25H19.875ZM19.875 6C20.5125 6 21 6.4875 21 7.125C21 7.7625 20.5125 8.25 19.875 8.25H4.125C3.4875 8.25 3 7.7625 3 7.125C3 6.4875 3.4875 6 4.125 6H19.875Z" fill="#A8A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 600 B |
3
public/assets/ark-library/header-search.svg
Normal file
3
public/assets/ark-library/header-search.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.7372 18.1928L16.6086 14.0643C16.2582 13.7138 15.6869 13.7138 15.3364 14.0643L14.3427 13.0705C16.191 10.603 15.9989 7.08894 13.757 4.84705C11.2943 2.38432 7.30497 2.38432 4.84705 4.84705C2.38432 7.30977 2.38432 11.2991 4.84705 13.757C7.08894 15.9989 10.603 16.191 13.0705 14.3427L14.0643 15.3364C13.7138 15.6869 13.7138 16.2582 14.0643 16.6086L18.1928 20.7372C18.5433 21.0876 19.1145 21.0876 19.465 20.7372L20.7372 19.465C21.0876 19.1145 21.0876 18.5433 20.7372 18.1928ZM12.9361 11.9328L11.9424 12.9265C11.1791 13.4834 10.267 13.7954 9.30684 13.7954C8.09708 13.8002 6.96893 13.3346 6.11922 12.4801C5.2695 11.6304 4.79904 10.4974 4.79904 9.29724C4.79904 8.09708 5.2695 6.96413 6.11922 6.11442C6.96893 5.2647 8.10188 4.79424 9.30204 4.79424C10.5022 4.79424 11.6352 5.2647 12.4849 6.11442C13.3346 6.96413 13.805 8.09708 13.805 9.29724C13.805 10.2622 13.493 11.1695 12.9361 11.9328Z" fill="#A8A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1012 B |
@@ -66,6 +66,11 @@ type LanguageDropdownProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function languageButtonLabel(lang: Lang): string {
|
||||
if (lang === "zh-CN") return "中";
|
||||
return lang.toUpperCase();
|
||||
}
|
||||
|
||||
function LanguageDropdown({
|
||||
lang,
|
||||
setLang,
|
||||
@@ -158,10 +163,102 @@ function LanguageDropdown({
|
||||
);
|
||||
}
|
||||
|
||||
type MobileLanguageButtonProps = {
|
||||
lang: Lang;
|
||||
setLang: (lang: Lang) => void;
|
||||
ariaLabel: string;
|
||||
onOpen?: () => void;
|
||||
};
|
||||
|
||||
function MobileLanguageButton({
|
||||
lang,
|
||||
setLang,
|
||||
ariaLabel,
|
||||
onOpen,
|
||||
}: MobileLanguageButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const closeOnOutside = (event: MouseEvent | TouchEvent) => {
|
||||
if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
|
||||
};
|
||||
const closeOnEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", closeOnOutside);
|
||||
document.addEventListener("touchstart", closeOnOutside);
|
||||
window.addEventListener("keydown", closeOnEscape);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", closeOnOutside);
|
||||
document.removeEventListener("touchstart", closeOnOutside);
|
||||
window.removeEventListener("keydown", closeOnEscape);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className="relative shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onOpen?.();
|
||||
setOpen((value) => !value);
|
||||
}}
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full border border-[#58585d] bg-transparent text-[15px] font-normal leading-[15px] text-[#e4e4e6] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
aria-label={ariaLabel}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
>
|
||||
{languageButtonLabel(lang)}
|
||||
</button>
|
||||
|
||||
{open ? (
|
||||
<div
|
||||
className="absolute right-0 top-[calc(100%+0.5rem)] z-50 w-44 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl"
|
||||
role="listbox"
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{LANG_OPTIONS.map((option) => {
|
||||
const active = option.code === lang;
|
||||
return (
|
||||
<button
|
||||
key={option.code}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
onClick={() => {
|
||||
setLang(option.code as Lang);
|
||||
setOpen(false);
|
||||
}}
|
||||
className={`flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm transition ${
|
||||
active
|
||||
? "bg-ark-gold/10 text-ark-gold2"
|
||||
: "text-neutral-200 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<span className="flex h-4 w-4 shrink-0 items-center justify-center">
|
||||
{active ? (
|
||||
<Check className="h-4 w-4" strokeWidth={2.4} />
|
||||
) : null}
|
||||
</span>
|
||||
<span className="truncate font-medium">{option.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PublicLayout() {
|
||||
const { t, lang, setLang } = useI18n();
|
||||
const { pathname, search, hash } = useLocation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const nav = useNavigate();
|
||||
|
||||
@@ -173,12 +270,102 @@ export function PublicLayout() {
|
||||
if (!s) return;
|
||||
nav(`/search?q=${encodeURIComponent(s)}`);
|
||||
setOpen(false);
|
||||
setMobileSearchOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-full flex flex-col pb-20 md:pb-0">
|
||||
<header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
|
||||
<div className="mx-auto max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
|
||||
<header className="sticky top-0 z-40 bg-[#08070c] backdrop-blur-md md:border-b md:border-ark-line md:bg-ark-nav/98">
|
||||
<div className="flex h-[64px] items-center justify-between bg-[#08070c] px-[20px] py-[12px] md:hidden">
|
||||
<Link
|
||||
to="/"
|
||||
className="flex h-[28px] w-[160px] shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
aria-label={t("brand")}
|
||||
>
|
||||
<img
|
||||
src="/assets/ark-library/header-logo.svg"
|
||||
alt="ARK LIBRARY"
|
||||
className="h-full w-full object-contain"
|
||||
width={160}
|
||||
height={28}
|
||||
decoding="async"
|
||||
draggable={false}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="flex h-[40px] w-[136px] shrink-0 items-center gap-[8px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setMobileSearchOpen((value) => !value);
|
||||
}}
|
||||
className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#191921] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
aria-label={t("search")}
|
||||
aria-expanded={mobileSearchOpen}
|
||||
>
|
||||
<img
|
||||
src="/assets/ark-library/header-search.svg"
|
||||
alt=""
|
||||
className="h-6 w-6"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-hidden
|
||||
draggable={false}
|
||||
/>
|
||||
</button>
|
||||
<MobileLanguageButton
|
||||
lang={lang}
|
||||
setLang={setLang}
|
||||
ariaLabel={t("langLabel")}
|
||||
onOpen={() => {
|
||||
setOpen(false);
|
||||
setMobileSearchOpen(false);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-[40px] w-[40px] shrink-0 items-center justify-center rounded-full bg-[#191921] text-[#a8a9ae] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
onClick={() => {
|
||||
setMobileSearchOpen(false);
|
||||
setOpen((v) => !v);
|
||||
}}
|
||||
aria-label="menu"
|
||||
aria-expanded={open}
|
||||
>
|
||||
{open ? (
|
||||
<X size={24} strokeWidth={2.4} />
|
||||
) : (
|
||||
<img
|
||||
src="/assets/ark-library/header-menu.svg"
|
||||
alt=""
|
||||
className="h-6 w-6"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-hidden
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mobileSearchOpen ? (
|
||||
<div className="border-t border-white/10 bg-[#08070c] px-5 pb-3 md:hidden max-[360px]:px-3">
|
||||
<div className="flex h-11 items-center gap-2 rounded-full border border-[#2a2a31] bg-[#191921] px-4">
|
||||
<SearchIcon size={18} className="shrink-0 text-[#a8a9ae]" />
|
||||
<input
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && goSearch()}
|
||||
placeholder={t("searchPlaceholder")}
|
||||
className="min-w-0 flex-1 bg-transparent text-sm text-neutral-100 outline-none placeholder:text-[#777985]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mx-auto hidden max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:block md:px-9 xl:px-0">
|
||||
{/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
|
||||
<div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4">
|
||||
<Link
|
||||
@@ -270,7 +457,7 @@ export function PublicLayout() {
|
||||
|
||||
{open ? (
|
||||
<div className="grid gap-2 border-t border-ark-line bg-ark-nav px-4 py-3 min-[440px]:px-5 sm:px-6 md:px-9 min-[1200px]:hidden">
|
||||
<div className="mb-1 flex items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2">
|
||||
<div className="mb-1 hidden items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2 md:flex">
|
||||
<SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
|
||||
<input
|
||||
value={q}
|
||||
@@ -284,7 +471,7 @@ export function PublicLayout() {
|
||||
lang={lang}
|
||||
setLang={setLang}
|
||||
ariaLabel={t("langLabel")}
|
||||
className="mb-1"
|
||||
className="mb-1 hidden md:block"
|
||||
/>
|
||||
<Link
|
||||
to="/"
|
||||
|
||||
Reference in New Issue
Block a user