updated nav icons

apps/studio-prototype/src/app/[org]/[project]/side-nav.tsx

@@ -4,11 +4,18 @@ import { Separator } from 'ui'
 import SideMenuOrgMenu from '../side-menu-org-menu'
 import SideNavMenuIcon from '../side-nav-menu-icon'
 import SideNavMotion from '../side-nav-motion'
+import { Box } from 'lucide-react'
 
 function SideNav() {
   return (
     <SideNavMotion>
       {/* <SideMenuOrgMenu /> */}
+      {/* <div className="flex justify-center w-full">
+        <div className="text-[10px] uppercase flex justify-center bg-surface-200 w-full h-[37px] -top-8 items-center">
+          <Box size={16} className="text-foreground-muted" strokeWidth={1} />
+        </div>
+      </div> */}
+      {/* <Separator /> */}
       <div className="grow w-full flex flex-col my-5 gap-6">
         {SideNavData.map((group, i) => {
           return (

apps/studio-prototype/src/app/[org]/org-menu.tsx

@@ -63,7 +63,7 @@ export default function OrgMenu() {
               </div>
             </div>
             <DropdownMenuSeparator />
-            <DropdownMenuItem onSelect={() => router.push(`/${selectedOrg?.key}`)}>
+            <DropdownMenuItem onSelect={() => router.push(`/${selectedOrg?.key}/projects`)}>
               All Projects
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -83,7 +83,7 @@ export default function OrgMenu() {
                     <DropdownMenuItem
                       key={org.key}
                       onSelect={() => {
-                        router.push(`/${org.key}`)
+                        router.push(`/${org.key}/projects`)
                         setConfig({
                           ...config,
                           selectedOrg: db.orgs.find((o: Org) => o.key === org.key),

apps/studio-prototype/src/app/[org]/projects/page.tsx

@@ -1,14 +1,10 @@
-import ReadAndWritesChart from '@/src/components/charts/read-and-writes-chart'
-import ProjectList from './projects/project-list'
-import ProjectsCharts from './projects/projects-charts'
-import ProjectsHeader from './projects/projects-header'
 import QueriesChart from '@/src/components/charts/queries-chart'
-import IOPSChart from '@/src/components/charts/iops-chart'
-import StorageChart from '@/src/components/charts/storage-chart'
-import CPUAndMemoryChart from '@/src/components/charts/cpu-and-memory-chart'
-import { Button, Separator } from 'ui'
+import ReadAndWritesChart from '@/src/components/charts/read-and-writes-chart'
 import { Clock, MoreVertical } from 'lucide-react'
 import Image from 'next/image'
+import { Button, Separator } from 'ui'
+import ProjectList from './project-list'
+import ProjectsHeader from './projects-header'
 
 export default function ProjectsPage() {
   return (

apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx

@@ -10,7 +10,10 @@ export default function SideNavMenuIcon({ product }: { product: any }) {
   const [config] = useConfig()
   const { selectedOrg, selectedProject } = config
   const pathname = usePathname()
-  const isActive = pathname.startsWith(`/${org}/${selectedProject?.key}${product.href}`)
+
+  const isActive =
+    pathname.startsWith(`/${org}/${selectedProject?.key}${product.href}`) ||
+    pathname.startsWith(`/${org}${product.href}`)
 
   // console.log('config.tableEditor.activeTabId', config.tableEditor.activeTabId)
 

apps/studio-prototype/src/app/[org]/top-header.tsx

@@ -48,7 +48,7 @@ export default function TopHeader() {
     >
       <div className="flex items-center justify-between w-full">
         <div className="flex gap-3">
-          <Link href={`/${selectedOrg?.key}`}>
+          <Link href={`/${selectedOrg?.key}/projects`}>
             <svg
               width="109"
               height="113"