zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.55: 모바일 슬라이드 메뉴·우측 사이드 하단 배치

Browse Source 
lg 미만에서 좌측 내비를 오버레이 슬라이드로 전환하고, 본문 아래에 우측 사이드를 두며 헤더·패널 여백을 보정했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-11 11:38:03 +09:00
parent 3916bcb284
commit 94a37f451d
13 changed files with 177 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/site/RightSidebar.vue
View File

@@ -19,9 +19,9 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
</script>
<template>
<aside class="right-sidebar site-sidebar hidden w-[287px] overflow-hidden border-l border-[var(--site-line)] lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:self-start lg:flex lg:flex-col">
<aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:w-[287px] lg:self-start lg:border-l lg:border-t-0 lg:px-0">
<div class="right-sidebar__scroll site-sidebar-scroll min-h-0 flex-1">
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0 max-lg:px-0">
<div class="right-sidebar__profile flex items-center gap-3">
<div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
{{ siteSettings.logoText }}
@@ -35,9 +35,9 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
</p>
</div>
</div>
<form class="right-sidebar__subscribe mt-4 flex gap-2">
<input class="right-sidebar__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
<button class="right-sidebar__button rounded-lg px-4 py-2 text-sm font-semibold site-button" type="button">
<form class="right-sidebar__subscribe mt-4 flex flex-col gap-2 sm:flex-row sm:items-stretch">
<input class="right-sidebar__input min-w-0 w-full flex-1 rounded-lg px-3 py-2 text-sm site-input sm:min-w-0" placeholder="Your email">
<button class="right-sidebar__button shrink-0 rounded-lg px-4 py-2 text-sm font-semibold site-button sm:self-auto" type="button">
Subscribe
</button>
</form>
@@ -179,7 +179,7 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
</div>
</div>
<footer class="right-sidebar__footer shrink-0 py-4 pl-5 pr-0 text-xs site-muted">
<footer class="right-sidebar__footer shrink-0 py-4 pl-5 pr-0 text-xs site-muted max-lg:px-0">
{{ siteSettings.copyrightText }}
</footer>
</aside>