up

HugoRCD · Mar 1, 2025 · 6961123 · 6961123
1 parent 5cb59c3
commit 6961123
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 43 deletions.
diff --git a/apps/base/assets/css/animations.css b/apps/base/assets/css/animations.css
@@ -10,11 +10,11 @@
 }
 
 .slide-to-top-enter-active {
-  animation: slide-to-top-in 0.3s ease-in-out;
+  animation: slide-to-top-in 0.2s ease-in-out;
 }
 
 .slide-to-top-leave-active {
-  animation: slide-to-top-out 0.3s ease-in-out;
+  animation: slide-to-top-out 0.2s ease-in-out;
 }
 
 @keyframes slide-to-top-in {
@@ -42,11 +42,11 @@
 }
 
 .slide-to-bottom-enter-active {
-  animation: slide-to-bottom-in 0.3s ease-in-out;
+  animation: slide-to-bottom-in 0.2s ease-in-out;
 }
 
 .slide-to-bottom-leave-active {
-  animation: slide-to-bottom-out 0.3s ease-in-out;
+  animation: slide-to-bottom-out 0.2s ease-in-out;
 }
 
 @keyframes slide-to-bottom-in {

diff --git a/apps/base/assets/css/base.css b/apps/base/assets/css/base.css
@@ -12,6 +12,15 @@
   border-radius: 5px;
 }
 
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
 :root {
   --ui-bg: var(--color-white);
   --ui-bg-muted: var(--color-neutral-50);

diff --git a/apps/shelve/app/components/layout/Navbar.vue b/apps/shelve/app/components/layout/Navbar.vue
@@ -161,21 +161,17 @@ defineShortcuts({
   @apply w-auto min-w-full flex-nowrap overflow-x-auto;
 }
 
-.mobile-navbar.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.mobile-navbar.no-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
 .nav-items-scrollable {
   @apply flex items-center flex-nowrap min-w-fit gap-2;
 }
 
 .navbar {
-  @apply backdrop-blur-lg shadow-2xl flex items-center gap-1 sm:gap-2 rounded-full p-2;
+  @apply backdrop-blur-lg flex items-center gap-1 sm:gap-2 rounded-full p-2;
+  box-shadow: 0 7px 20px 12px rgb(65 65 65 / 10%);
+}
+
+.dark .navbar {
+  box-shadow: 0 7px 20px 9px rgb(0 0 0 / 18%);
 }
 
 .search-container {

diff --git a/apps/shelve/app/layouts/app.vue b/apps/shelve/app/layouts/app.vue
@@ -8,6 +8,8 @@ const pages = computed(() => {
   return [...teamNavigations, ...userNavigations, ...adminNavigations]
 })
 
+const { user } = useUserSession()
+
 const navigation = computed(() => {
   if (route.path.includes('/projects'))
     return { title: 'Project Details', to: '/projects', name: 'project', icon: 'lucide:folder-open' }
@@ -17,38 +19,27 @@ const navigation = computed(() => {
 const routeTitle = computed(() => {
   return route.meta.title as string
 })
+
+const title = computed(() => {
+  return route.path === `/${teamSlug.value}` ? `Welcome, ${user.value?.username}` : navigation.value?.title || routeTitle.value
+})
 </script>
 
 <template>
   <div class="relative flex h-screen">
     <LayoutNavbar />
-    <div class="main-container flex flex-1 flex-col overflow-hidden border-l border-l-(--ui-border)">
-      <div class="flex justify-between gap-1 border-b border-(--ui-border) px-5 py-2">
-        <div class="flex items-center gap-2">
-          <template v-if="navigation">
-            <Transition name="slide-to-bottom" mode="out-in">
-              <div :key="navigation.icon">
-                <UIcon :name="navigation.icon!" class="size-5" />
-              </div>
-            </Transition>
-            <Transition name="slide-to-top" mode="out-in">
-              <h1 :key="navigation.title" class="text-lg font-semibold">
-                {{ navigation.title }}
-              </h1>
-            </Transition>
-          </template>
-          <template v-else-if="route.meta.icon">
-            <Transition name="slide-to-bottom" mode="out-in">
-              <div :key="route.meta.icon as string">
-                <UIcon :name="route.meta.icon as string" class="size-5" />
-              </div>
-            </Transition>
-            <Transition name="slide-to-top" mode="out-in">
-              <h1 :key="routeTitle.toLowerCase()" class="text-lg font-semibold">
-                {{ routeTitle }}
-              </h1>
-            </Transition>
-          </template>
+    <div class="size-full noise -z-10 absolute opacity-40" />
+    <div class="main-container flex flex-1 flex-col overflow-hidden">
+      <div class="flex justify-between gap-1">
+        <div class="flex items-end gap-2">
+          <NuxtLink to="/">
+            <Logo :text="false" size="size-8" />
+          </NuxtLink>
+          <Transition name="slide-to-top" mode="out-in">
+            <h1 :key="title" class="text-xl font-semibold italic">
+              {{ title }}
+            </h1>
+          </Transition>
         </div>
         <div class="flex items-center gap-2">
           <div id="action-items">
@@ -58,9 +49,17 @@ const routeTitle = computed(() => {
         </div>
       </div>
       <CliInstall />
-      <div class="flex mx-auto w-full flex-col gap-4 overflow-y-auto px-3 py-6 sm:px-6">
+      <div class="flex flex-col overflow-y-auto no-scrollbar gap-4 mt-6">
         <slot />
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+@import "tailwindcss";
+
+.main-container {
+  @apply w-full mx-auto max-w-[90rem] mt-10 px-6;
+}
+</style>
diff --git a/apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index.vue b/apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index.vue
@@ -40,7 +40,7 @@ const items = [
 <template>
   <div class="flex flex-col">
     <ProjectMainSection />
-    <div class="mt-8 mb-4 border-b border-(--ui-border)">
+    <div class="mt-8 mb-4">
       <UNavigationMenu
         color="neutral"
         orientation="horizontal"
@@ -56,6 +56,7 @@ const items = [
         class="md:hidden"
       />
     </div>
+    <Separator />
     <NuxtPage />
   </div>
 </template>