Replaced profile pill bar with portal page.

pages/users/@username/+Page.vue

@@ -27,7 +27,10 @@ function scrollHorizontal(event) {
 	<div class="page">
 		<div class="profile">
 			<div class="profile-header">
-				<div class="user">
+				<a
+					:href="`/user/${profile.username}/`"
+					class="user nolink"
+				>
 					<img
 						v-if="profile.avatar"
 						:src="profile.avatar"
@@ -35,13 +38,13 @@ function scrollHorizontal(event) {
 					>
 
 					<h2 class="username ellipsis">{{ profile.username }}</h2>
-				</div>
+				</a>
 
 				<span class="age">{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
 			</div>
 
 			<nav
-				v-if="profile.id === user?.id"
+				v-if="!section && profile.id === user?.id"
 				class="domains nobar"
 				@wheel.prevent="scrollHorizontal"
 			>
@@ -49,38 +52,38 @@ function scrollHorizontal(event) {
 					:href="`/user/${profile.username}/stashes`"
 					class="domain nolink"
 					:class="{ active: section === 'stashes' }"
-				>Stashes</a>
+				><Icon icon="folder-heart" />Stashes</a>
 
 				<a
 					:href="`/user/${profile.username}/alerts`"
 					class="domain nolink"
 					:class="{ active: section === 'alerts' }"
-				>Alerts</a>
+				><Icon icon="alarm" />Alerts</a>
 
 				<a
 					:href="`/user/${profile.username}/templates`"
 					class="domain nolink"
 					:class="{ active: section === 'templates' }"
-				>Templates</a>
-
-				<a
-					:href="`/user/${profile.username}/revisions/scenes`"
-					class="domain nolink"
-					:class="{ active: section === 'revisions' && domain === 'scenes' }"
-				>Scene Revisions</a>
-
-				<a
-					:href="`/user/${profile.username}/revisions/actors`"
-					class="domain nolink"
-					:class="{ active: section === 'revisions' && domain === 'actors' }"
-				>Actor Revisions</a>
+				><Icon icon="paste3" />Templates</a>
 
 				<a
 					v-if="profile.isIdentityVerified"
 					:href="`/user/${profile.username}/api`"
 					class="domain nolink"
 					:class="{ active: section === 'api' }"
-				>API Keys</a>
+				><Icon icon="key" />API Keys</a>
+
+				<a
+					:href="`/user/${profile.username}/revisions/scenes`"
+					class="domain nolink"
+					:class="{ active: section === 'revisions' && domain === 'scenes' }"
+				><Icon icon="file-video2" />Scene Revisions</a>
+
+				<a
+					:href="`/user/${profile.username}/revisions/actors`"
+					class="domain nolink"
+					:class="{ active: section === 'revisions' && domain === 'actors' }"
+				><Icon icon="profile" />Actor Revisions</a>
 			</nav>
 
 			<Stashes v-if="section === 'stashes'" />
@@ -160,6 +163,7 @@ function scrollHorizontal(event) {
     color: var(--highlight-strong-30);
     background: var(--shadow-strong-30);
 	border-radius: 0 0 .5rem .5rem;
+	margin-bottom: .5rem;
 }
 
 .user {
@@ -193,25 +197,41 @@ function scrollHorizontal(event) {
 }
 
 .domains {
-	display: flex;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
 	gap: .5rem;
+	box-sizing: border-box;
 	padding: .5rem 0;
-	margin-top: .25rem;
-	overflow-x: auto;
+	margin-top: .5rem;
 }
 
 .domain {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
 	flex-shrink: 0;
 	color: var(--glass-strong-20);
 	background: var(--background-dark-20);
-	padding: .5rem 1rem;
+	padding: 1.25rem 2rem;
 	border-radius: 1rem;
-	font-size: .9rem;
+	font-size: 1rem;
 	font-weight: bold;
 
-	&.active {
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		transform: translateY(-1px);
+		fill: var(--glass-strong-20);
+	}
+
+	&:hover {
 		background: var(--primary);
 		color: var(--text-light);
+
+		.icon {
+			fill: var(--text-light);
+		}
 	}
 }