Skip to content

Commit cfeb2dc

Browse files
zeakdzeakd
authored
Merge pull request #151 from zeakd/feat/mobile-responsive
docs: 모바일 반응형 대응
2 parents ec7df79 + 781ea17 commit cfeb2dc

3 files changed

Lines changed: 146 additions & 12 deletions

File tree

‎packages/astro-component-docs/src/components/Example.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,18 @@ const { __code, title } = Astro.props;
7171
margin: 0;
7272
border-radius: 0;
7373
}
74+
75+
@media (max-width: 768px) {
76+
.acd-example-preview {
77+
padding: 1rem;
78+
}
79+
80+
.acd-example-title {
81+
padding: 0.5rem 0.75rem;
82+
}
83+
84+
.acd-example-code {
85+
font-size: 0.8125rem;
86+
}
87+
}
7488
</style>

‎packages/astro-component-docs/src/components/PropsTable.astro‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const doc: ComponentDoc | undefined = propsData[key];
1616
{doc ? (
1717
<div class="acd-props">
1818
{doc.description && <p class="acd-props-description">{doc.description}</p>}
19+
<div class="acd-props-table-wrap">
1920
<table class="acd-props-table">
2021
<thead>
2122
<tr>
@@ -44,6 +45,7 @@ const doc: ComponentDoc | undefined = propsData[key];
4445
))}
4546
</tbody>
4647
</table>
48+
</div>
4749
</div>
4850
) : (
4951
<div class="acd-props-error">
@@ -56,6 +58,11 @@ const doc: ComponentDoc | undefined = propsData[key];
5658
margin: 1.5rem 0;
5759
}
5860

