Skip to content

Commit 54344ac

Browse files
vinothkannansvinothkannans
committed
feat: add application name constant for authFire
and minor ui changes in sidebar
1 parent f1cabf4 commit 54344ac

6 files changed

Lines changed: 71 additions & 22 deletions

File tree

‎app/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Logomark from "@/components/logomark";
2+
13
export default function Page() {
2-
return <h1>Hello, Next.js!</h1>
4+
return <h1><Logomark /></h1>
35
}

‎components/app-sidebar.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ import {
2626
SidebarMenuItem,
2727
SidebarRail,
2828
} from "@/components/ui/sidebar"
29+
import { appName } from "@/lib/const"
30+
import Logomark from "./logomark"
2931

30-
// This is sample data.
3132
const data = {
3233
user: {
3334
name: "shadcn",
@@ -148,11 +149,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
148149
<SidebarMenuItem>
149150
<SidebarMenuButton
150151
asChild
151-
className="data-[slot=sidebar-menu-button]:!p-1.5"
152+
size="lg"
153+
className="data-[slot=sidebar-menu-button]:!p-1.5 h-11 [&>svg]:size-8"
152154
>
153155
<a href="#">
154-
#
155-
<span className="text-base font-semibold">Acme Inc.</span>
156+
<Logomark />
157+
<span className="text-2xl font-semibold">{appName}</span>
156158
</a>
157159
</SidebarMenuButton>
158160
</SidebarMenuItem>

‎components/logomark.tsx‎

Lines changed: 43 additions & 0 deletions
Large diffs are not rendered by default.

‎components/nav-user.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ export function NavUser({
5050
size="lg"
5151
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
5252
>
53-
<Avatar className="h-8 w-8 rounded-lg">
53+
<Avatar className="h-10 w-10 rounded-lg">
5454
<AvatarImage src={user.avatar} alt={user.name} />
5555
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
5656
</Avatar>
57-
<div className="grid flex-1 text-left text-sm leading-tight">
57+
<div className="grid flex-1 text-left text-base leading-tight">
5858
<span className="truncate font-medium">{user.name}</span>
59-
<span className="truncate text-xs">{user.email}</span>
59+
<span className="truncate text-sm">{user.email}</span>
6060
</div>
6161
<ChevronsUpDown className="ml-auto size-4" />
6262
</SidebarMenuButton>
@@ -68,14 +68,14 @@ export function NavUser({
6868
sideOffset={4}
6969
>
7070
<DropdownMenuLabel className="p-0 font-normal">
71-
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
72-
<Avatar className="h-8 w-8 rounded-lg">
71+
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-base">
72+
<Avatar className="h-10 w-10 rounded-lg">
7373
<AvatarImage src={user.avatar} alt={user.name} />
7474
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
7575
</Avatar>
76-
<div className="grid flex-1 text-left text-sm leading-tight">
76+
<div className="grid flex-1 text-left text-base leading-tight">
7777
<span className="truncate font-medium">{user.name}</span>
78-
<span className="truncate text-xs">{user.email}</span>
78+
<span className="truncate text-sm">{user.email}</span>
7979
</div>
8080
</div>
8181
</DropdownMenuLabel>

‎components/ui/sidebar.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ import {
2727

2828
const SIDEBAR_COOKIE_NAME = "sidebar_state"
2929
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
30-
const SIDEBAR_WIDTH = "16rem"
31-
const SIDEBAR_WIDTH_MOBILE = "18rem"
32-
const SIDEBAR_WIDTH_ICON = "3rem"
30+
const SIDEBAR_WIDTH = "20rem"
31+
const SIDEBAR_WIDTH_MOBILE = "24rem"
32+
const SIDEBAR_WIDTH_ICON = "3.6rem"
3333
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
3434

3535
type SidebarContextProps = {
@@ -405,7 +405,7 @@ function SidebarGroupLabel({
405405
data-slot="sidebar-group-label"
406406
data-sidebar="group-label"
407407
className={cn(
408-
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
408+
"text-sidebar-foreground/70 ring-sidebar-ring flex h-10 shrink-0 items-center rounded-md px-2 text-sm font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
409409
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
410410
className
411411
)}
@@ -474,7 +474,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
474474
}
475475

476476
const sidebarMenuButtonVariants = cva(
477-
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
477+
"peer/menu-button flex w-full items-center gap-3 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-11! group-data-[collapsible=icon]:p-2.5! [&>span:last-child]:truncate [&>svg]:size-6 [&>svg]:shrink-0",
478478
{
479479
variants: {
480480
variant: {
@@ -483,8 +483,9 @@ const sidebarMenuButtonVariants = cva(
483483
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
484484
},
485485
size: {
486-
default: "h-8 text-sm",
486+
default: "h-10 text-base [&>svg]:size-6",
487487
sm: "h-7 text-xs",
488+
md: "h-8 text-sm",
488489
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
489490
},
490491
},
@@ -643,7 +644,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
643644
data-slot="sidebar-menu-sub"
644645
data-sidebar="menu-sub"
645646
className={cn(
646-
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
647+
"border-sidebar-border mx-4.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-4 py-1",
647648
"group-data-[collapsible=icon]:hidden",
648649
className
649650
)}
@@ -686,10 +687,10 @@ function SidebarMenuSubButton({
686687
data-size={size}
687688
data-active={isActive}
688689
className={cn(
689-
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
690+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-8 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
690691
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
691-
size === "sm" && "text-xs",
692-
size === "md" && "text-sm",
692+
size === "sm" && "text-base",
693+
size === "md" && "text-base",
693694
"group-data-[collapsible=icon]:hidden",
694695
className
695696
)}

‎lib/const.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const appName = "authFire"

0 commit comments

Comments
 (0)