Skip to content

Commit 5aced91

Browse files
adamwhpadamwhp
committed
Refactor sidebar
1 parent be95692 commit 5aced91

23 files changed

+1169
-214
lines changed

‎package-lock.json

Lines changed: 61 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,16 @@
4242
"@hookform/resolvers": "^3.9.1",
4343
"@radix-ui/react-avatar": "^1.1.1",
4444
"@radix-ui/react-checkbox": "^1.1.2",
45-
"@radix-ui/react-dialog": "^1.1.2",
45+
"@radix-ui/react-dialog": "^1.1.3",
4646
"@radix-ui/react-dropdown-menu": "^2.1.2",
4747
"@radix-ui/react-label": "^2.1.0",
4848
"@radix-ui/react-scroll-area": "^1.2.1",
4949
"@radix-ui/react-select": "^2.1.2",
50-
"@radix-ui/react-slot": "^1.1.0",
50+
"@radix-ui/react-separator": "^1.1.1",
51+
"@radix-ui/react-slot": "^1.1.1",
5152
"@radix-ui/react-switch": "^1.1.1",
5253
"@radix-ui/react-toast": "^1.2.2",
54+
"@radix-ui/react-tooltip": "^1.1.5",
5355
"@reactuses/core": "^5.0.23",
5456
"class-variance-authority": "^0.7.1",
5557
"clsx": "^2.1.1",

‎resources/css/app.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,15 @@
4646
--chart-3: 197 37% 24%;
4747
--chart-4: 43 74% 66%;
4848
--chart-5: 27 87% 67%;
49+
50+
--sidebar-background: 0 0% 98%;
51+
--sidebar-foreground: 240 5.3% 26.1%;
52+
--sidebar-primary: 240 5.9% 10%;
53+
--sidebar-primary-foreground: 0 0% 98%;
54+
--sidebar-accent: 240 4.8% 95.9%;
55+
--sidebar-accent-foreground: 240 5.9% 10%;
56+
--sidebar-border: 220 13% 91%;
57+
--sidebar-ring: 217.2 91.2% 59.8%;
4958
}
5059

5160
.dark {
@@ -87,6 +96,15 @@
8796
--chart-3: 30 80% 55%;
8897
--chart-4: 280 65% 60%;
8998
--chart-5: 340 75% 55%;
99+
100+
--sidebar-background: 240 4.9% 12%;
101+
--sidebar-foreground: 240 4.8% 95.9%;
102+
--sidebar-primary: 224.3 76.3% 48%;
103+
--sidebar-primary-foreground: 0 0% 100%;
104+
--sidebar-accent: 240 3.7% 15.9%;
105+
--sidebar-accent-foreground: 240 4.8% 95.9%;
106+
--sidebar-border: 240 3.7% 15.9%;
107+
--sidebar-ring: 217.2 91.2% 59.8%;
90108
}
91109
}
92110

‎resources/js/Components/AccountDropdownMenu.tsx

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎resources/js/Components/PrimaryFooter.tsx renamed to ‎resources/js/Components/AppFooter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Text } from '@/Components/Text'
33
import dayjs from 'dayjs'
44
import { useLaravelReactI18n } from 'laravel-react-i18n'
55

