chore: wip - styling

src/App.routes.tsx

@@ -2,7 +2,6 @@ import { Outlet } from 'react-router-dom'
 import { LayoutPage } from './features/layout/pages/layout-page'
 import { Urls } from './routes/urls'
 import { evalTemplates } from './routes/templated-route'
-import { TransactionPage } from './features/transactions/components/transaction'
 
 export const routes = evalTemplates([
   {
@@ -18,12 +17,12 @@ export const routes = evalTemplates([
         element: <div>Home</div>,
       },
       {
-        template: Urls.Feature1,
-        element: <div>Feature 1</div>,
+        template: Urls.Explore,
+        element: <div>Explore</div>,
       },
       {
-        template: Urls.Transaction.ById,
-        element: <TransactionPage />,
+        template: Urls.AppStudio,
+        element: <div>App Studio</div>,
       },
     ],
   },

src/features/layout/components/left-side-bar-menu.tsx

@@ -5,21 +5,27 @@ import { cn } from '@/features/primitive/utils'
 
 export function LeftSideBarMenu() {
   return (
-    <NavigationMenu className={cn('bg-secondary')}>
+    <NavigationMenu className={cn('bg-secondary w-52')}>
       <NavigationMenuList className={cn('flex-col items-start space-x-0')}>
-        <NavigationMenuItem>
+        <NavigationMenuItem className={cn('flex h-12 items-center p-4')}>
           <NavigationMenuLink asChild>
-            <TemplatedNavLink urlTemplate={Urls.Feature1}>Home</TemplatedNavLink>
+            <TemplatedNavLink urlTemplate={Urls.Index} className={cn('[&.active]:text-primary')}>
+              Home
+            </TemplatedNavLink>
           </NavigationMenuLink>
         </NavigationMenuItem>
-        <NavigationMenuItem>
+        <NavigationMenuItem className={cn('flex h-12 items-center p-4')}>
           <NavigationMenuLink asChild>
-            <TemplatedNavLink urlTemplate={Urls.Feature1}>Explore</TemplatedNavLink>
+            <TemplatedNavLink urlTemplate={Urls.Explore} className={cn('[&.active]:text-primary')}>
+              Explore
+            </TemplatedNavLink>
           </NavigationMenuLink>
         </NavigationMenuItem>
-        <NavigationMenuItem>
+        <NavigationMenuItem className={cn('flex h-12 items-center p-4')}>
           <NavigationMenuLink asChild>
-            <TemplatedNavLink urlTemplate={Urls.Feature1}>App Studio</TemplatedNavLink>
+            <TemplatedNavLink urlTemplate={Urls.AppStudio} className={cn('[&.active]:text-primary')}>
+              App Studio
+            </TemplatedNavLink>
           </NavigationMenuLink>
         </NavigationMenuItem>
       </NavigationMenuList>

src/features/layout/pages/layout-page.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import { Header } from '../components/header'
 import { LeftSideBarMenu } from '../components/left-side-bar-menu'
+import { cn } from '@/features/primitive/utils'
 
 export interface LayoutPageProps {
   children?: ReactNode
@@ -10,8 +11,10 @@ export function LayoutPage({ children }: LayoutPageProps) {
   return (
     <>
       <Header />
-      <LeftSideBarMenu />
-      {children}
+      <div className={cn('flex h-full flex-row')}>
+        <LeftSideBarMenu />
+        {children}
+      </div>
     </>
   )
 }

src/features/primitive/components/navigation-menu.tsx

@@ -9,11 +9,7 @@ const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
-    {...props}
-  >
+  <NavigationMenuPrimitive.Root ref={ref} className={cn('relative z-10 flex flex-1', className)} {...props}>
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>

src/index.css

@@ -73,4 +73,7 @@
   body {
     @apply bg-background text-foreground;
   }
+  #root {
+    height: 100vh;
+  }
 }

src/routes/urls.ts

@@ -8,8 +8,6 @@ export const UrlParams = {
 
 export const Urls = {
   Index: UrlTemplate`/`,
-  Feature1: UrlTemplate`/feature-1`,
-  Transaction: UrlTemplate`/transaction`.extend({
-    ById: UrlTemplate`/${UrlParams.TransactionId}`,
-  }),
+  Explore: UrlTemplate`/explore`,
+  AppStudio: UrlTemplate`/app-studio`,
 }