https://portfolio.francescobertocci.com/assets/NavBarsPreview-DIixLZX7.js

1import{j as e}from"./vendor-query-BdFmonBs.js";import{u as J,r as K}from"./vendor-react-WIyK4ETu.js";import{aL as _,bc as $,B as s,bd as u,be as Q,bf as p,d as m,bg as g,ad as P,j as f,cm as z,_ as t,$ as c,a0 as d,a3 as a,a2 as x,cn as X,co as Y,bD as Z,cp as ee,cq as se,cr as ae,aI as r,H as v,aV as S,a4 as b,a8 as A,bp as T,T as C,ae as re,q as ie,cs as le,ag as B,ah as I,ai as L,az as ne,aj as U,K as O,G as V,V as R,a7 as D,a6 as E,a1 as te,a5 as ce,O as de,af as oe}from"./index-BFSEBbff.js";import{U as n}from"./UserAvatar-DJgxGx6b.js";import{H as j}from"./house-DlH7vBQU.js";import{E as N}from"./ellipsis-vertical-D2Z7fo7t.js";import{S as F}from"./settings-BeUglHND.js";import{L as H}from"./list-checks-kMbJ6yNj.js";import{C as me}from"./circle-check-D6Ggb6tG.js";import{R as xe}from"./radio-2wtqAns-.js";import{F as he}from"./folder-DebaJ0le.js";import"./vendor-supabase-CIugC5X6.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const je=_("LogIn",[["path",{d:"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4",key:"u53s6r"}],["polyline",{points:"10 17 15 12 10 7",key:"1ail0h"}],["line",{x1:"15",x2:"3",y1:"12",y2:"12",key:"v6grx8"}]]),o=({title:h,route:w,description:y,children:k})=>e.jsxs("div",{className:"space-y-4 border rounded-lg overflow-hidden",children:[e.jsxs("div",{className:"bg-muted/50 px-4 py-3 border-b",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("h3",{className:"font-semibold text-lg",children:h}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded font-mono text-muted-foreground",children:w})]}),e.jsx("p",{className:"text-sm text-muted-foreground mt-1",children:y})]}),e.jsx("div",{className:"p-0",children:k})]}),l=({label:h})=>e.jsx("div",{className:"px-4 py-2 bg-muted/30 text-xs font-mono text-muted-foreground border-t first:border-t-0",children:h});function Se(){const{theme:h,toggleTheme:w}=$(),y=J(),[k,G]=K.useState(!1),i={avatarUrl:null,firstName:"Alex",lastName:"Designer",name:"Alex Designer",username:"alexdesigner"};return e.jsxs("div",{className:"min-h-screen bg-background text-foreground",children:[e.jsx("header",{className:"sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur",children:e.jsxs("div",{className:"container mx-auto flex h-16 items-center justify-between px-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(s,{variant:"ghost",size:"icon","aria-label":"Go back",onClick:()=>y("/dspreview"),children:e.jsx(u,{className:"h-5 w-5"})}),e.jsx("h1",{className:"text-2xl font-bold",children:"Navigation Bars Audit"})]}),e.jsx(s,{variant:"outline",size:"icon","aria-label":h==="dark"?"Switch to light mode":"Switch to dark mode",onClick:w,children:h==="dark"?e.jsx(Q,{className:"h-5 w-5"}):e.jsx(p,{className:"h-5 w-5"})})]})}),e.jsx("main",{className:"container mx-auto px-4 py-8 max-w-6xl",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"bg-muted/30 border rounded-lg p-6",children:[e.jsx("h2",{className:"text-xl font-semibold mb-4",children:"Navigation Patterns Summary"}),e.jsxs("div",{className:"grid gap-4 md:grid-cols-2 lg:grid-cols-4",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Primary Navigation"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Authenticated dashboard pages"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Portfolio Action Bar"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Two-tier: breadcrumbs + status/actions"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Project Edit Bar"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Two-tier: status + edit mode toggle"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Public Project View"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Branding header + floating actions"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Creator Branding Header"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Public view owner attribution"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Minimal Nav"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Simple back + action nav"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"In-Page Tab Nav"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Secondary nav within content"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{className:"font-medium",children:"Breadcrumbs"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Inline hierarchical links"})]})]})]}),e.jsxs(o,{title:"1. Primary Navigation (Desktop)",route:"/profile, /portfolios, /links, /dashboard",description:"Main authenticated navigation with logo, nav items, notifications, and profile menu. Active section shows expanded label.",children:[e.jsx(l,{label:"Desktop - Profile Active"}),e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4",children:e.jsxs("div",{className:"flex h-16 items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(m,{className:"h-8 w-auto cursor-pointer"}),e.jsxs(s,{variant:"ghost",className:"bg-accent text-accent-foreground",children:[e.jsx(g,{className:"w-4 h-4"}),e.jsx("span",{className:"ml-2",children:"Profile"})]}),e.jsx(s,{variant:"ghost",children:e.jsx(P,{className:"w-4 h-4"})}),e.jsx(s,{variant:"ghost",children:e.jsx(f,{className:"w-4 h-4"})})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s,{variant:"ghost",size:"icon","aria-label":"Toggle theme",children:e.jsx(p,{className:"w-4 h-4"})}),e.jsxs(s,{variant:"ghost",children:[e.jsx(z,{className:"w-4 h-4 mr-2"}),"Sign Out"]})]})]})})}),e.jsx(l,{label:"Desktop - Portfolios Active"}),e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4",children:e.jsxs("div",{className:"flex h-16 items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(m,{className:"h-8 w-auto cursor-pointer"}),e.jsx(s,{variant:"ghost",children:e.jsx(g,{className:"w-4 h-4"})}),e.jsxs(s,{variant:"ghost",className:"bg-accent text-accent-foreground",children:[e.jsx(P,{className:"w-4 h-4"}),e.jsx("span",{className:"ml-2",children:"Portfolios"})]}),e.jsx(s,{variant:"ghost",children:e.jsx(f,{className:"w-4 h-4"})})]}),e.jsx("div",{className:"flex items-center gap-2",children:e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"ghost",size:"icon",className:"rounded-full","aria-label":"Account menu",children:e.jsx(n,{avatarUrl:null,firstName:"A",lastName:"D",size:"sm"})})}),e.jsxs(d,{align:"end",children:[e.jsxs(a,{children:[e.jsx(p,{className:"w-4 h-4 mr-2"}),"Dark Mode"]}),e.jsx(x,{}),e.jsxs(a,{children:[e.jsx(z,{className:"w-4 h-4 mr-2"}),"Sign Out"]})]})]})})]})})})]}),e.jsx(o,{title:"1b. Primary Navigation (Mobile)",route:"/profile, /portfolios, /links",de

6scription:"Mobile variant with hamburger menu sheet.",children:e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4",children:e.jsxs("div",{className:"flex h-16 items-center justify-between",children:[e.jsx(m,{className:"h-8 w-auto cursor-pointer"}),e.jsx("div",{className:"flex items-center gap-2",children:e.jsxs(X,{open:k,onOpenChange:G,children:[e.jsx(Y,{asChild:!0,children:e.jsx(s,{variant:"outline",size:"icon","aria-label":"Open menu",children:e.jsx(Z,{className:"h-5 w-5"})})}),e.jsxs(ee,{side:"right",className:"w-[280px]",children:[e.jsx(se,{children:e.jsx(ae,{children:"Navigation"})}),e.jsxs("div",{className:"flex flex-col gap-3 mt-6",children:[e.jsxs(s,{variant:"ghost",className:"w-full justify-start",children:[e.jsx(g,{className:"w-4 h-4 mr-2"}),"Profile"]}),e.jsxs(s,{variant:"ghost",className:"w-full justify-start bg-accent text-accent-foreground",children:[e.jsx(P,{className:"w-4 h-4 mr-2"}),"Portfolios"]}),e.jsxs(s,{variant:"ghost",className:"w-full justify-start",children:[e.jsx(f,{className:"w-4 h-4 mr-2"}),"Shared Links"]}),e.jsxs(s,{variant:"ghost",className:"w-full justify-start",children:[e.jsx(p,{className:"w-4 h-4 mr-2"}),"Dark Mode"]}),e.jsxs(s,{variant:"ghost",className:"w-full justify-start",children:[e.jsx(z,{className:"w-4 h-4 mr-2"}),"Sign Out"]})]})]})]})})]})})})}),e.jsxs(o,{title:"2. Two-Tier Action Bar (Portfolio)",route:"/portfolio/:id",description:"Two-tier navigation: Top tier has logo + breadcrumbs + profile; Bottom tier has status + actions.",children:[e.jsx(l,{label:"Draft Portfolio"}),e.jsxs("div",{className:"bg-background shadow-sm",children:[e.jsx("div",{className:"border-b border-border/40",children:e.jsx("div",{className:"px-6 py-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(m,{className:"h-6 w-auto cursor-pointer"}),e.jsxs("nav",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Profile"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"hover:text-foreground",children:"Portfolios"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"text-foreground font-medium",children:"Brand Identity"})]})]}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"ghost",size:"icon",className:"rounded-full","aria-label":"Account menu",children:e.jsx(n,{avatarUrl:null,firstName:"A",lastName:"D",size:"sm"})})}),e.jsx(d,{align:"end",children:e.jsx(a,{children:"Sign Out"})})]})]})})}),e.jsx("div",{className:"bg-muted/30",children:e.jsx("div",{className:"px-6 py-3",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(v,{variant:"draft",children:"Draft"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"Missing: cover image"})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsxs(s,{variant:"outline",size:"sm",children:[e.jsx(S,{className:"w-4 h-4 mr-2"}),"Preview"]}),e.jsxs(s,{variant:"outline",size:"sm",children:[e.jsx(b,{className:"w-4 h-4 mr-2"}),"Share"]}),e.jsx("div",{className:"h-6 w-px bg-border mx-1 hidden md:block"}),e.jsxs(s,{variant:"default",size:"sm",children:[e.jsx(A,{className:"w-4 h-4 mr-2"}),"Publish"]}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"outline",size:"sm",children:e.jsx(N,{className:"w-4 h-4"})})}),e.jsxs(d,{align:"end",children:[e.jsxs(a,{children:[e.jsx(T,{className:"w-4 h-4 mr-2"}),"Analytics"]}),e.jsxs(a,{children:[e.jsx(F,{className:"w-4 h-4 mr-2"}),"Settings"]}),e.jsx(x,{}),e.jsxs(a,{className:"text-destructive",children:[e.jsx(C,{className:"w-4 h-4 mr-2"}),"Delete"]})]})]})]})]})})})]}),e.jsx(l,{label:"Published Portfolio with Feature Toggle"}),e.jsxs("div",{className:"bg-background shadow-sm",children:[e.jsx("div",{className:"border-b border-border/40",children:e.jsx("div",{className:"px-6 py-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(m,{className:"h-6 w-auto cursor-pointer"}),e.jsxs("nav",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{children:"Portfolios"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"text-foreground font-medium",children:"Case Studies"})]})]}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"ghost",size:"icon",className:"rounded-full","aria-label":"Account menu",children:e.jsx(n,{avatarUrl:null,firstName:"A",lastName:"D",size:"sm"})})}),e.jsx(d,{align:"end",children:e.jsx(a,{children:"Sign Out"})})]})]})})}),e.jsx("div",{className:"bg-muted/30",children:e.jsx("div",{className:"px-6 py-3",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(v,{variant:"live",children:"Live"}),e.jsx("span",{className:"text-xs text-muted-foreground hidden sm:inline",children:"Last published Jan 5, 2026"})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsxs(s,{variant:"outline",size:"sm",children:[e.jsx(S,{className:"w-4 h-4 mr-2"}),"Preview"]}),e.jsxs(s,{variant:"outline",size:"sm",children:[e.jsx(b,{className:"w-4 h-4 mr-2"}),"Share"]}),e.jsx("div",{className:"h-6 w-px bg-border mx-1 hidden md:block"}),e.jsxs("div",{className:"flex items-center gap-2 px-2 py-1 rounded-md hover:bg-muted/50",children:[e.jsx(re,{id:"feature-toggle",defaultChecked:!0}),e.jsxs(ie,{htmlFor:"feature-toggle",className:"flex items-center gap-1 cursor-pointer text-sm",children:[e.jsx(le,{className:"w-3 h-3"}),e.jsx("span",{className:"hidden lg:inline",children:"Feature on Profile"})]})]}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"outline",size:"sm",children:e.jsx(N,{className:"w-4 h-4"})})}),e.jsx(d,{align:"end",children:e.jsxs(a,{children:[e.jsx(A,{className:"w-4 h-4 mr-2"}),"Unpublish"]})})]})]})]})})})]})]}),e.jsxs(o,{title:"2b. Two-Tier Action Bar (Project Edit)",route:"/portfolio/:portfolioId/project/:projectId",description:"Project editor navigation: First row has logo + back + status + validation + profile; Second row has edit mode toggle + actions.",children:[e.jsx(l,{label:"Draft Project - Visual Edit Mode"}),e.jsxs("div",{className:"bg-background shadow-sm",children:[e.jsx("nav",{className:"bg-background/95 backdrop-blur",children:e.jsxs("div",{className:"px-4 max-w-4xl mx-auto",children:[e.jsxs("div",{className:"flex items-center justify-between h-14",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(m,{className:"h-6 w-auto cursor-pointer"}),e.jsx(s,{variant:"ghost",size:"icon",title:"Back to portfolio",children:e.jsx(u,{className:"w-4 h-4"})})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(v,{variant:"draft",className:"text-sm px-3 py-1",children:"Draft"}),e.jsx(B,{children:e.jsxs(I,{children:[e.jsx(L,{asChild:!0,children:e.jsxs(s,{variant:"ghost",size:"sm",className:"gap-2",children:[e.jsx(ne,{className:"w-4 h-4 text-amber-600"}),e.jsx(H,{className:"w-4 h-4"}),e.jsx("span",{className:"text-xs",children:"3/5"})]})}),e.jsx(U,{children:e.jsx("p",{children:"Missing required content"})})]})}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"ghost",size:"icon",className:"rounded-full","aria-label":"Account menu",children:e.jsx(n,{avatarUrl:null,firstName:"A",lastName:"D",size:"sm"})})}),e.jsx(d,{align:"end",children:e.jsx(a,{children:"Sign Out"})})]})]})]}),e.jsxs("div",{className:"flex items-center justify-between h-12",children:[e.jsxs("div",{className:"flex rounded-lg p-1 bg-secondary/50",children:[e.jsxs(s,{size:"sm",variant:"ghost",className:"gap-2 bg-background shadow-sm text-foreground font-medium",children:[e.jsx(O,{className:"w-4 h-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Live Edit"})]}),e.jsxs(s,{size:"sm",variant:"ghost",className:"gap-2 text-muted-foreground hover:text-foreground",children:[e.jsx(V,{className:"w-4 h-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Advanced"})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(B,{children:e.jsxs(I,{children:[e.jsx(L,{asChild:!0,children:e.jsx(s,{variant:"outline",size:"icon",title:"Record Video Tour",children:e.jsx(R,{className:"w-4 h-4"})})}),e.jsx(U,{children:"Record Video Tour"})]})}),e.jsx(s,{variant:"outline",size:"sm",className:"px-2.5",children:e.jsx(S,{className:"w-4 h-4"})}),e.jsx(s,{variant:"outline",size:"sm",className:"px-2.5",children:e.jsx(D,{className:"w-4 h-4"})}),e.jsxs(s,{variant:"outline",size:"sm",children:[e.jsx(b,{className:"w-4 h-4 mr-2"}),e.jsx("span",{className:"hidden sm:inline",children:"Share"})]}),e.jsxs(s,{variant:"default",size:"sm",children:[e.jsx(A,{className:"w-4 h-4 mr-2"}),"Publish"]}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"outline",size:"sm",children:e.jsx(N,{className:"w-4 h-4"})})}),e.jsxs(d,{align:"end",children:[e.jsxs(a,{children:[e.jsx(T,{className:"w-4 h-4 mr-2"}),"Analytics"]}),e.jsx(x,{}),e.jsxs(a,{className:"text-destructive",children:[e.jsx(C,{className:"w-4 h-4 mr-2"}),"Delete"]})]})]})]})]})]})}),e.jsx("div",{className:"px-4 max-w-4xl mx-auto py-2",children:e.jsxs("nav",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Profile"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{children:"Portfolios"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"hover:text-foreground cursor-pointer",children:"Case Studies"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"text-foreground font-medium",children:"Mobile App Rede

6sign"})]})})]}),e.jsx(l,{label:"Live Project - Advanced Edit Mode with Selection"}),e.jsx("div",{className:"bg-background shadow-sm",children:e.jsx("nav",{className:"bg-background/95 backdrop-blur",children:e.jsxs("div",{className:"px-4 max-w-4xl mx-auto",children:[e.jsxs("div",{className:"flex items-center justify-between h-14",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(m,{className:"h-6 w-auto cursor-pointer"}),e.jsx(s,{variant:"ghost",size:"icon","aria-label":"Go back",children:e.jsx(u,{className:"w-4 h-4"})})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(v,{variant:"live",className:"text-sm px-3 py-1",children:"Live"}),e.jsxs(s,{variant:"ghost",size:"sm",className:"gap-2",children:[e.jsx(me,{className:"w-4 h-4 text-green-600"}),e.jsx(H,{className:"w-4 h-4"}),e.jsx("span",{className:"text-xs",children:"5/5"})]}),e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"ghost",size:"icon",className:"rounded-full","aria-label":"Account menu",children:e.jsx(n,{avatarUrl:null,firstName:"A",lastName:"D",size:"sm"})})}),e.jsx(d,{align:"end",children:e.jsx(a,{children:"Sign Out"})})]})]})]}),e.jsxs("div",{className:"flex items-center justify-between h-12 bg-primary/5 rounded-lg px-4 -mx-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-sm font-medium",children:"3 blocks selected"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(s,{size:"sm",variant:"outline",children:"Select All"}),e.jsxs(s,{size:"sm",children:[e.jsx(V,{className:"w-4 h-4 mr-2"}),"Group into Stack"]})]})]}),e.jsx(s,{size:"sm",variant:"ghost",children:e.jsx(u,{className:"w-4 h-4 rotate-45"})})]})]})})})]}),e.jsxs(o,{title:"2c. Public Project View",route:"/p/:portfolioId/:projectId, /:username/portfolio/:slug/:projectId",description:"Public project view: CreatorBrandingHeader for attribution + floating action menu. Owner sees edit/share/delete options.",children:[e.jsx(l,{label:"Viewer (non-owner) - With Commentary Toggle"}),e.jsxs("div",{className:"relative border-b",children:[e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center gap-3 text-sm",children:[e.jsx(n,{avatarUrl:null,firstName:"Alex",lastName:"Designer",size:"sm"}),e.jsx("span",{className:"hidden sm:inline font-medium hover:underline cursor-pointer",children:"Alex Designer"}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-muted-foreground hover:text-foreground cursor-pointer",children:"Case Studies"}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-foreground",children:"Mobile App Redesign"})]})})}),e.jsx("div",{className:"absolute top-4 left-1/2 -translate-x-1/2 z-10",children:e.jsxs("div",{className:"flex rounded-lg p-1 bg-secondary/80 backdrop-blur shadow-lg border",children:[e.jsxs(s,{size:"sm",variant:"ghost",className:"gap-2",children:[e.jsx(xe,{className:"w-4 h-4"}),"Free Browse"]}),e.jsxs(s,{size:"sm",variant:"ghost",className:"gap-2 bg-primary text-primary-foreground",children:[e.jsx(R,{className:"w-4 h-4"}),"Guided Tour"]})]})}),e.jsx("div",{className:"absolute top-4 right-4 z-10",children:e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"secondary",size:"icon","aria-label":"More options",children:e.jsx(N,{className:"w-4 h-4"})})}),e.jsxs(d,{align:"end",className:"w-[200px]",children:[e.jsxs(a,{children:[e.jsx(D,{className:"w-4 h-4 mr-2"}),"Start Slideshow"]}),e.jsx(x,{}),e.jsxs(a,{children:[e.jsx(E,{className:"w-4 h-4 mr-2"}),"Download Images (12)"]})]})]})}),e.jsx("div",{className:"h-24 bg-muted/20 flex items-center justify-center text-muted-foreground text-sm",children:"Project content area"})]}),e.jsx(l,{label:"Owner View - Full Action Menu"}),e.jsxs("div",{className:"relative border-b",children:[e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center gap-3 text-sm",children:[e.jsx(n,{avatarUrl:null,firstName:"Alex",lastName:"Designer",size:"sm"}),e.jsx("span",{className:"hidden sm:inline font-medium hover:underline cursor-pointer",children:"Alex Designer"}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-muted-foreground hover:text-foreground cursor-pointer",children:"Case Studies"}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-foreground",children:"Mobile App Rede

6sign"})]})})}),e.jsx("div",{className:"absolute top-4 right-4 z-10",children:e.jsxs(t,{children:[e.jsx(c,{asChild:!0,children:e.jsx(s,{variant:"secondary",size:"icon","aria-label":"More options",children:e.jsx(N,{className:"w-4 h-4"})})}),e.jsxs(d,{align:"end",className:"w-[220px]",children:[e.jsx(te,{className:"text-muted-foreground text-xs",children:"Only you"}),e.jsx(x,{}),e.jsxs(a,{children:[e.jsx(O,{className:"w-4 h-4 mr-2"}),"Edit project"]}),e.jsxs(a,{children:[e.jsx(b,{className:"w-4 h-4 mr-2"}),"Share project"]}),e.jsxs(a,{children:[e.jsx(ce,{className:"w-4 h-4 mr-2"}),"Start presenting"]}),e.jsx(x,{}),e.jsxs(a,{className:"text-destructive",children:[e.jsx(C,{className:"w-4 h-4 mr-2"}),"Delete project"]}),e.jsx(x,{}),e.jsxs(a,{children:[e.jsx(D,{className:"w-4 h-4 mr-2"}),"Start Slideshow"]}),e.jsxs(a,{children:[e.jsx(E,{className:"w-4 h-4 mr-2"}),"Download All Assets"]})]})]})}),e.jsx("div",{className:"h-24 bg-muted/20 flex items-center justify-center text-muted-foreground text-sm",children:"Project content area"})]})]}),e.jsxs(o,{title:"3. Creator Branding Header",route:"/view/:token, /:username/portfolio/:slug, /p/:id",description:"Public-facing header showing content owner's identity. Used on all shared/public view pages.",children:[e.jsx(l,{label:"Profile Link to Portfolio"}),e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur mb-0",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center gap-3 text-sm",children:[e.jsx(n,{avatarUrl:null,firstName:i.firstName,lastName:i.lastName,size:"sm"}),e.jsxs("span",{className:"hidden sm:inline font-medium hover:underline cursor-pointer",children:[i.firstName," ",i.lastName]}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-muted-foreground hover:text-foreground cursor-pointer",children:"Case Studies"}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-foreground",children:"Mobile App Redesign"})]})})}),e.jsx(l,{label:"Portfolio only (no project)"}),e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur mb-0",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center gap-3 text-sm",children:[e.jsx(n,{avatarUrl:null,firstName:i.firstName,lastName:i.lastName,size:"sm"}),e.jsxs("span",{className:"hidden sm:inline font-medium hover:underline cursor-pointer",children:[i.firstName," ",i.lastName]}),e.jsx(r,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-foreground",children:"Case Studies"})]})})}),e.jsx(l,{label:"Profile only (shared profile view)"}),e.jsx("nav",{className:"border-b bg-background/95 backdrop-blur mb-0",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center gap-3 text-sm",children:[e.jsx(n,{avatarUrl:null,firstName:i.firstName,lastName:i.lastName,size:"sm"}),e.jsxs("span",{className:"font-medium",children:[i.firstName," ",i.lastName]})]})})})]}),e.jsxs(o,{title:"4. Minimal Nav",route:"Various mixed auth/public pages",description:"Simple navigation with back button and context-aware right action.",children:[e.jsx(l,{label:"With Back Button (Authenticated User)"}),e.jsx("nav",{className:"w-full border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex items-center justify-between h-16",children:[e.jsx("div",{className:"flex items-center gap-4",children:e.jsxs(s,{variant:"ghost",size:"sm",className:"gap-2",children:[e.jsx(u,{className:"h-4 w-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Back"})]})}),e.jsx("div",{className:"flex-1 flex justify-center",children:e.jsx("span",{className:"text-xl font-bold",children:"Portfolio"})}),e.jsx("div",{className:"flex items-center gap-2",children:e.jsx(s,{variant:"default",size:"sm",children:"Dashboard"})})]})})}),e.jsx(l,{label:"With Home Button (Unauthenticated)"}),e.jsx("nav",{className:"w-full border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex items-center justify-between h-16",children:[e.jsx("div",{className:"flex items-center gap-4",children:e.jsxs(s,{variant:"ghost",size:"sm",className:"gap-2",children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Home"})]})}),e.jsx("div",{className:"flex-1 flex justify-center",children:e.jsx("span",{className:"text-xl font-bold",children:"Portfolio"})}),e.jsx("div",{className:"flex items-center gap-2",children:e.jsxs(s,{variant:"default",size:"sm",className:"gap-2",children:[e.jsx(je,{className:"h-4 w-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Sign In"})]})})]})})}),e.jsx(l,{label:"Owner Branding Mode (hideNavigation=true)"}),e.jsx("nav",{className:"w-full border-b bg-background/95 backdrop-blur",children:e.jsx("div",{className:"px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex items-center h-16 gap-3",children:[e.jsx(n,{avatarUrl:null,firstName:i.firstName,lastName:i.lastName,size:"sm"}),e.jsxs("span",{className:"font-semibold text-foreground",children:[i.firstName," ",i.lastName]}),e.jsx(r,{className:"w-4 h-4 text-muted-foreground"}),e.jsx("span",{className:"text-foreground",children:"Portfolio Name"})]})})})]}),e.jsx(o,{title:"5. In-Page Tab Navigation",route:"/profile/*",description:"Secondary navigation within page content for switching between sections.",children:e.jsx("div",{className:"p-4",children:e.jsx("nav",{className:"flex gap-1 p-1 bg-muted rounded-lg w-fit",children:[{icon:g,label:"General Info",active:!0},{icon:f,label:"Social Links",active:!1},{icon:de,label:"Resumes",active:!1},{icon:he,label:"Portfolios",active:!1},{icon:F,label:"Settings",active:!1}].map(({icon:q,label:M,active:W})=>e.jsxs("button",{className:oe("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all",W?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"),children:[e.jsx(q,{className:"h-4 w-4 sm:mr-2"}),e.jsx("span",{className:"hidden sm:inline",children:M})]},M))})})}),e.jsx(o,{title:"6. Breadcrumbs Component",route:"Used within other navs",description:"Inline breadcrumb component used within action bars and headers.",children:e.jsxs("div",{className:"p-4 space-y-4",children:[e.jsx(l,{label:"Standard (Profile > Portfolios > Item)"}),e.jsxs("nav",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx("span",{className:"hidden sm:inline",children:"Profile"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"hover:text-foreground cursor-pointer",children:"Portfolios"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"text-foreground font-medium truncate max-w-[150px] sm:max-w-none",children:"Brand Identity Project"})]}),e.jsx(l,{label:"Deep Nesting (Portfolio > Project)"}),e.jsxs("nav",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"hover:text-foreground cursor-pointer",children:"Portfolios"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"hover:text-foreground cursor-pointer",children:"Case Studies"}),e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{className:"text-foreground font-medium",children:"Mobile App Rede

6sign"})]})]})}),e.jsxs("div",{className:"bg-muted/30 border rounded-lg p-6",children:[e.jsx("h2",{className:"text-xl font-semibold mb-4",children:"Component Files"}),e.jsxs("div",{className:"grid gap-2 text-sm font-mono",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/components/Navigation.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Primary authenticated nav"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/components/PortfolioActionBar.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Two-tier portfolio nav"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/pages/ProjectDetail.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Project editor nav (inline)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/pages/PublicProjectDetail.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Public project view nav (inline)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/components/MinimalNav.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Simple nav with variants"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/components/CreatorBrandingHeader.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Public view branding"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/components/Breadcrumbs.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- Inline breadcrumbs"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"bg-muted px-2 py-1 rounded",children:"src/pages/Profile.tsx"}),e.jsx("span",{className:"text-muted-foreground",children:"- In-page tab nav (inline)"})]})]})]})]})})]})}export{Se as default};