Skip to content

Commit 4ecedaf

Browse files
author
Tony Lea
committed
cleaning up some code and changing the user sidebar nav to be dropdown on mobile
1 parent c7aa349 commit 4ecedaf

File tree

16 files changed

+302
-12
lines changed

16 files changed

+302
-12
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@radix-ui/react-dialog": "^1.1.4",
2727
"@radix-ui/react-dropdown-menu": "^2.1.3",
2828
"@radix-ui/react-label": "^2.1.1",
29+
"@radix-ui/react-select": "^2.1.4",
2930
"@radix-ui/react-separator": "^1.1.1",
3031
"@radix-ui/react-slot": "^1.1.1",
3132
"@radix-ui/react-tooltip": "^1.1.5",

‎resources/js/Components/AppSidebar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const data = {
8484

8585
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
8686
return (
87+
// Sidebar variant can be "sidebar", "floating" or "inset"
8788
<Sidebar variant="inset" {...props}>
8889
<SidebarHeader>
8990
<SidebarMenu>

‎resources/js/Components/ui/select.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import * as React from "react"
2+
import * as SelectPrimitive from "@radix-ui/react-select"
3+
import { Check, ChevronDown, ChevronUp } from "lucide-react"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const Select = SelectPrimitive.Root
8+
9+
const SelectGroup = SelectPrimitive.Group
10+
11+
const SelectValue = SelectPrimitive.Value
12+
13+
const SelectTrigger = React.forwardRef<
14+
React.ElementRef<typeof SelectPrimitive.Trigger>,
15+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
16+
>(({ className, children, ...props }, ref) => (
17+
<SelectPrimitive.Trigger
18+
ref={ref}
19+
className={cn(
20+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
21+
className
22+
)}
23+
{...props}
24+
>
25+
{children}
26+
<SelectPrimitive.Icon asChild>
27+
<ChevronDown className="h-4 w-4 opacity-50" />
28+
</SelectPrimitive.Icon>
29+
</SelectPrimitive.Trigger>
30+
))
31+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
32+
33+
const SelectScrollUpButton = React.forwardRef<
34+
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
35+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
36+
>(({ className, ...props }, ref) => (
37+
<SelectPrimitive.ScrollUpButton
38+
ref={ref}
39+
className={cn(
40+
"flex cursor-default items-center justify-center py-1",
41+
className
42+
)}
43+
{...props}
44+
>
45+
<ChevronUp className="h-4 w-4" />
46+
</SelectPrimitive.ScrollUpButton>
47+
))
48+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
49+
50+
const SelectScrollDownButton = React.forwardRef<
51+
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
52+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
53+
>(({ className, ...props }, ref) => (
54+
<SelectPrimitive.ScrollDownButton
55+
ref={ref}
56+
className={cn(
57+
"flex cursor-default items-center justify-center py-1",
58+
className
59+
)}
60+
{...props}
61+
>
62+
<ChevronDown className="h-4 w-4" />
63+
</SelectPrimitive.ScrollDownButton>
64+
))
65+
SelectScrollDownButton.displayName =
66+
SelectPrimitive.ScrollDownButton.displayName
67+
68+
const SelectContent = React.forwardRef<
69+
React.ElementRef<typeof SelectPrimitive.Content>,
70+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
71+
>(({ className, children, position = "popper", ...props }, ref) => (
72+
<SelectPrimitive.Portal>
73+
<SelectPrimitive.Content
74+
ref={ref}
75+
className={cn(
76+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
77+
position === "popper" &&
78+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
79+
className
80+
)}
81+
position={position}
82+
{...props}
83+
>
84+
<SelectScrollUpButton />
85+
<SelectPrimitive.Viewport
86+
className={cn(
87+
"p-1",
88+
position === "popper" &&
89+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
90+
)}
91+
>
92+
{children}
93+
</SelectPrimitive.Viewport>
94+
<SelectScrollDownButton />
95+
</SelectPrimitive.Content>
96+
</SelectPrimitive.Portal>
97+
))
98+
SelectContent.displayName = SelectPrimitive.Content.displayName
99+
100+
const SelectLabel = React.forwardRef<
101+
React.ElementRef<typeof SelectPrimitive.Label>,
102+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
103+
>(({ className, ...props }, ref) => (
104+
<SelectPrimitive.Label
105+
ref={ref}
106+
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
107+
{...props}
108+
/>
109+
))
110+
SelectLabel.displayName = SelectPrimitive.Label.displayName
111+
112+
const SelectItem = React.forwardRef<
113+
React.ElementRef<typeof SelectPrimitive.Item>,
114+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
115+
>(({ className, children, ...props }, ref) => (
116+
<SelectPrimitive.Item
117+
ref={ref}
118+
className={cn(
119+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120+
className
121+
)}
122+
{...props}
123+
>
124+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
125+
<SelectPrimitive.ItemIndicator>
126+
<Check className="h-4 w-4" />
127+
</SelectPrimitive.ItemIndicator>
128+
</span>
129+
130+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
131+
</SelectPrimitive.Item>
132+
))
133+
SelectItem.displayName = SelectPrimitive.Item.displayName
134+
135+
const SelectSeparator = React.forwardRef<
136+
React.ElementRef<typeof SelectPrimitive.Separator>,
137+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
138+
>(({ className, ...props }, ref) => (
139+
<SelectPrimitive.Separator
140+
ref={ref}
141+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
142+
{...props}
143+
/>
144+
))
145+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
146+
147+
export {
148+
Select,
149+
SelectGroup,
150+
SelectValue,
151+
SelectTrigger,
152+
SelectContent,
153+
SelectLabel,
154+
SelectItem,
155+
SelectSeparator,
156+
SelectScrollUpButton,
157+
SelectScrollDownButton,
158+
}

‎resources/js/Layouts/AppLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function App({
5555
)}
5656
</BreadcrumbItem>
5757
{!isLast && (
58-
<BreadcrumbSeparator className="hidden md:block" />
58+
<BreadcrumbSeparator />
5959
)}
6060
</Fragment>
6161
);

‎resources/js/Layouts/AuthLayout.tsx‎ renamed to ‎resources/js/Layouts/Auth/AuthBase.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import AuthLayoutTemplate from "@/Layouts/AuthSimpleLayout";
1+
import AuthLayoutTemplate from "@/Layouts/Auth/AuthSimpleLayout";
22

33
export default function AuthLayout({
44
children,

‎resources/js/Layouts/AuthCardLayout.tsx‎ renamed to ‎resources/js/Layouts/Auth/AuthCardLayout.tsx‎

File renamed without changes.

‎resources/js/Layouts/AuthSimpleLayout.tsx‎ renamed to ‎resources/js/Layouts/Auth/AuthSimpleLayout.tsx‎

File renamed without changes.

‎resources/js/Layouts/AuthSplitLayout.tsx‎ renamed to ‎resources/js/Layouts/Auth/AuthSplitLayout.tsx‎

File renamed without changes.

‎resources/js/Pages/Auth/ConfirmPassword.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// Components
22
import InputError from "@/Components/InputError";
3-
import AuthLayout from "@/Layouts/AuthLayout";
3+
import AuthLayout from "@/Layouts/Auth/AuthBase";
44
import { Button } from "@/components/ui/button";
55
import { Input } from "@/components/ui/input";
6-
import { Label } from "@/components/ui/label";
6+
7+
import { LoaderCircle } from "lucide-react";
78

89
import { Head, useForm } from '@inertiajs/react';
910
import { FormEventHandler } from 'react';
@@ -46,6 +47,7 @@ export default function ConfirmPassword() {
4647

4748
<div className="flex items-center">
4849
<Button className="w-full" disabled={processing}>
50+
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
4951
Confirm Password
5052
</Button>
5153
</div>

0 commit comments

Comments
 (0)