Skip to content

Commit 9a69502

Browse files
maiieulmaiieul
committed
docs(header): make header more responsive
1 parent 3b49bf1 commit 9a69502

File tree

2 files changed

+79
-73
lines changed

2 files changed

+79
-73
lines changed

‎apps/website/src/components/header/header.tsx‎

Lines changed: 76 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,15 @@ export default component$(({ showVersion = false }: HeaderProps) => {
135135
theme?.includes('brutalist') && 'border-b-2',
136136
)}
137137
>
138-
<header class="xs:gap-8 flex w-full max-w-screen-2xl items-center gap-6">
139-
<section class="mr-auto flex flex-col gap-1 md:flex-row md:gap-8">
138+
<header class="flex w-full max-w-screen-2xl items-center justify-between">
139+
<div class="block sm:hidden" />
140+
<section class="xs:flex xs:items-center mr-auto hidden">
140141
<a href="/" aria-label="Qwik UI Logo" class="lg:ml-8">
141142
<LogoWithBorders />
142143
</a>
143144
{showVersion && (
144145
<div data-tip="Qwik-UI Version" class="mr-auto">
145-
<div class="ml-2 flex flex-row gap-1 text-xs md:mt-1 md:flex-col md:text-sm">
146+
<div class="ml-4 hidden text-xs sm:flex sm:flex-col md:mt-1 md:text-sm">
146147
<span> {kitSignal.value?.name} Kit </span>
147148
<span>
148149
{' '}
@@ -153,84 +154,86 @@ export default component$(({ showVersion = false }: HeaderProps) => {
153154
)}
154155
</section>
155156

156-
<nav class="hidden gap-4 lg:flex">
157-
<a class={isRouteActive('/about')} href="/about">
158-
About
159-
</a>
160-
<a class={isDocsActive('/docs/headless/')} href="/docs/headless/introduction">
161-
Headless Kit
162-
</a>
163-
{rootStore.featureFlags?.showStyled && (
164-
<a class={isDocsActive('/docs/styled/')} href="/docs/styled/introduction">
165-
Styled Kit
157+
<div class="xs:space-x-6 mr-4 flex items-center space-x-6">
158+
<nav class="hidden gap-4 lg:flex">
159+
<a class={isRouteActive('/about')} href="/about">
160+
About
166161
</a>
167-
)}
162+
<a class={isDocsActive('/docs/headless/')} href="/docs/headless/introduction">
163+
Headless Kit
164+
</a>
165+
{rootStore.featureFlags?.showStyled && (
166+
<a class={isDocsActive('/docs/styled/')} href="/docs/styled/introduction">
167+
Styled Kit
168+
</a>
169+
)}
170+
<a
171+
class={isRouteActive('https://discord.gg/PVWUUejrez')}
172+
href="https://discord.gg/PVWUUejrez"
173+
target="_blank"
174+
>
175+
Community
176+
</a>
177+
{/* <a href="/contact">Contact</a> */}
178+
</nav>
179+
<MakeItYours />
180+
<button
181+
type="button"
182+
aria-label="Toggle dark mode"
183+
onClick$={() => {
184+
theme?.includes('light') ? setTheme('dark') : setTheme('light');
185+
}}
186+
>
187+
<div class="hidden dark:block">
188+
<MoonIcon />
189+
</div>
190+
<div class="block dark:hidden">
191+
<SunIcon />
192+
</div>
193+
</button>
168194
<a
169-
class={isRouteActive('https://discord.gg/PVWUUejrez')}
170-
href="https://discord.gg/PVWUUejrez"
171195
target="_blank"
196+
href="https://github.com/qwikifiers/qwik-ui"
197+
aria-label="Qwik-UI GitHub repository"
198+
class="sm:mr-8"
172199
>
173-
Community
200+
<GitHubIcon />
174201
</a>
175-
{/* <a href="/contact">Contact</a> */}
176-
</nav>
177-
<MakeItYours />
178-
<button
179-
type="button"
180-
aria-label="Toggle dark mode"
181-
onClick$={() => {
182-
theme?.includes('light') ? setTheme('dark') : setTheme('light');
183-
}}
184-
>
185-
<div class="hidden dark:block">
186-
<MoonIcon />
187-
</div>
188-
<div class="block dark:hidden">
189-
<SunIcon />
190-
</div>
191-
</button>
192-
<a
193-
target="_blank"
194-
href="https://github.com/qwikifiers/qwik-ui"
195-
aria-label="Qwik-UI GitHub repository"
196-
class="sm:mr-8"
197-
>
198-
<GitHubIcon />
199-
</a>
200-
<button
201-
type="button"
202-
aria-label="Toggle navigation"
203-
onClick$={() => {
204-
isSidebarOpenedSig.value = !isSidebarOpenedSig.value;
205-
}}
206-
class="mr-4 block lg:hidden"
207-
>
208-
{isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
209-
</button>
210-
<Modal
211-
bind:show={isSidebarOpenedSig}
212-
class="sidebar-mobile bg-background text-foreground rounded-base ml-0 mr-auto h-screen max-w-lg border-0 p-8 shadow-md"
213-
>
214-
<ModalHeader>
215-
<h2 class="text-lg font-bold">Copy config</h2>
216-
<p>
217-
Copy and paste the following code into your global.css file to apply the
218-
styles.
219-
</p>
220-
</ModalHeader>
221-
<ModalContent class="mb-2 pb-4 pt-2">
222-
<DocsNavigation
223-
linksGroups={menuItemsGroups}
224-
class="bg-background max-w-80 overflow-auto"
225-
/>
226-
</ModalContent>
227202
<button
228-
onClick$={() => (isSidebarOpenedSig.value = false)}
229-
class="absolute right-6 top-[26px]"
203+
type="button"
204+
aria-label="Toggle navigation"
205+
onClick$={() => {
206+
isSidebarOpenedSig.value = !isSidebarOpenedSig.value;
207+
}}
208+
class="mr-4 block lg:hidden"
230209
>
231-
<LuX class="h-8 w-8" />
210+
{isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
232211
</button>
233-
</Modal>
212+
<Modal
213+
bind:show={isSidebarOpenedSig}
214+
class="sidebar-mobile bg-background text-foreground rounded-base ml-0 mr-auto h-screen max-w-lg border-0 p-8 shadow-md"
215+
>
216+
<ModalHeader>
217+
<h2 class="text-lg font-bold">Copy config</h2>
218+
<p>
219+
Copy and paste the following code into your global.css file to apply the
220+
styles.
221+
</p>
222+
</ModalHeader>
223+
<ModalContent class="mb-2 pb-4 pt-2">
224+
<DocsNavigation
225+
linksGroups={menuItemsGroups}
226+
class="bg-background max-w-80 overflow-auto"
227+
/>
228+
</ModalContent>
229+
<button
230+
onClick$={() => (isSidebarOpenedSig.value = false)}
231+
class="absolute right-6 top-[26px]"
232+
>
233+
<LuX class="h-8 w-8" />
234+
</button>
235+
</Modal>
236+
</div>
234237
</header>
235238
</div>
236239
);

‎apps/website/tailwind.config.cjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ module.exports = {
5151
'londrina-shadow': ['Londrina Shadow', 'cursive'],
5252
'rubik-doodle-shadow': ['Rubik Doodle Shadow', 'monospace'],
5353
},
54+
screens: {
55+
xs: '480px',
56+
},
5457
// EXTEND-START
5558
colors: {
5659
border: 'hsl(var(--border))',

0 commit comments

Comments
 (0)