Skip to content

Commit e01f801

Browse files
3w36zj63w36zj6
committed
feat: レスポンシブデザインを実装
1 parent 8607f8a commit e01f801

File tree

6 files changed

+157
-53
lines changed

6 files changed

+157
-53
lines changed

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const CloseIcon = () => {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
stroke="currentColor"
8+
stroke-width="2"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
class="icon icon-tabler icons-tabler-outline icon-tabler-x"
12+
>
13+
<title>閉じるアイコン</title>
14+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
15+
<path d="M18 6l-12 12" />
16+
<path d="M6 6l12 12" />
17+
</svg>
18+
);
19+
};

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const MenuIcon = () => {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
stroke="currentColor"
8+
stroke-width="2"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"
12+
>
13+
<title>メニューアイコン</title>
14+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
15+
<path d="M4 6l16 0" />
16+
<path d="M4 12l16 0" />
17+
<path d="M4 18l16 0" />
18+
</svg>
19+
);
20+
};

‎website/src/components/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export { HelpCircleIcon } from "./HelpCircleIcon";
77
export { ChevronLeftIcon } from "./ChevronLeftIcon";
88
export { ChevronRightIcon } from "./ChevronRightIcon";
99
export { AlertTriangleIcon } from "./AlertTriangleIcon";
10+
export { MenuIcon } from "./MenuIcon";
11+
export { CloseIcon } from "./CloseIcon";
1012

1113
// Simple Icons
1214
// https://simpleicons.org/

‎website/src/components/templates/BaseTemplate.tsx‎

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
CaretRightCircleIcon,
55
ChevronLeftIcon,
66
ChevronRightIcon,
7+
CloseIcon,
78
InfoCircleIcon,
89
} from "../icons";
910
import {
@@ -108,13 +109,52 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
108109
/>
109110
</head>
110111

111-
<body class="no-js docs has-outline min-h-screen flex flex-col">
112+
<body
113+
class="no-js docs has-outline min-h-screen flex flex-col"
114+
x-data="{ sidebarOpen: false }"
115+
>
112116
<SiteNoticeBanner />
113117
<Header />
114118

115-
<div class="main-grid flex-1 flex bg-white">
116-
<div class="container mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 flex">
117-
<div class="flex flex-col w-full md:w-64 lg:w-72 mr-4">
119+
<div class="main-grid flex-1 flex bg-white relative">
120+
<div
121+
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 transition-opacity duration-300"
122+
x-show="sidebarOpen"
123+
x-cloak
124+
x-transition:enter="ease-out duration-300"
125+
x-transition:enter-start="opacity-0"
126+
x-transition:enter-end="opacity-100"
127+
x-transition:leave="ease-in duration-200"
128+
x-transition:leave-start="opacity-100"
129+
x-transition:leave-end="opacity-0"
130+
x-on:click="sidebarOpen = false"
131+
/>
132+
<div class="container mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 flex relative">
133+
<div
134+
x-cloak
135+
class="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-30 transform transition-transform duration-300 ease-in-out lg:hidden"
136+
x-bind:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
137+
>
138+
<div class="flex justify-end p-4 lg:hidden">
139+
<button
140+
type="button"
141+
class="text-gray-600"
142+
x-on:click="sidebarOpen = false"
143+
aria-label="メニューを閉じる"
144+
>
145+
<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
146+
<CloseIcon />
147+
</div>
148+
</button>
149+
</div>
150+
<SideNavigation
151+
docs={docs}
152+
currentRoute={route}
153+
currentPath={path}
154+
/>
155+
</div>
156+
157+
<div class="hidden lg:flex lg:flex-col lg:w-64 lg:mr-4">
118158
<SideNavigation
119159
docs={docs}
120160
currentRoute={route}
@@ -201,7 +241,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
201241
)}
202242
</main>
203243

204-
<div class="flex flex-col w-full md:w-60 lg:w-72 ml-4">
244+
<div class="flex-col w-full md:w-60 lg:w-72 ml-4 hidden xl:block">
205245
<TableOfContents outline={outline} />
206246
</div>
207247
</div>

‎website/src/components/ui/common/Header.tsx‎