61+
.acd-props-table-wrap {
62+
overflow-x: auto;
63+
-webkit-overflow-scrolling: touch;
64+
}
65+
5966
.acd-props-description {
6067
margin-bottom: 1rem;
6168
color: var(--acd-text-muted, #64748b);
@@ -101,4 +108,15 @@ const doc: ComponentDoc | undefined = propsData[key];
101108
color: #991b1b;
102109
font-size: 0.875rem;
103110
}
111+
112+
@media (max-width: 768px) {
113+
.acd-props-table th,
114+
.acd-props-table td {
115+
padding: 0.375rem 0.5rem;
116+
}
117+
118+
.acd-props-table {
119+
font-size: 0.8125rem;
120+
}
121+
}
104122
</style>

‎website/src/layouts/DocsLayout.astro‎

Lines changed: 114 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,27 @@ navigation.sort(
5656
<body>
5757
<header class="site-header">
5858
<div class="site-header-inner">
59-
<a href={`${import.meta.env.BASE_URL}/`} class="site-logo">
60-
<svg width="22" height="25" viewBox="0 0 158 182" fill="none" xmlns="http://www.w3.org/2000/svg">
61-
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.423 15.2554L79 0L12.2551 38.5352L49.3537 146.046L111.099 97.2991L105.423 15.2554ZM111.433 102.131L50.7358 150.051L57.4715 169.571L79 182L115.501 160.926L111.433 102.131ZM46.0282 148.671L8.72658 40.5724L0.19165 45.5V136.5L35.5712 156.926L46.0282 148.671ZM39.2998 159.079L47.4103 152.676L52.1873 166.52L39.2998 159.079ZM115.235 99.1299L157.808 65.5197V136.5L119.357 158.7L115.235 99.1299ZM157.808 60.4234L114.901 94.2976L109.6 17.6667L157.808 45.5V60.4234Z" fill="url(#logo-grad)"/>
62-
<defs>
63-
<linearGradient id="logo-grad" x1="0.5" y1="46" x2="79" y2="182" gradientUnits="userSpaceOnUse">
64-
<stop stop-color="#66DE6F"/>
65-
<stop offset="1" stop-color="#66DEDE"/>
66-
</linearGradient>
67-
</defs>
68-
</svg>
69-
React Naver Maps
70-
</a>
59+
<div class="site-header-left">
60+
<button class="sidebar-toggle" id="sidebar-toggle">
61+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
62+
<line x1="3" y1="6" x2="21" y2="6" />
63+
<line x1="3" y1="12" x2="21" y2="12" />
64+
<line x1="3" y1="18" x2="21" y2="18" />
65+
</svg>
66+
</button>
67+
<a href={`${import.meta.env.BASE_URL}/`} class="site-logo">
68+
<svg width="22" height="25" viewBox="0 0 158 182" fill="none" xmlns="http://www.w3.org/2000/svg">
69+
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.423 15.2554L79 0L12.2551 38.5352L49.3537 146.046L111.099 97.2991L105.423 15.2554ZM111.433 102.131L50.7358 150.051L57.4715 169.571L79 182L115.501 160.926L111.433 102.131ZM46.0282 148.671L8.72658 40.5724L0.19165 45.5V136.5L35.5712 156.926L46.0282 148.671ZM39.2998 159.079L47.4103 152.676L52.1873 166.52L39.2998 159.079ZM115.235 99.1299L157.808 65.5197V136.5L119.357 158.7L115.235 99.1299ZM157.808 60.4234L114.901 94.2976L109.6 17.6667L157.808 45.5V60.4234Z" fill="url(#logo-grad)"/>
70+
<defs>
71+
<linearGradient id="logo-grad" x1="0.5" y1="46" x2="79" y2="182" gradientUnits="userSpaceOnUse">
72+
<stop stop-color="#66DE6F"/>
73+
<stop offset="1" stop-color="#66DEDE"/>
74+
</linearGradient>
75+
</defs>
76+
</svg>
77+
React Naver Maps
78+
</a>
79+
</div>
7180
<nav class="site-header-nav">
7281
<div class="site-version-dropdown">
7382
<select onchange="if(this.value) window.location.href = this.value">
@@ -87,6 +96,7 @@ navigation.sort(
8796
</nav>
8897
</div>
8998
</header>
99+
<div class="sidebar-overlay" id="sidebar-overlay"></div>
90100

91101
<div class="site-container">
92102
<aside class="site-sidebar">
@@ -123,6 +133,17 @@ navigation.sort(
123133
</body>
124134
</html>
125135

136+
<script is:inline>
137+
document.getElementById('sidebar-toggle').addEventListener('click', function() {
138+
document.querySelector('.site-sidebar').classList.toggle('open');
139+
document.getElementById('sidebar-overlay').classList.toggle('visible');
140+
});
141+
document.getElementById('sidebar-overlay').addEventListener('click', function() {
142+
document.querySelector('.site-sidebar').classList.remove('open');
143+
this.classList.remove('visible');
144+
});
145+
</script>
146+
126147
<style>
127148
.site-header {
128149
position: sticky;
@@ -143,6 +164,31 @@ navigation.sort(
143164
padding: 0 1.5rem;
144165
}
145166

167+
.site-header-left {
168+
display: flex;
169+
align-items: center;
170+
gap: 0.75rem;
171+
}
172+
173+
.sidebar-toggle {
174+
display: none;
175+
align-items: center;
176+
justify-content: center;
177+
width: 2rem;
178+
height: 2rem;
179+
padding: 0;
180+
border: none;
181+
border-radius: 4px;
182+
background: none;
183+
color: var(--acd-text-muted);
184+
cursor: pointer;
185+
}
186+
187+
.sidebar-toggle:hover {
188+
background: var(--acd-bg-subtle);
189+
color: var(--acd-text);
190+
}
191+
146192
.site-logo {
147193
display: flex;
148194
align-items: center;
@@ -177,6 +223,18 @@ navigation.sort(
177223
color: var(--acd-text-muted);
178224
}
179225

226+
.sidebar-overlay {
227+
display: none;
228+
position: fixed;
229+
inset: 0;
230+
z-index: 19;
231+
background: rgba(0, 0, 0, 0.3);
232+
}
233+
234+
.sidebar-overlay.visible {
235+
display: block;
236+
}
237+
180238
.site-container {
181239
display: flex;
182240
max-width: 1440px;
@@ -306,4 +364,48 @@ navigation.sort(
306364
border-radius: 4px;
307365
overflow-x: auto;
308366
}
367+
368+
@media (max-width: 768px) {
369+
.sidebar-toggle {
370+
display: flex;
371+
}
372+
373+
.site-header-inner {
374+
padding: 0 1rem;
375+
}
376+
377+
.site-logo {
378+
font-size: 1.125rem;
379+
}
380+
381+
.site-sidebar {
382+
position: fixed;
383+
top: var(--site-header-height);
384+
left: 0;
385+
z-index: 20;
386+
width: 280px;
387+
height: calc(100vh - var(--site-header-height));
388+
background: #fff;
389+
transform: translateX(-100%);
390+
transition: transform 0.25s ease;
391+
border-right: 1px solid var(--acd-border);
392+
}
393+
394+
.site-sidebar.open {
395+
transform: translateX(0);
396+
}
397+
398+
.site-main {
399+
padding: 1.5rem 1rem 3rem;
400+
}
401+
402+
.site-content :global(h1) {
403+
font-size: 1.5rem;
404+
}
405+
406+
.site-content :global(th),
407+
.site-content :global(td) {
408+
padding: 0.375rem 0.5rem;
409+
}
410+
}
309411
</style>

0 commit comments

Comments
 (0)