6-
export function PrimaryFooter() {
6+
export function AppFooter() {
77
const { t } = useLaravelReactI18n()
88

99
const socials = [

‎resources/js/Components/AppSidebar.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Logo } from '@/Components/Logo'
2+
import {
3+
Sidebar,
4+
SidebarContent,
5+
SidebarFooter,
6+
SidebarGroup,
7+
SidebarGroupContent,
8+
SidebarHeader,
9+
SidebarMenu,
10+
SidebarMenuButton,
11+
SidebarMenuItem,
12+
} from '@/Components/UI/Sidebar'
13+
import { UserAvatar, UserDetails, UserDropdown } from '@/Components/UserDropdown'
14+
import { Link } from '@inertiajs/react'
15+
import { useLaravelReactI18n } from 'laravel-react-i18n'
16+
import { ChevronsUpDown, Home } from 'lucide-react'
17+
18+
export function AppSidebar() {
19+
const { t } = useLaravelReactI18n()
20+
21+
const primaryNavItems = [
22+
{
23+
label: t('navigation.home'),
24+
href: route('home'),
25+
isActive: route().current('home*'),
26+
icon: Home,
27+
},
28+
]
29+
30+
return (
31+
<Sidebar>
32+
<SidebarHeader>
33+
<SidebarMenu>
34+
<SidebarMenuItem>
35+
<Link href={route('home')} className="block p-2" prefetch>
36+
<Logo className="h-6 w-auto" />
37+
</Link>
38+
</SidebarMenuItem>
39+
</SidebarMenu>
40+
</SidebarHeader>
41+
42+
<SidebarContent>
43+
<SidebarGroup>
44+
<SidebarGroupContent>
45+
<SidebarMenu>
46+
{primaryNavItems.map((item) => (
47+
<SidebarMenuItem key={item.label}>
48+
<SidebarMenuButton asChild isActive={item.isActive}>
49+
<Link prefetch href={item.href}>
50+
<item.icon />
51+
<span>{item.label}</span>
52+
</Link>
53+
</SidebarMenuButton>
54+
</SidebarMenuItem>
55+
))}
56+
</SidebarMenu>
57+
</SidebarGroupContent>
58+
</SidebarGroup>
59+
</SidebarContent>
60+
61+
<SidebarFooter>
62+
<SidebarMenu>
63+
<SidebarMenuItem>
64+
<UserDropdown
65+
trigger={
66+
<SidebarMenuButton
67+
size="lg"
68+
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
69+
>
70+
<UserAvatar />
71+
<UserDetails />
72+
<ChevronsUpDown className="ml-auto size-4" />
73+
</SidebarMenuButton>
74+
}
75+
/>
76+
</SidebarMenuItem>
77+
</SidebarMenu>
78+
</SidebarFooter>
79+
</Sidebar>
80+
)
81+
}

‎resources/js/Components/AppLogo.tsx renamed to ‎resources/js/Components/Logo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export function AppLogo({ className }: { className?: string }) {
1+
export function Logo({ className }: { className?: string }) {
22
return (
33
<svg fill="none" viewBox="0 0 140 30" xmlns="http://www.w3.org/2000/svg" className={className}>
44
<path

‎resources/js/Components/MobileHeader.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Logo } from '@/Components/Logo'
2+
import { Button } from '@/Components/UI/Button'
3+
import { SidebarTrigger, useSidebar } from '@/Components/UI/Sidebar'
4+
import { UserAvatar, UserDropdown } from '@/Components/UserDropdown'
5+
import { Link } from '@inertiajs/react'
6+
7+
export function MobileHeader() {
8+
const { isMobile } = useSidebar()
9+
10+
return isMobile ? (
11+
<header>
12+
<div className="flex h-14 w-full items-center justify-between px-4 sm:px-6">
13+
<SidebarTrigger />
14+
15+
<Link href={route('home')}>
16+
<Logo className="h-6 w-auto" />
17+
</Link>
18+
19+
<UserDropdown
20+
trigger={
21+
<Button className="hover:bg-inherit" size="icon" variant="ghost">
22+
<UserAvatar />
23+
</Button>
24+
}
25+
/>
26+
</div>
27+
</header>
28+
) : null
29+
}

‎resources/js/Components/MobileNavigation.jsx

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎resources/js/Components/PageBreadcrumbs.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ export function PageBreadcrumbs({ items }: PageBreadcrumbsProps) {
4444
<BreadcrumbPage>{item.label}</BreadcrumbPage>
4545
) : item.href ? (
4646
<BreadcrumbLink asChild>
47-
<Link href={item.href}>{item.label}</Link>
47+
<Link prefetch href={item.href}>
48+
{item.label}
49+
</Link>
4850
</BreadcrumbLink>
4951
) : (
5052
item.label

0 commit comments

Comments
 (0)