Lines changed: 64 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,73 @@ import {
44
typstOfficialDocsUrl,
55
typstOfficialUrl,
66
} from "../../../metadata";
7-
import { DiscordIcon, GitHubIcon } from "../../icons";
7+
import { DiscordIcon, GitHubIcon, MenuIcon } from "../../icons";
88
import { SiteTitle } from "./SiteTitle";
99

1010
export const Header = () => {
1111
return (
12-
<header class="boring sticky top-0 z-40 bg-white border-b border-gray-200">
13-
<div class="flex justify-between items-center py-3 px-6">
14-
<SiteTitle />
15-
<nav class="ml-auto">
16-
<ul class="flex items-center gap-4">
17-
<li class="social">
18-
<a
19-
href={discordServerUrl}
20-
class="text-gray-600 hover:text-gray-800 transition-colors"
21-
>
22-
<div class="w-4 h-4">
23-
<DiscordIcon />
24-
</div>
25-
</a>
26-
</li>
27-
<li class="social">
28-
<a
29-
href={githubRepositoryUrl}
30-
class="text-gray-600 hover:text-gray-800 transition-colors"
31-
>
32-
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
33-
<GitHubIcon />
34-
</div>
35-
</a>
36-
</li>
37-
<li class="secondary">
38-
<a
39-
href={typstOfficialUrl}
40-
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
41-
>
42-
Typst公式サイト
43-
</a>
44-
</li>
45-
<li class="secondary">
46-
<a
47-
href={typstOfficialDocsUrl}
48-
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
49-
>
50-
Typst公式ドキュメント
51-
</a>
52-
</li>
53-
</ul>
54-
</nav>
55-
</div>
56-
</header>
12+
<>
13+
<header class="boring sticky top-0 z-40 bg-white border-b border-gray-200 hidden lg:block">
14+
<div class="flex justify-between items-center py-3 px-6">
15+
<SiteTitle />
16+
<nav class="ml-auto">
17+
<ul class="flex items-center gap-4">
18+
<li class="social">
19+
<a
20+
href={discordServerUrl}
21+
class="text-gray-600 hover:text-gray-800 transition-colors"
22+
>
23+
<div class="w-4 h-4">
24+
<DiscordIcon />
25+
</div>
26+
</a>
27+
</li>
28+
<li class="social">
29+
<a
30+
href={githubRepositoryUrl}
31+
class="text-gray-600 hover:text-gray-800 transition-colors"
32+
>
33+
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
34+
<GitHubIcon />
35+
</div>
36+
</a>
37+
</li>
38+
<li class="secondary">
39+
<a
40+
href={typstOfficialUrl}
41+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
42+
>
43+
Typst公式サイト
44+
</a>
45+
</li>
46+
<li class="secondary">
47+
<a
48+
href={typstOfficialDocsUrl}
49+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
50+
>
51+
Typst公式ドキュメント
52+
</a>
53+
</li>
54+
</ul>
55+
</nav>
56+
</div>
57+
</header>
58+
59+
<header class="sticky top-0 z-30 bg-white border-b border-gray-200 flex lg:hidden items-center justify-between px-4">
60+
<div class="flex justify-between items-center py-3 w-full">
61+
<SiteTitle />
62+
<button
63+
type="button"
64+
class="p-1 bg-white rounded-md border border-gray-200"
65+
x-on:click="sidebarOpen = !sidebarOpen"
66+
aria-label="メニューを開く"
67+
>
68+
<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
69+
<MenuIcon />
70+
</div>
71+
</button>
72+
</div>
73+
</header>
74+
</>
5775
);
5876
};

‎website/src/styles.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,7 @@
3535
}
3636

3737
body {
38-
font-family:
39-
"HK Grotesk", Inter, "BIZ UDGothic", "BIZ UDPGothic", system-ui,
38+
font-family: "HK Grotesk", Inter, "BIZ UDGothic", "BIZ UDPGothic", system-ui,
4039
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
4140
Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4241
}
@@ -66,3 +65,9 @@ samp {
6665
.info-box > *:first-child {
6766
@apply pt-4;
6867
}
68+
69+
/* Alpine.jsのx-cloak属性を持つ要素を非表示にする */
70+
[x-cloak] {
71+
display: none !important;
72+
visibility: hidden;
73+
}

0 commit comments

Comments
 (0)