@smbcloud / fatapp-web
Code Commits Issues Pulls Cloud Agent CI/CD
dependabot/npm_and_yarn/astro-7.4.0
dependabot/npm_and_yarn/astro-7.4.0 dependabot/npm_and_yarn/astrojs/mdx-7.0.8 dependabot/npm_and_yarn/astrojs/sitemap-3.7.4 dependabot/npm_and_yarn/katex-0.19.0 dependabot/npm_and_yarn/prettier-3.9.10 dependabot/npm_and_yarn/sharp-0.35.5 dependabot/npm_and_yarn/tsx-4.23.15 dependabot/npm_and_yarn/typescript-eslint-8.71.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.71.2 development main
astro 143 lines 4.51 KB
Raw
1 ---
2 import { SITE } from '@/config'
3 import ThemeToggle from '@/components/ui/ThemeToggle.astro'
4 import { Image } from 'astro:assets'
5 ---
6
7 <header class="mb-7">
8 <nav class="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
9 <!-- Logo Section -->
10 <div class="relative flex items-center gap-2">
11 {
12 SITE.favicon && (
13 <img src="/favicon.svg" alt="favicon" class="absolute w-4.5 h-4.5 -bottom-14 left-0" />
14 )
15 }
16 <a
17 href="/"
18 class="font-bold text-food-orange text-xl font-sans no-underline min-w-12 inline-block"
19 >{SITE.title}</a
20 >
21 </div>
22
23 <!-- Download Links & Theme Toggle Section -->
24 <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4">
25 <!-- Store Badges Container -->
26 <div class="store-badges-container">
27 <!-- Mobile: Compact View -->
28 <div class="flex items-center gap-2 sm:hidden">
29 <a
30 href="https://apps.apple.com/se/app/fat-4-5-star-restaurants/id6754181320"
31 class="store-badge-link"
32 aria-label="Download on the App Store"
33 >
34 <Image
35 src="/images/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
36 alt="Download on the App Store"
37 width="120"
38 height="40"
39 class="h-9 w-auto"
40 />
41 </a>
42 <a
43 href="https://play.google.com/store/apps/details?id=xyz.smbcloud.FatApp"
44 class="store-badge-link"
45 aria-label="Get it on Google Play"
46 >
47 <Image
48 src="/images/GetItOnGooglePlay_Badge_Web_color_English.png"
49 alt="Get it on Google Play"
50 width="120"
51 height="40"
52 class="h-9 w-auto"
53 />
54 </a>
55 </div>
56
57 <!-- Tablet & Desktop: Full View -->
58 <div class="hidden sm:flex items-center gap-2 lg:gap-3">
59 <a
60 href="https://apps.apple.com/se/app/fat-4-5-star-restaurants/id6754181320"
61 class="store-badge-link transition-transform hover:scale-105 active:scale-95"
62 aria-label="Download on the App Store"
63 >
64 <Image
65 src="/images/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
66 alt="Download on the App Store"
67 width="135"
68 height="45"
69 class="h-10 w-auto md:h-11"
70 />
71 </a>
72 <a
73 href="https://play.google.com/store/apps/details?id=xyz.smbcloud.FatApp"
74 class="store-badge-link transition-transform hover:scale-105 active:scale-95"
75 aria-label="Get it on Google Play"
76 >
77 <Image
78 src="/images/GetItOnGooglePlay_Badge_Web_color_English.png"
79 alt="Get it on Google Play"
80 width="135"
81 height="45"
82 class="h-10 w-auto md:h-11"
83 />
84 </a>
85 <a
86 href="https://apps.microsoft.com/detail/xp9d0tqvt066f6?referrer=appbadge&mode=direct"
87 class="store-badge-link transition-transform hover:scale-105 active:scale-95"
88 aria-label="Get it from Microsoft"
89 >
90 <Image
91 src="https://get.microsoft.com/images/en-us%20dark.svg"
92 alt="Get it from Microsoft"
93 width="135"
94 height="45"
95 class="h-10 w-auto md:h-11"
96 />
97 </a>
98 </div>
99
100 <!-- Mobile: Microsoft Store Link (text only to save space) -->
101 <a
102 href="https://apps.microsoft.com/detail/xp9d0tqvt066f6?referrer=appbadge&mode=direct"
103 class="text-xs text-gray-600 dark:text-gray-400 hover:text-food-orange dark:hover:text-food-orange transition-colors sm:hidden mt-1"
104 aria-label="Also available on Microsoft Store"
105 >
106 Also on Microsoft Store →
107 </a>
108 </div>
109
110 <!-- Theme Toggle -->
111 <div class="self-end sm:self-auto">
112 <ThemeToggle />
113 </div>
114 </div>
115 </nav>
116 </header>
117
118 <style>
119 .store-badge-link {
120 display: inline-flex;
121 align-items: center;
122 border-radius: 0.375rem;
123 overflow: hidden;
124 }
125
126 .store-badge-link:focus-visible {
127 outline: 2px solid var(--color-food-orange, #ff6b35);
128 outline-offset: 2px;
129 }
130
131 .store-badges-container {
132 display: flex;
133 flex-direction: column;
134 gap: 0.25rem;
135 }
136
137 @media (min-width: 640px) {
138 .store-badges-container {
139 flex-direction: row;
140 gap: 0;
141 }
142 }
143 </style>