Skip to content

Commit 4d62d10

Browse files
gioboagioboa
authored
refactor: doc website (#143)
* feat: add dark light toggle * fix: header style * feat: add select theme * feat: add isDocsRoute check * feat: add version + github link * feat: root page * feat: refactor menu
1 parent 12f7d3a commit 4d62d10

21 files changed

+361
-191
lines changed

‎packages/website/src/components/header/header.css

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,77 @@
1-
import { component$, useStylesScoped$ } from '@builder.io/qwik';
2-
import styles from './header.css?inline';
1+
import { $, component$, useContext, useSignal } from '@builder.io/qwik';
2+
import { useLocation } from '@builder.io/qwik-city';
3+
import { version } from '../../../../../package.json';
4+
import { APP_STATE } from '../../constants';
5+
import { CloseIcon } from '../icons/CloseIcon';
6+
import { GitHubIcon } from '../icons/GitHubIcon';
7+
import { MenuIcon } from '../icons/MenuIcon';
8+
import { MoonIcon } from '../icons/MoonIcon';
9+
import { SunIcon } from '../icons/SunIcon';
10+
import { Menu } from '../menu/menu';
11+
import { SelectTheme } from '../selectTheme/selectTheme';
312

413
export default component$(() => {
5-
useStylesScoped$(styles);
14+
const location = useLocation();
15+
const appState = useContext(APP_STATE);
16+
const menuOpenSignal = useSignal(false);
17+
18+
const toggleMenu = $(() => {
19+
menuOpenSignal.value = !menuOpenSignal.value;
20+
});
21+
22+
const toggleDarkMode = $(() => {
23+
appState.darkMode = !appState.darkMode;
24+
document.documentElement.classList.toggle('dark');
25+
});
26+
27+
const isDocsRoute = location.pathname.indexOf('/docs/') !== -1;
628

729
return (
8-
<header>
9-
<div class="logo">
10-
<img src="/qwik-ui.png" style={'width: 200px'} />
30+
<header class="fixed w-full z-10 border-b border-slate-600 dark:border-white bg-white dark:bg-slate-800">
31+
<div class="flex p-4">
32+
<button
33+
type="button"
34+
aria-label="Toggle navigation"
35+
onClick$={toggleMenu}
36+
class="block lg:hidden"
37+
>
38+
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
39+
</button>
40+
{menuOpenSignal.value && (
41+
<aside class="fixed top-0 left-0">
42+
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
43+
<div class="fixed h-screen w-80 overflow-y-scroll bg-white dark:bg-slate-800">
44+
<Menu onClose={toggleMenu} />
45+
</div>
46+
</aside>
47+
)}
48+
<div class="pl-6">
49+
<a href="/">
50+
<img src="/qwik-ui.png" class="w-32" />
51+
</a>
52+
</div>
53+
<div class="flex w-full justify-end">
54+
<div data-tip="Qwik-UI Version" class="pt-2.5 px-2">
55+
v.{version}
56+
</div>
57+
{isDocsRoute && <SelectTheme />}
58+
<button
59+
type="button"
60+
aria-label="Toggle dark mode"
61+
onClick$={toggleDarkMode}
62+
>
63+
{appState.darkMode ? <MoonIcon /> : <SunIcon />}
64+
</button>
65+
<div class="px-2 pt-2">
66+
<a
67+
target="_blank"
68+
href="https://github.com/qwikifiers/qwik-ui"
69+
aria-label="Qwik-UI GitHub repository"
70+
>
71+
<GitHubIcon />
72+
</a>
73+
</div>
74+
</div>
1175
</div>
1276
</header>
1377
);

‎packages/website/src/components/icons/ArrrowIcon.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const ArrowIcon = () => (
2+
<svg
3+
width="12px"
4+
height="12px"
5+
class="h-3 w-3 stroke-black dark:stroke-white"
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 2048 2048"
8+
>
9+
<path
10+
stroke-linecap="round"
11+
stroke-linejoin="round"
12+
stroke-width="2"
13+
d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"
14+
></path>
15+
</svg>
16+
);

‎packages/website/src/components/icons/CloseIcon.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const CloseIcon = () => (
2+
<svg
3+
viewBox="0 0 10 9"
4+
fill="none"
5+
strokeLinecap="round"
6+
aria-hidden="true"
7+
class="w-6 h-6 stroke-black dark:stroke-white hover:bg-gray-100 dark:hover:bg-slate-600"
8+
>
9+
<path d="m1.5 1 7 7M8.5 1l-7 7" />
10+
</svg>
11+
);

‎packages/website/src/components/icons/GitHubIcon.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const GitHubIcon = () => (
2+
<svg
3+
width="20"
4+
height="20"
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 512 512"
7+
class="inline-block h-5 w-5 fill-current md:h-6 md:w-6"
8+
>
9+
<path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path>
10+
</svg>
11+
);

‎packages/website/src/components/icons/MenuIcon.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const MenuIcon = () => (
2+
<svg
3+
viewBox="0 0 10 9"
4+
fill="none"
5+
strokeLinecap="round"
6+
aria-hidden="true"
7+
class="w-6 h-6 stroke-black dark:stroke-white hover:bg-gray-100 dark:hover:bg-slate-600"
8+
>
9+
<path d="M.5 1h9M.5 8h9M.5 4.5h9" />
10+
</svg>
11+
);

‎packages/website/src/components/icons/MoonIcon.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const MoonIcon = () => (
2+
<svg
3+
viewBox="0 0 20 20"
4+
fill="none"
5+
aria-hidden="true"
6+
class="hidden h-8 w-8 stroke-white dark:block hover:bg-slate-600"
7+
>
8+
<path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
9+
</svg>
10+
);

‎packages/website/src/components/icons/SunIcon.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const SunIcon = () => (
2+
<svg
3+
viewBox="0 0 20 20"
4+
fill="none"
5+
aria-hidden="true"
6+
class="h-8 w-8 stroke-black dark:hidden hover:bg-gray-100"
7+
>
8+
<path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
9+
<path
10+
strokeLinecap="round"
11+
d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
12+
/>
13+
</svg>
14+
);

‎packages/website/src/components/icons/ThemeIcon.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export const ThemeIcon = () => (
2+
<svg
3+
width="20"
4+
height="20"
5+
xmlns="http://www.w3.org/2000/svg"
6+
fill="none"
7+
viewBox="0 0 24 24"
8+
class="inline-block h-5 w-5 md:h-6 md:w-6 stroke-black dark:stroke-white"
9+
>
10+
<path
11+
stroke-linecap="round"
12+
stroke-linejoin="round"
13+
stroke-width="2"
14+
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
15+
></path>
16+
</svg>
17+
);

‎packages/website/src/components/icons/qwikuiLogo.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)