apply shell scope to private view layout

formfcw · Apr 9, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026
commit 6b36ce8f0f62a31ee2293549214e18c419fce3c7
diff --git a/app/src/views/private/private-view/components/private-view-header-bar.vue b/app/src/views/private/private-view/components/private-view-header-bar.vue
@@ -29,7 +29,7 @@ const showNavToggle = computed(() => {
 </script>
 
 <template>
-	<header class="header-bar">
+	<header class="header-bar" :class="{ 'nav-expanded': !navBarStore.collapsed }">
 		<div class="primary">
 			<PrivateViewHeaderBarActionButton
 				v-if="showNavToggle"
@@ -93,12 +93,23 @@ const showNavToggle = computed(() => {
 @use '@/styles/mixins';
 
 .header-bar {
-	background-color: var(--theme--header--background);
+	position: relative;
 	padding-inline: var(--content-padding);
-	border-block-end: var(--theme--header--border-width) solid var(--theme--header--border-color);
 	block-size: var(--header-bar-height);
 	grid-template-rows: repeat(2, 1fr);
 
+	/* background is set in .root-split, border is set on .main-split */
+
+	&.nav-expanded::before {
+		content: '';
+		position: absolute;
+		block-size: 1.5rem;
+		transform: translate(0, -50%);
+		inset-block-start: 50%;
+		inset-inline-start: 0;
+		border-inline-end: var(--theme--border-width) solid var(--theme--border-color-accent);
+	}
+
 	@media (width > 22.5rem) {
 		display: flex;
 		align-items: center;

diff --git a/app/src/views/private/private-view/components/private-view-main.vue b/app/src/views/private/private-view/components/private-view-main.vue
@@ -4,6 +4,7 @@ import { useBreakpoints } from '@vueuse/core';
 import { computed, type ComputedRef, inject, provide, useTemplateRef, watch } from 'vue';
 import NotificationsGroup from '../../components/notifications-group.vue';
 import SkipMenu from '../../components/skip-menu.vue';
+import { useNavBarStore } from '../stores/nav-bar';
 import { useSidebarStore } from '../stores/sidebar';
 import PrivateViewDrawer from './private-view-drawer.vue';
 import PrivateViewHeaderBar from './private-view-header-bar.vue';
@@ -21,6 +22,7 @@ const contentEl = useTemplateRef('content-el');
 provide('main-element', contentEl);
 
 const userStore = useUserStore();
+const navBarStore = useNavBarStore();
 const sidebarStore = useSidebarStore();
 
 const livePreviewActive = inject<ComputedRef<boolean>>(
@@ -79,6 +81,7 @@ const teleportTarget = computed(() => (isMobile.value ? '#sidebar-mobile-outlet'
 			divider-hit-area="4px"
 			:transition-duration="125"
 			class="main-split"
+			:class="{ 'nav-collapsed': navBarStore.collapsed }"
 			:disabled="isMobile"
 		>
 			<template #start>
@@ -136,6 +139,16 @@ const teleportTarget = computed(() => (isMobile.value ? '#sidebar-mobile-outlet'
 	flex: 1;
 	min-block-size: 0;
 	position: relative;
+	border-block-start: var(--theme--shell--border-width) solid var(--theme--shell--border-color);
+	border-inline-start: var(--theme--shell--border-width) solid var(--theme--shell--border-color);
+	border-start-start-radius: var(--theme--border-radius);
+	overflow: hidden;
+	background: var(--theme--background);
+
+	&.nav-collapsed {
+		border-inline-start: none;
+		border-start-start-radius: 0;
+	}
 }
 
 .scrolling-container {

diff --git a/app/src/views/private/private-view/components/private-view-nav-project-name.vue b/app/src/views/private/private-view/components/private-view-nav-project-name.vue
@@ -39,7 +39,7 @@ const navBarStore = useNavBarStore();
 	padding-inline: 1.25rem 0.75rem;
 	color: var(--theme--navigation--project--foreground);
 	text-align: start;
-	background: var(--theme--navigation--background);
+	background: transparent;
 
 	.name-container {
 		flex-grow: 1;

diff --git a/app/src/views/private/private-view/components/private-view-nav.vue b/app/src/views/private/private-view/components/private-view-nav.vue
@@ -22,7 +22,7 @@ defineProps<{ id?: string }>();
 	position: relative;
 	display: block;
 	font-size: 0.8125rem;
-	background: var(--theme--navigation--background);
+	background: var(--theme--shell--background);
 }
 
 .module-nav-content {
@@ -41,6 +41,7 @@ defineProps<{ id?: string }>();
 
 	block-size: calc(100% - var(--project-header-height));
 	overflow: hidden auto;
-	border-inline-end: var(--theme--navigation--border-width) solid var(--theme--navigation--border-color);
+
+	/* border is set on .main-split */
 }
 </style>
diff --git a/app/src/views/private/private-view/components/private-view-root.vue b/app/src/views/private/private-view/components/private-view-root.vue
@@ -124,6 +124,7 @@ const splitterCollapsed = computed({
 	flex-grow: 1;
 	block-size: 100%;
 	position: relative;
+	background: var(--theme--shell--background);
 }
 
 :deep(.root-split > :is(.sp-start, .sp-end)) {