릴리스: v1.2.26 관리자 회원 관리와 셸 UI 개선

frontend/src/App.vue

@@ -1,17 +1,17 @@
 <script setup>
-import { computed, onMounted, provide, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { toApiUrl } from './lib/runtime'
-import { api } from './lib/api'
 import { useToast } from './composables/useToast'
 import iconDockToLeft from './assets/icons/dock_to_left.svg'
 import iconDockToRight from './assets/icons/dock_to_right.svg'
 import iconGridView from './assets/icons/grid_view.svg'
+import iconFavorite from './assets/icons/favorite.svg'
 import iconLists from './assets/icons/lists.svg'
-import iconMore from './assets/icons/more.svg'
 import iconSearch from './assets/icons/search.svg'
 import iconSettings from './assets/icons/settings.svg'
+import RightRailAd from './components/RightRailAd.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -21,13 +21,16 @@ const { toasts, dismissToast } = useToast()
 const leftRailCollapsed = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
-const favoriteShortcuts = ref([])
+const isCollapsedSearchOpen = ref(false)
+const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1440)
 provide('rightRailOpen', rightRailOpen)
 provide('localRightRailTarget', '#local-right-rail-root')
 
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const isPreviewMode = computed(() => route.query.preview === '1')
 const usesLocalRightRail = computed(() => ['editEditor', 'newEditor', 'admin'].includes(String(route.name || '')))
