diff --git a/resources/js/components/layout/page-layout.tsx b/resources/js/components/layout/page-layout.tsx index 57f35c0..90e0cda 100644 --- a/resources/js/components/layout/page-layout.tsx +++ b/resources/js/components/layout/page-layout.tsx @@ -1,23 +1,24 @@ -import { usePage } from '@inertiajs/react' +import { Head, usePage } from '@inertiajs/react' import { type PropsWithChildren } from 'react' import { type SharedProps, type BreadcrumbItem as BreadcrumbItemType } from '@/types' - -import { AppContent } from '../common/app-content' -import { AppSidebar } from '../navigation/app-sidebar' -import { AppSidebarHeader } from '../navigation/app-sidebar-header' import { SidebarProvider } from '../ui/sidebar' +import { AppSidebar } from '../sidebar/app-sidebar' +import { AppSidebarHeader } from '../sidebar/app-sidebar-header' +import { AppContent } from '../common/app-content' export const PageLayout = ({ children, + pageTitle, breadcrumbs = [], -}: PropsWithChildren & { breadcrumbs?: BreadcrumbItemType[] }) => { +}: PropsWithChildren & { pageTitle: string; breadcrumbs?: BreadcrumbItemType[] }) => { const isOpen = usePage().props.sidebarOpen return ( - + + {children} diff --git a/resources/js/components/navigation/nav-projects.tsx b/resources/js/components/navigation/nav-projects.tsx deleted file mode 100644 index d21c4f7..0000000 --- a/resources/js/components/navigation/nav-projects.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Folder, Forward, MoreHorizontal, Trash2, type LucideIcon } from 'lucide-react' - -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu' -import { - SidebarGroup, - SidebarGroupLabel, - SidebarMenu, - SidebarMenuAction, - SidebarMenuButton, - SidebarMenuItem, - useSidebar, -} from '@/components/ui/sidebar' - -export function NavProjects({ - projects, -}: { - projects: { - name: string - url: string - icon: LucideIcon - }[] -}) { - const { isMobile } = useSidebar() - - return ( - - Projects - - {projects.map((item) => ( - - - - - {item.name} - - - - - - - More - - - - - - View Project - - - - Share Project - - - - - Delete Project - - - - - ))} - - - - More - - - - - ) -} diff --git a/resources/js/components/navigation/app-sidebar-header.tsx b/resources/js/components/sidebar/app-sidebar-header.tsx similarity index 100% rename from resources/js/components/navigation/app-sidebar-header.tsx rename to resources/js/components/sidebar/app-sidebar-header.tsx diff --git a/resources/js/components/navigation/app-sidebar.tsx b/resources/js/components/sidebar/app-sidebar.tsx similarity index 51% rename from resources/js/components/navigation/app-sidebar.tsx rename to resources/js/components/sidebar/app-sidebar.tsx index 8f0e7b7..be84b12 100644 --- a/resources/js/components/navigation/app-sidebar.tsx +++ b/resources/js/components/sidebar/app-sidebar.tsx @@ -1,22 +1,25 @@ -import { BookOpenIcon, GithubIcon, Settings2Icon, SquareTerminal } from 'lucide-react' import * as React from 'react' +import { + BookOpenIcon, + GithubIcon, + LifeBuoy, + SendIcon, + Settings2Icon, + SquareTerminal, +} from 'lucide-react' import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, SidebarRail, } from '@/components/ui/sidebar' -import { type NavItem } from '@/types' -import { Link } from '@inertiajs/react' -import { AppLogo } from '../common/app-logo' +import { TeamSwitcher } from './team-switcher' import { NavMain } from './nav-main' import { NavSecondary } from './nav-secondary' import { NavUser } from './nav-user' +import { type NavItem } from '@/types' // This is sample data. const mainNavItems: NavItem[] = [ @@ -24,61 +27,56 @@ const mainNavItems: NavItem[] = [ title: 'Dashboard', href: '/dashboard', // needs to match path.url for it to be active based on the page you are on icon: SquareTerminal, + type: 'internal', }, { title: 'Settings', href: '/settings', icon: Settings2Icon, + type: 'internal', }, -] - -const secondaryNavItems: NavItem[] = [ { title: 'Documentation', href: 'https://wsameer.github.io/adonisjs-react-starter-kit/intro.html', icon: BookOpenIcon, + type: 'external', }, { title: 'Repository', - href: 'https://wsameer.github.io/adonisjs-react-starter-kit/', + href: 'https://github.com/wsameer/adonisjs-react-starter-kit', icon: GithubIcon, + type: 'external', + }, +] + +const secondaryNavItems: NavItem[] = [ + { + title: 'Support', + href: 'https://github.com/wsameer/adonisjs-react-starter-kit/issues/new', + icon: LifeBuoy, + type: 'external', + }, + { + title: 'Feedback', + href: 'mailto:someone@example.com', + icon: SendIcon, + type: 'external', }, ] export function AppSidebar({ ...props }: React.ComponentProps) { return ( - + - - - - -
- -
-
- App name - Enterprise -
- - - - + - - - ) diff --git a/resources/js/components/navigation/nav-main.tsx b/resources/js/components/sidebar/nav-main.tsx similarity index 54% rename from resources/js/components/navigation/nav-main.tsx rename to resources/js/components/sidebar/nav-main.tsx index 948064b..64bce9b 100644 --- a/resources/js/components/navigation/nav-main.tsx +++ b/resources/js/components/sidebar/nav-main.tsx @@ -7,11 +7,12 @@ import { } from '@/components/ui/sidebar' import { type SharedProps, type NavItem } from '@/types' import { Link, usePage } from '@inertiajs/react' +import { Icon } from '../common/icon' -export function NavMain({ items = [] }: { items: NavItem[] }) { +export function NavMain({ items }: { items: NavItem[] }) { const page = usePage() return ( - + Platform {items.map((item) => ( @@ -21,10 +22,17 @@ export function NavMain({ items = [] }: { items: NavItem[] }) { isActive={page.url.startsWith(item.href)} tooltip={{ children: item.title }} > - - {item.icon && } - {item.title} - + {item.type === 'internal' ? ( + + {item.icon && } + {item.title} + + ) : ( + + {item.icon && } + {item.title} + + )} ))} diff --git a/resources/js/components/navigation/nav-secondary.tsx b/resources/js/components/sidebar/nav-secondary.tsx similarity index 96% rename from resources/js/components/navigation/nav-secondary.tsx rename to resources/js/components/sidebar/nav-secondary.tsx index 60c4a88..bccc64b 100644 --- a/resources/js/components/navigation/nav-secondary.tsx +++ b/resources/js/components/sidebar/nav-secondary.tsx @@ -1,5 +1,3 @@ -import * as React from 'react' - import { SidebarGroup, SidebarGroupContent, diff --git a/resources/js/components/navigation/nav-user.tsx b/resources/js/components/sidebar/nav-user.tsx similarity index 100% rename from resources/js/components/navigation/nav-user.tsx rename to resources/js/components/sidebar/nav-user.tsx diff --git a/resources/js/components/sidebar/team-switcher.tsx b/resources/js/components/sidebar/team-switcher.tsx new file mode 100644 index 0000000..fb42e13 --- /dev/null +++ b/resources/js/components/sidebar/team-switcher.tsx @@ -0,0 +1,28 @@ +import { GalleryVerticalEnd } from 'lucide-react' + +import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar' +import { Link } from '@inertiajs/react' + +export function TeamSwitcher() { + return ( + + + + +
+ +
+
+ App Name + Enterprise +
+ + + + + ) +} diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx index 4a676bc..c0e54d9 100644 --- a/resources/js/components/ui/dialog.tsx +++ b/resources/js/components/ui/dialog.tsx @@ -1,5 +1,3 @@ -'use client' - import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import { XIcon } from 'lucide-react' diff --git a/resources/js/components/ui/label.tsx b/resources/js/components/ui/label.tsx index 0f0939b..d7b4512 100644 --- a/resources/js/components/ui/label.tsx +++ b/resources/js/components/ui/label.tsx @@ -1,5 +1,3 @@ -'use client' - import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' diff --git a/resources/js/components/ui/toggle.tsx b/resources/js/components/ui/toggle.tsx index 973d7be..a41018c 100644 --- a/resources/js/components/ui/toggle.tsx +++ b/resources/js/components/ui/toggle.tsx @@ -1,5 +1,3 @@ -'use client' - import * as React from 'react' import * as TogglePrimitive from '@radix-ui/react-toggle' import { cva, type VariantProps } from 'class-variance-authority' diff --git a/resources/js/components/ui/tooltip.tsx b/resources/js/components/ui/tooltip.tsx index faffc58..d051219 100644 --- a/resources/js/components/ui/tooltip.tsx +++ b/resources/js/components/ui/tooltip.tsx @@ -1,5 +1,3 @@ -'use client' - import * as React from 'react' import * as TooltipPrimitive from '@radix-ui/react-tooltip' diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx index 33926eb..80e82a3 100644 --- a/resources/js/pages/dashboard.tsx +++ b/resources/js/pages/dashboard.tsx @@ -1,8 +1,5 @@ -import { LOGIN_ROUTE } from '@/app/routes' import { PageLayout } from '@/components/layout/page-layout' import { type BreadcrumbItem } from '@/types' -import { type PageProps } from '@adonisjs/inertia/types' -import { Head, router } from '@inertiajs/react' const breadcrumbs: BreadcrumbItem[] = [ { id: 1, title: 'Building Your Application', href: '#' }, @@ -13,14 +10,9 @@ const breadcrumbs: BreadcrumbItem[] = [ }, ] -const Dashboard = ({ auth }: PageProps) => { - if (!auth) { - router.push({ url: LOGIN_ROUTE }) - } - +export default function Dashboard() { return ( - - +
@@ -32,5 +24,3 @@ const Dashboard = ({ auth }: PageProps) => { ) } - -export default Dashboard diff --git a/resources/js/pages/settings.tsx b/resources/js/pages/settings.tsx index b3c1157..3e5765c 100644 --- a/resources/js/pages/settings.tsx +++ b/resources/js/pages/settings.tsx @@ -1,7 +1,7 @@ import { LOGIN_ROUTE } from '@/app/routes' import { PageLayout } from '@/components/layout/page-layout' import { type BreadcrumbItem, type PageProps } from '@/types' -import { Head, router } from '@inertiajs/react' +import { router } from '@inertiajs/react' const breadcrumbs: BreadcrumbItem[] = [ { id: 1, title: 'Building Your Application', href: '#' }, @@ -18,8 +18,7 @@ export const Settings = ({ auth }: PageProps) => { } return ( - - +
Settings
 ) diff --git a/resources/js/pages/settings/profile-settings.tsx b/resources/js/pages/settings/profile-settings.tsx new file mode 100644 index 0000000..e69de29 diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts index 935d444..45dd085 100644 --- a/resources/js/types/index.d.ts +++ b/resources/js/types/index.d.ts @@ -18,5 +18,6 @@ export interface NavItem { title: string href: string icon?: LucideIcon | null + type: 'internal' | 'external' isActive?: boolean } diff --git a/start/routes.ts b/start/routes.ts index 5ae78cf..299d0c9 100644 --- a/start/routes.ts +++ b/start/routes.ts @@ -30,8 +30,8 @@ router .as('auth-routes') .prefix('api/auth') -router.on('/dashboard').renderInertia('dashboard').use(middleware.auth()).as('dashboard') router.on('/settings').renderInertia('settings').use(middleware.auth()).as('settings') +router.on('/dashboard').renderInertia('dashboard').use(middleware.auth()).as('dashboard') router .group(() => {