update auth shell around profile pages (#253)

Playabl-io · Feb 13, 2024 · 95e74f6 · 95e74f6
1 parent b2b252b
commit 95e74f6
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 33 deletions.
diff --git a/src/layouts/ProfileTemplate.vue b/src/layouts/ProfileTemplate.vue
@@ -1,33 +1,31 @@
 <template>
-  <AuthShell>
-    <BaseTemplate>
-      <SideNavTemplate>
-        <template #nav>
-          <SideNavLink to="/profile">
-            <UserCircleIcon class="h-6 w-6" />
-            <div class="inline-block sm:hidden lg:inline-block">Profile</div>
-          </SideNavLink>
-          <SideNavLink to="/notifications">
-            <BellIcon class="h-6 w-6" />
-            <div class="inline-block sm:hidden lg:inline-block">
-              Notifications
-            </div>
-          </SideNavLink>
-          <SideNavLink to="/media">
-            <PhotoIcon class="h-6 w-6" />
-            <div class="inline-block sm:hidden lg:inline-block">Media</div>
-          </SideNavLink>
-          <SideNavLink to="/settings">
-            <AdjustmentsVerticalIcon class="h-6 w-6" />
-            <div class="inline-block sm:hidden lg:inline-block">Settings</div>
-          </SideNavLink>
-        </template>
-        <template #content>
-          <slot></slot>
-        </template>
-      </SideNavTemplate>
-    </BaseTemplate>
-  </AuthShell>
+  <BaseTemplate>
+    <SideNavTemplate>
+      <template #nav>
+        <SideNavLink to="/profile">
+          <UserCircleIcon class="h-6 w-6" />
+          <div class="inline-block sm:hidden lg:inline-block">Profile</div>
+        </SideNavLink>
+        <SideNavLink to="/notifications">
+          <BellIcon class="h-6 w-6" />
+          <div class="inline-block sm:hidden lg:inline-block">
+            Notifications
+          </div>
+        </SideNavLink>
+        <SideNavLink to="/media">
+          <PhotoIcon class="h-6 w-6" />
+          <div class="inline-block sm:hidden lg:inline-block">Media</div>
+        </SideNavLink>
+        <SideNavLink to="/settings">
+          <AdjustmentsVerticalIcon class="h-6 w-6" />
+          <div class="inline-block sm:hidden lg:inline-block">Settings</div>
+        </SideNavLink>
+      </template>
+      <template #content>
+        <slot></slot>
+      </template>
+    </SideNavTemplate>
+  </BaseTemplate>
 </template>
 
 <script setup lang="ts">

diff --git a/src/pages/Profile/MediaShell.vue b/src/pages/Profile/MediaShell.vue
@@ -0,0 +1,9 @@
+<template>
+  <AuthShell>
+    <MediaPage />
+  </AuthShell>
+</template>
+<script setup lang="ts">
+import AuthShell from "@/layouts/AuthShell.vue";
+import MediaPage from "./MediaPage.vue";
+</script>
diff --git a/src/pages/Profile/NotificationsShell.vue b/src/pages/Profile/NotificationsShell.vue
@@ -0,0 +1,9 @@
+<template>
+  <AuthShell>
+    <NotificationsPage />
+  </AuthShell>
+</template>
+<script setup lang="ts">
+import AuthShell from "@/layouts/AuthShell.vue";
+import NotificationsPage from "./NotificationsPage.vue";
+</script>
diff --git a/src/pages/Profile/ProfileShell.vue b/src/pages/Profile/ProfileShell.vue
@@ -0,0 +1,9 @@
+<template>
+  <AuthShell>
+    <ProfilePage />
+  </AuthShell>
+</template>
+<script setup lang="ts">
+import AuthShell from "@/layouts/AuthShell.vue";
+import ProfilePage from "./ProfilePage.vue";
+</script>
diff --git a/src/pages/Profile/SettingsShell.vue b/src/pages/Profile/SettingsShell.vue
@@ -0,0 +1,9 @@
+<template>
+  <AuthShell>
+    <SettingsPage />
+  </AuthShell>
+</template>
+<script setup lang="ts">
+import AuthShell from "@/layouts/AuthShell.vue";
+import SettingsPage from "./SettingsPage.vue";
+</script>
diff --git a/src/router.ts b/src/router.ts
@@ -32,6 +32,10 @@ import {
   sortKeys,
 } from "./util/urlParams";
 import { format } from "date-fns";
+import ProfileShell from "./pages/Profile/ProfileShell.vue";
+import NotificationsShell from "./pages/Profile/NotificationsShell.vue";
+import MediaShell from "./pages/Profile/MediaShell.vue";
+import SettingsShell from "./pages/Profile/SettingsShell.vue";
 
 const routes = [
   {
@@ -57,19 +61,19 @@ const routes = [
   },
   {
     path: "/profile",
-    component: () => import("@/pages/Profile/ProfilePage.vue"),
+    component: ProfileShell,
   },
   {
     path: "/notifications",
-    component: () => import("@/pages/Profile/NotificationsPage.vue"),
+    component: NotificationsShell,
   },
   {
     path: "/media",
-    component: () => import("@/pages/Profile/MediaPage.vue"),
+    component: MediaShell,
   },
   {
     path: "/settings",
-    component: () => import("@/pages/Profile/SettingsPage.vue"),
+    component: SettingsShell,
   },
   {
     path: "/communities/joined",