Skip to content

Commit 242cc85

Browse files
lorenzocorallolorenzocorallo
committed
style: fix sidebar inset and scrollbar
1 parent a045855 commit 242cc85

File tree

6 files changed

+151
-8
lines changed

6 files changed

+151
-8
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"sonner": "^2.0.3",
5454
"superjson": "^2.2.1",
5555
"tailwind-merge": "^3.0.1",
56+
"tailwind-scrollbar": "^4.0.2",
5657
"tailwindcss-animate": "^1.0.7",
5758
"zod": "^3.23.3"
5859
},

‎pnpm-lock.yaml‎

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

‎src/app/dashboard/(active)/page.tsx‎

Lines changed: 108 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default async function AdminHome() {
66
const session = await getServerSession();
77
return (
88
session && (
9-
<main className="container mx-auto px-4 py-8">
9+
<div className="container mx-auto px-4 py-8">
1010
<h2 className="mb-4 text-3xl font-bold text-accent-foreground">Home</h2>
1111

1212
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
@@ -41,7 +41,113 @@ export default async function AdminHome() {
4141
</Card>
4242
</Link>
4343
</div>
44-
</main>
44+
45+
46+
<Card className="transition-colors hover:bg-accent">
47+
<CardHeader>
48+
<CardTitle>Website Data</CardTitle>
49+
</CardHeader>
50+
<CardContent>
51+
<p>Manage content of our website pages.</p>
52+
</CardContent>
53+
</Card>
54+
<Card className="transition-colors hover:bg-accent">
55+
<CardHeader>
56+
<CardTitle>Website Data</CardTitle>
57+
</CardHeader>
58+
<CardContent>
59+
<p>Manage content of our website pages.</p>
60+
</CardContent>
61+
</Card>
62+
<Card className="transition-colors hover:bg-accent">
63+
<CardHeader>
64+
<CardTitle>Website Data</CardTitle>
65+
</CardHeader>
66+
<CardContent>
67+
<p>Manage content of our website pages.</p>
68+
</CardContent>
69+
</Card>
70+
<Card className="transition-colors hover:bg-accent">
71+
<CardHeader>
72+
<CardTitle>Website Data</CardTitle>
73+
</CardHeader>
74+
<CardContent>
75+
<p>Manage content of our website pages.</p>
76+
</CardContent>
77+
</Card>
78+
<Card className="transition-colors hover:bg-accent">
79+
<CardHeader>
80+
<CardTitle>Website Data</CardTitle>
81+
</CardHeader>
82+
<CardContent>
83+
<p>Manage content of our website pages.</p>
84+
</CardContent>
85+
</Card>
86+
<Card className="transition-colors hover:bg-accent">
87+
<CardHeader>
88+
<CardTitle>Website Data</CardTitle>
89+
</CardHeader>
90+
<CardContent>
91+
<p>Manage content of our website pages.</p>
92+
</CardContent>
93+
</Card>
94+
<Card className="transition-colors hover:bg-accent">
95+
<CardHeader>
96+
<CardTitle>Website Data</CardTitle>
97+
</CardHeader>
98+
<CardContent>
99+
<p>Manage content of our website pages.</p>
100+
</CardContent>
101+
</Card>
102+
<Card className="transition-colors hover:bg-accent">
103+
<CardHeader>
104+
<CardTitle>Website Data</CardTitle>
105+
</CardHeader>
106+
<CardContent>
107+
<p>Manage content of our website pages.</p>
108+
</CardContent>
109+
</Card>
110+
<Card className="transition-colors hover:bg-accent">
111+
<CardHeader>
112+
<CardTitle>Website Data</CardTitle>
113+
</CardHeader>
114+
<CardContent>
115+
<p>Manage content of our website pages.</p>
116+
</CardContent>
117+
</Card>
118+
<Card className="transition-colors hover:bg-accent">
119+
<CardHeader>
120+
<CardTitle>Website Data</CardTitle>
121+
</CardHeader>
122+
<CardContent>
123+
<p>Manage content of our website pages.</p>
124+
</CardContent>
125+
</Card>
126+
<Card className="transition-colors hover:bg-accent">
127+
<CardHeader>
128+
<CardTitle>Website Data</CardTitle>
129+
</CardHeader>
130+
<CardContent>
131+
<p>Manage content of our website pages.</p>
132+
</CardContent>
133+
</Card>
134+
<Card className="transition-colors hover:bg-accent">
135+
<CardHeader>
136+
<CardTitle>Website Data</CardTitle>
137+
</CardHeader>
138+
<CardContent>
139+
<p>Manage content of our website pages.</p>
140+
</CardContent>
141+
</Card>
142+
<Card className="transition-colors hover:bg-accent">
143+
<CardHeader>
144+
<CardTitle>Website Data</CardTitle>
145+
</CardHeader>
146+
<CardContent>
147+
<p>Manage content of our website pages.</p>
148+
</CardContent>
149+
</Card>
150+
</div>
45151
)
46152
);
47153
}

‎src/app/layout.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export default function RootLayout({
2828
className={`${GeistSans.variable}`}
2929
>
3030
<body
31-
className="overflow-y-scroll"
3231
style={
3332
{
3433
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -44,7 +43,7 @@ export default function RootLayout({
4443
disableTransitionOnChange
4544
>
4645
<TRPCReactProvider>
47-
<div className="flex min-h-screen w-full flex-col items-center justify-start">
46+
<div className="flex h-screen overflow-y-hidden w-full flex-col items-center justify-start">
4847
<Header />
4948
<SidebarProvider>{children}</SidebarProvider>
5049
</div>

‎src/components/ui/sidebar.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const SidebarProvider = React.forwardRef<
149149
} as React.CSSProperties
150150
}
151151
className={cn(
152-
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full flex-1",
152+
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full flex-1 overflow-y-hidden",
153153
className,
154154
)}
155155
ref={ref}
@@ -330,8 +330,9 @@ const SidebarInset = React.forwardRef<
330330
<main
331331
ref={ref}
332332
className={cn(
333-
"relative flex min-h-svh flex-1 flex-col bg-background",
334-
"peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
333+
"relative flex flex-1 flex-col bg-background md-2 overflow-y-auto",
334+
"scrollbar scrollbar-w-2 scrollbar-track-card scrollbar-thumb-white/20",
335+
"md:peer-data-[variant=inset]:mt-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-tl-xl md:peer-data-[variant=inset]:shadow-sm",
335336
className,
336337
)}
337338
{...props}

‎src/index.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
@import 'tailwindcss';
1+
@import "tailwindcss";
22

33
@plugin 'tailwindcss-animate';
4+
@plugin 'tailwind-scrollbar' {
5+
preferredstrategy: "pseudoelements";
6+
nocompatible: true;
7+
}
48

59
@custom-variant dark (&:is(.dark *));
610

0 commit comments

Comments
 (0)