+const isRightRailOverlay = computed(() => viewportWidth.value <= 1200)
+const isMobileLayout = computed(() => viewportWidth.value <= 860)
 const avatarUrl = computed(() => (auth.user?.avatarSrc ? toApiUrl(auth.user.avatarSrc) : ''))
 const accountName = computed(() => {
   const nickname = (auth.user?.nickname || '').trim()
@@ -39,17 +42,29 @@ const accountName = computed(() => {
 const accountEmail = computed(() => (auth.user?.email || '').trim() || '로그인 후 개인 메뉴를 사용할 수 있어요.')
 const shellStyle = computed(() => ({
   '--left-rail-width': leftRailCollapsed.value ? '76px' : '248px',
-  '--right-rail-width': rightRailOpen.value ? '320px' : '0px',
+  '--right-rail-width': !isRightRailOverlay.value && rightRailOpen.value ? '320px' : '0px',
 }))
 const leftNavItems = computed(() => {
   const items = [
     { key: 'home', label: 'Games', path: '/', iconSrc: iconGridView },
-    { key: 'me', label: '내 리스트', path: '/me', iconSrc: iconLists, requiresAuth: true },
-    { key: 'favorites', label: '즐겨찾기', path: '/favorites', icon: 'M12 4.75l2.18 4.42 4.88.71-3.53 3.44.83 4.86L12 15.9 7.64 18.18l.83-4.86-3.53-3.44 4.88-.71z', requiresAuth: true },
+    { key: 'me', label: 'My Lists', path: '/me', iconSrc: iconLists, requiresAuth: true },
+    { key: 'favorites', label: 'Favorites', path: '/favorites', iconSrc: iconFavorite, requiresAuth: true },
     { key: 'profile', label: 'Settings', path: '/profile', iconSrc: iconSettings, requiresAuth: true },
   ]
   return items.filter((item) => !item.requiresAuth || auth.user)
 })
+const showRightRailAction = computed(() => false)
+const leftBottomPrimaryAction = computed(() => {
+  if (route.name === 'home' && auth.user) {
+    return { label: '커스텀 티어표 만들기', to: '/editor/freeform/new' }
+  }
+  if (route.name === 'gameHub') {
+    const target = `/editor/${route.params.gameId}/new`
+    return { label: '새 티어표 만들기', to: auth.user ? target : `/login?redirect=${target}` }
+  }
+  return null
+})
+
 const routeMeta = computed(() => {
   if (route.name === 'home') {
     return {
@@ -146,31 +161,73 @@ const routeMeta = computed(() => {
   }
 })
 
+function syncViewportWidth() {
+  if (typeof window === 'undefined') return
+  viewportWidth.value = window.innerWidth
+}
+
 onMounted(async () => {
   await auth.refresh()
   if (typeof window !== 'undefined') {
+    syncViewportWidth()
+    window.addEventListener('resize', syncViewportWidth)
+    window.addEventListener('keydown', handleGlobalKeydown)
     const leftSaved = window.localStorage.getItem('tier-maker:left-rail-collapsed')
     if (leftSaved === '1') leftRailCollapsed.value = true
     const saved = window.localStorage.getItem('tier-maker:right-rail-open')
     if (saved === '0') rightRailOpen.value = false
   }
   searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
-  await loadFavoriteShortcuts()
+})
+
+function handleGlobalKeydown(event) {
+  if (event.key === 'Escape' && isCollapsedSearchOpen.value) {
+    closeCollapsedSearch()
+  }
+}
+
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', syncViewportWidth)
+    window.removeEventListener('keydown', handleGlobalKeydown)
+  }
 })
 
 watch(
   () => route.fullPath,
   () => {
     searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
+    isCollapsedSearchOpen.value = false
   }
 )
 
+watch(
+  isMobileLayout,
+  (mobile) => {
+    if (mobile) leftRailCollapsed.value = false
+  },
+  { immediate: true }
+)
+
+watch(
+  usesLocalRightRail,
+  (needed) => {
+    if (!needed || rightRailOpen.value) return
+    rightRailOpen.value = true
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('tier-maker:right-rail-open', '1')
+    }
+  },
+  { immediate: true }
+)
+
 function isRouteActive(path) {
   if (path === '/') return route.path === '/'
   return route.path.startsWith(path)
 }
 
 function toggleLeftRail() {
+  if (isMobileLayout.value) return
   leftRailCollapsed.value = !leftRailCollapsed.value
   if (typeof window !== 'undefined') {
     window.localStorage.setItem('tier-maker:left-rail-collapsed', leftRailCollapsed.value ? '1' : '0')
@@ -184,42 +241,30 @@ function toggleRightRail() {
   }
 }
 
-function avatarFallbackOfFavorite(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+function openCollapsedSearch() {
+  if (!leftRailCollapsed.value || isMobileLayout.value) return
+  isCollapsedSearchOpen.value = true
 }
 
-function favoriteThumbnailUrl(tierList) {
-  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+function closeCollapsedSearch() {
+  isCollapsedSearchOpen.value = false
 }
 
-async function loadFavoriteShortcuts() {
-  if (!auth.user) {
-    favoriteShortcuts.value = []
+function handleLeftRailSearch() {
+  if (leftRailCollapsed.value && !isMobileLayout.value) {
+    openCollapsedSearch()
     return
   }
-  try {
-    const data = await api.listMyFavoriteTierLists({ sort: 'favorited' })
-    favoriteShortcuts.value = (data.tierLists || []).slice(0, 10)
-  } catch (e) {
-    favoriteShortcuts.value = []
-  }
-}
-
-function openFavoriteShortcut(item) {
-  router.push(`/editor/${item.gameId}/${item.id}`)
+  submitGlobalSearch()
 }
 
 function submitGlobalSearch() {
   const query = (searchQuery.value || '').trim()
+  isCollapsedSearchOpen.value = false
   router.push(query ? `/search?q=${encodeURIComponent(query)}` : '/search')
 }
 
-watch(
-  () => auth.user?.id,
-  async () => {
-    await loadFavoriteShortcuts()
-  }
-)
+
 </script>
 
 <template>
@@ -229,6 +274,7 @@ watch(
       'appShell--preview': isPreviewMode,
       'appShell--leftCollapsed': leftRailCollapsed,
       'appShell--rightClosed': !rightRailOpen,
+      'appShell--rightOverlay': isRightRailOverlay,
     }"
     :style="shellStyle"
   >
@@ -240,12 +286,13 @@ watch(
     <template v-else>
       <aside class="leftRail">
         <div class="leftRail__top railHeader">
-          <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="왼쪽 패널 토글" @click="toggleLeftRail">
+          <button v-if="!isMobileLayout" class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="왼쪽 패널 토글" @click="toggleLeftRail">
             <img :src="iconDockToRight" alt="" />
           </button>
         </div>
 
         <div class="leftRail__body">
+        <div class="leftRail__content">
         <div v-if="auth.user" class="appUserCard">
           <div class="appUserCard__button">
             <img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" />
@@ -258,9 +305,11 @@ watch(
         </div>
 
         <form class="searchStub" @submit.prevent="submitGlobalSearch">
-          <span class="searchStub__icon">
-            <img :src="iconSearch" alt="" />
-          </span>
+          <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
+            <span class="searchStub__icon">
+              <img :src="iconSearch" alt="" />
+            </span>
+          </button>
           <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : '전체 티어표 검색'" />
         </form>
 
@@ -271,6 +320,8 @@ watch(
             :to="item.path"
             class="leftNav__item"
             :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
+            :title="leftRailCollapsed ? item.label : ''"
+            :aria-label="leftRailCollapsed ? item.label : undefined"
           >
             <span class="leftNav__glyph">
               <img v-if="item.iconSrc" :src="item.iconSrc" alt="" />
@@ -280,36 +331,13 @@ watch(
           </RouterLink>
         </nav>
 
-        <div class="leftRail__section">
-          <div class="leftRail__sectionTitle">Favorites</div>
-          <template v-if="favoriteShortcuts.length">
-            <button
-              v-for="item in favoriteShortcuts"
-              :key="item.id"
-              type="button"
-              class="favoriteShortcut"
-              @click="openFavoriteShortcut(item)"
-            >
-              <img v-if="favoriteThumbnailUrl(item)" :src="favoriteThumbnailUrl(item)" alt="" class="favoriteShortcut__thumb" />
-              <div v-else class="favoriteShortcut__thumb favoriteShortcut__thumb--fallback">{{ avatarFallbackOfFavorite(item) }}</div>
-              <span class="favoriteShortcut__label">{{ item.title }}</span>
-            </button>
-            <RouterLink to="/favorites" class="favoriteMoreLink">
-              <span class="favoriteMoreLink__icon">
-                <img :src="iconMore" alt="" />
-              </span>
-              <span>즐겨찾기 더 보기</span>
-              <span class="favoriteMoreLink__arrow">↗</span>
-            </RouterLink>
-          </template>
-          <div v-else class="favoriteEmpty">아직 즐겨찾기한 티어표가 없어요.</div>
         </div>
-
-        </div>
-        <div class="leftRail__bottom railFooter">
+        <div class="leftRail__bottom">
+          <RouterLink v-if="leftBottomPrimaryAction" :to="leftBottomPrimaryAction.to" class="adminButton">{{ leftBottomPrimaryAction.label }}</RouterLink>
           <RouterLink v-if="isAdmin" to="/admin" class="adminButton">관리자 메뉴</RouterLink>
           <RouterLink v-else-if="!auth.user" to="/login" class="adminButton">로그인</RouterLink>
         </div>
+        </div>
       </aside>
 
       <main class="appMain">
@@ -331,23 +359,39 @@ watch(
         </section>
       </main>
 
-      <aside class="rightRail" :class="{ 'rightRail--closed': !rightRailOpen }" :aria-hidden="!rightRailOpen">
+      <div v-if="isCollapsedSearchOpen" class="collapsedSearchModal" role="dialog" aria-modal="true" aria-label="전체 티어표 검색" @click.self="closeCollapsedSearch">
+        <form class="collapsedSearchBar" @submit.prevent="submitGlobalSearch">
+          <span class="collapsedSearchBar__icon">
+            <img :src="iconSearch" alt="" />
+          </span>
+          <input v-model="searchQuery" class="collapsedSearchBar__input" type="search" placeholder="전체 티어표 검색" autofocus />
+        </form>
+      </div>
+
+      <button v-if="rightRailOpen && isRightRailOverlay" class="rightRailBackdrop" type="button" aria-label="오른쪽 패널 닫기" @click="toggleRightRail"></button>
+
+      <aside class="rightRail" :class="{ 'rightRail--closed': !rightRailOpen, 'rightRail--overlay': isRightRailOverlay }" :aria-hidden="!rightRailOpen">
         <div class="rightRail__top railHeader">
           <button v-if="rightRailOpen" class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="패널 닫기" @click="toggleRightRail">
             <img :src="iconDockToLeft" alt="" />
           </button>
         </div>
         <div class="rightRail__body">
-          <div id="local-right-rail-root" class="localRightRailRoot"></div>
-        </div>
-        <div class="rightRail__bottom railFooter">
-          <template v-if="!usesLocalRightRail">
-            <section class="rightRailAction">
-              <button class="rightRailAction__button" type="button" @click="routeMeta.action">
-                {{ routeMeta.actionLabel }}
-              </button>
-            </section>
-          </template>
+          <div class="rightRail__content">
+            <div v-if="usesLocalRightRail" id="local-right-rail-root" class="localRightRailRoot"></div>
+            <template v-else>
+              <RightRailAd />
+            </template>
+          </div>
+          <div class="rightRail__bottom">
+            <template v-if="showRightRailAction">
+              <section class="rightRailAction">
+                <button class="rightRailAction__button" type="button" @click="routeMeta.action">
+                  {{ routeMeta.actionLabel }}
+                </button>
+              </section>
+            </template>
+          </div>
         </div>
       </aside>
     </template>
@@ -422,15 +466,6 @@ watch(
   box-sizing: border-box;
 }
 
-.railFooter {
-  height: 56px;
-  min-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  box-sizing: border-box;
-}
 
 .leftRail__top,
 .rightRail__top {
@@ -451,9 +486,36 @@ watch(
   min-height: 0;
   padding: 14px 12px;
   box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.leftRail__body {
+  max-height: calc(100vh - 56px);
+}
+
+.rightRail__body {
+  max-height: none;
+}
+
+.leftRail__content,
+.rightRail__content {
+  flex: 1;
+  min-height: 0;
   overflow: auto;
 }
 
+.rightRail__body {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.rightRail__content {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
 .ghostIcon {
   min-width: 28px;
   height: 28px;
@@ -473,8 +535,8 @@ watch(
 .searchStub__icon svg,
 .leftNav__glyph svg,
 .contextLink svg {
-  width: 16px;
-  height: 16px;
+  width: 28px;
+  height: 28px;
   stroke: currentColor;
   stroke-width: 1.8;
   fill: none;
@@ -484,10 +546,9 @@ watch(
 
 .ghostIcon img,
 .leftNav__glyph img,
-.searchStub__icon img,
-.favoriteMoreLink__icon img {
-  width: 16px;
-  height: 16px;
+.searchStub__icon img {
+  width: 24px;
+  height: 24px;
   display: block;
   filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
 }
@@ -513,8 +574,6 @@ watch(
   align-items: center;
   padding: 10px;
   border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
   color: inherit;
   text-align: left;
   cursor: default;
@@ -589,6 +648,17 @@ watch(
   color: rgba(255, 255, 255, 0.42);
 }
 
+.searchStub__iconButton {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
 .searchStub__icon {
   width: 18px;
   height: 18px;
@@ -625,104 +695,17 @@ watch(
 }
 
 .leftNav__glyph {
-  width: 28px;
-  height: 28px;
-  border-radius: 10px;
+  /* width: 28px; */
+  /* height: 28px; */
+  /* border-radius: 10px; */
   display: grid;
   place-items: center;
-  background: rgba(255, 255, 255, 0.06);
+  /* background: rgba(255, 255, 255, 0.06); */
   flex: 0 0 auto;
 }
 
-.leftRail__section {
-  margin-top: 22px;
-  display: grid;
-  gap: 8px;
-  transition: margin 220ms ease;
-}
-
-.leftRail__sectionTitle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.38);
-  font-weight: 600;
-}
-
-.favoriteEmpty {
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.46);
-  line-height: 1.5;
-}
-
-.favoriteShortcut {
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr);
-  gap: 8px;
-  align-items: center;
-  padding: 3px 0;
-  border: 0;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.72);
-  text-align: left;
-  cursor: pointer;
-}
-
-.favoriteShortcut__thumb {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  object-fit: cover;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.favoriteShortcut__thumb--fallback {
-  display: grid;
-  place-items: center;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.favoriteShortcut__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-}
-
-.favoriteMoreLink {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 4px;
-  color: rgba(255, 255, 255, 0.62);
-  text-decoration: none;
-  font-size: 12px;
-}
-
-.favoriteMoreLink__icon {
-  width: 22px;
-  height: 22px;
-  border-radius: 8px;
-  display: grid;
-  place-items: center;
-  background: rgba(255, 255, 255, 0.06);
-  flex: 0 0 auto;
-}
-
-.favoriteMoreLink__icon img {
-  width: 12px;
-  height: 12px;
-  display: block;
-  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
-}
-
-.favoriteMoreLink__arrow {
-  margin-left: auto;
-  opacity: 0.56;
+.appShell--leftCollapsed .leftRail__top {
+  justify-content: center;
 }
 
 .appShell--leftCollapsed .leftRail__body {
@@ -737,24 +720,27 @@ watch(
 .appShell--leftCollapsed .appUserCard__button,
 .appShell--leftCollapsed .appUserCard__guest {
   justify-content: center;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 6px 0;
 }
 
 .appShell--leftCollapsed .appUserCard__meta,
-.appShell--leftCollapsed .searchStub__input,
 .appShell--leftCollapsed .leftNav__label,
-.appShell--leftCollapsed .leftRail__sectionTitle,
-.appShell--leftCollapsed .favoriteShortcut__label,
-.appShell--leftCollapsed .favoriteMoreLink span:not(.favoriteMoreLink__icon),
-.appShell--leftCollapsed .favoriteEmpty {
+.appShell--leftCollapsed .searchStub__input {
   display: none;
 }
 
+.appShell--leftCollapsed .appUserCard__avatar {
+  width: 44px;
+  height: 44px;
+}
+
 .appShell--leftCollapsed .searchStub {
   justify-content: center;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 10px 0;
+}
+
+.appShell--leftCollapsed .searchStub__iconButton {
+  width: 100%;
 }
 
 .appShell--leftCollapsed .leftNav {
@@ -763,34 +749,23 @@ watch(
 
 .appShell--leftCollapsed .leftNav__item {
   justify-content: center;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-.appShell--leftCollapsed .leftRail__section {
-  margin-top: 18px;
-}
-
-.appShell--leftCollapsed .favoriteShortcut {
-  grid-template-columns: 1fr;
-  justify-items: center;
-  padding: 2px 0;
-}
-
-.appShell--leftCollapsed .favoriteMoreLink {
-  justify-content: center;
+  padding: 11px 0;
 }
 
 .appShell--leftCollapsed .leftRail__bottom {
   display: none;
 }
 
+.appShell--leftCollapsed .leftRail__content {
+  overflow: hidden;
+}
+
 .leftRail__bottom {
+  display: grid;
+  gap: 10px;
   justify-content: stretch;
-  height: auto;
-  min-height: 56px;
-  padding-bottom: 56px;
-  align-items: flex-start;
+  align-items: flex-end;
+  padding-top: 12px;
 }
 
 .adminButton {
@@ -890,10 +865,9 @@ watch(
 }
 
 .rightRail__bottom {
-  height: auto;
-  min-height: 56px;
-  padding-bottom: 56px;
-  align-items: flex-start;
+  display: flex;
+  align-items: flex-end;
+  padding-top: 12px;
 }
 
 .rightRailAction__button {
@@ -907,8 +881,13 @@ watch(
   cursor: pointer;
 }
 
+.rightRailBackdrop {
+  display: none;
+}
+
+
 .localRightRailRoot {
-  min-height: calc(100vh - 84px);
+  min-height: auto;
   display: grid;
   align-content: start;
   gap: 14px;
@@ -980,13 +959,37 @@ watch(
   font-size: 12px;
 }
 
-@media (max-width: 1280px) {
+@media (max-width: 1200px) {
   .appShell {
-    grid-template-columns: 220px minmax(0, 1fr);
+    grid-template-columns: var(--left-rail-width, 248px) minmax(0, 1fr);
   }
 
-  .rightRail {
-    display: none;
+  .rightRailBackdrop {
+    position: fixed;
+    inset: 0;
+    display: block;
+    border: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 29;
+  }
+
+  .rightRail--overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(360px, calc(100vw - 20px));
+    height: 100vh;
+    z-index: 30;
+    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(14, 14, 14, 0.96);
+    box-shadow: -18px 0 36px rgba(0, 0, 0, 0.34);
+  }
+
+
+  .appShell--rightClosed .rightRail--overlay {
+    transform: translateX(calc(100% + 24px));
+    opacity: 0;
+    pointer-events: none;
   }
 }
 
@@ -1001,6 +1004,53 @@ watch(
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
 
+  .leftRail__top {
+    display: none;
+  }
+
+  .leftRail__body {
+    max-height: none;
+    padding: 12px 14px;
+  }
+
+  .leftRail__content {
+    overflow: visible;
+  }
+
+  .appShell--leftCollapsed .leftRail__top {
+    display: none;
+  }
+
+  .appShell--leftCollapsed .appUserCard__meta,
+  .appShell--leftCollapsed .leftNav__label,
+  .appShell--leftCollapsed .searchStub__input {
+    display: revert;
+  }
+
+  .appShell--leftCollapsed .appUserCard__button,
+  .appShell--leftCollapsed .appUserCard__guest,
+  .appShell--leftCollapsed .searchStub,
+  .appShell--leftCollapsed .leftNav__item {
+    justify-content: flex-start;
+  }
+
+  .appShell--leftCollapsed .appUserCard__button,
+  .appShell--leftCollapsed .appUserCard__guest {
+    padding: 10px;
+  }
+
+  .appShell--leftCollapsed .searchStub {
+    padding: 11px 12px;
+  }
+
+  .appShell--leftCollapsed .leftNav__item {
+    padding: 11px 12px;
+  }
+
+  .appShell--leftCollapsed .searchStub__iconButton {
+    width: auto;
+  }
+
   .workspaceBody {
     padding: 0;
     border-radius: 0;
@@ -1012,5 +1062,18 @@ watch(
     border-radius: 0;
     margin: 14px 14px 0;
   }
+
+  .collapsedSearchModal {
+    padding-top: 72px;
+  }
+
+  .collapsedSearchBar {
+    padding: 16px 18px;
+    border-radius: 20px;
+  }
+
+  .collapsedSearchBar__input {
+    font-size: 20px;
+  }
 }
 </style>