Skip to content

Commit

Permalink
Update sidebar with social media
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruchernchong
ruchernchong committed Nov 22, 2024
1 parent d5f8386 commit 13de50e
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 74 deletions.
158 changes: 84 additions & 74 deletions components/AppSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,19 @@ import {
ChevronRight,
DollarSign,
Droplet,
Facebook,
Fuel,
Gauge,
Github,
Instagram,
Linkedin,
type LucideIcon,
Twitter,
Zap,
} from "lucide-react";

import { BrandLogo } from "@/components/BrandLogo";
import { NavSocialMedia } from "@/components/NavSocialMedia";
import {
Sidebar,
SidebarContent,
Expand All @@ -35,6 +41,7 @@ import {
} from "@/components/ui/sidebar";
import { VEHICLE_TYPE_MAP } from "@/constants";
import { slugify } from "@/utils/slugify";
import type { VehicleType } from "@/types";

type NavItem = {
title: string;
Expand All @@ -51,8 +58,7 @@ type NavSubItem = {
};

type Nav = {
cars: NavItem[];
coe: NavItem[];
[key: string]: NavItem[];
};

export const AppSidebar = () => {
Expand Down Expand Up @@ -154,34 +160,38 @@ export const AppSidebar = () => {
))}
</SidebarMenu>
</SidebarGroup>
<SidebarGroup className="mt-auto">
<SidebarGroupLabel>Social Media</SidebarGroupLabel>
<NavSocialMedia items={data.socialMedia} />
</SidebarGroup>
</SidebarContent>
{/*<SidebarFooter>*/}
{/* <SidebarMenu>*/}
{/* <SidebarMenuItem>*/}
{/* <DropdownMenu>*/}
{/* <DropdownMenuTrigger asChild>*/}
{/* <SidebarMenuButton>*/}
{/* <User2 /> Username*/}
{/* <ChevronUp className="ml-auto" />*/}
{/* </SidebarMenuButton>*/}
{/* </DropdownMenuTrigger>*/}
{/* <DropdownMenuContent*/}
{/* side="top"*/}
{/* className="w-[--radix-popper-anchor-width]"*/}
{/* >*/}
{/* <DropdownMenuItem>*/}
{/* <span>Account</span>*/}
{/* </DropdownMenuItem>*/}
{/* <DropdownMenuItem>*/}
{/* <span>Billing</span>*/}
{/* </DropdownMenuItem>*/}
{/* <DropdownMenuItem>*/}
{/* <span>Sign out</span>*/}
{/* </DropdownMenuItem>*/}
{/* </DropdownMenuContent>*/}
{/* </DropdownMenu>*/}
{/* </SidebarMenuItem>*/}
{/* </SidebarMenu>*/}
{/*<SidebarMenu>*/}
{/* <SidebarMenuItem>*/}
{/* <DropdownMenu>*/}
{/* <DropdownMenuTrigger asChild>*/}
{/* <SidebarMenuButton>*/}
{/* <User2 /> Username*/}
{/* <ChevronUp className="ml-auto" />*/}
{/* </SidebarMenuButton>*/}
{/* </DropdownMenuTrigger>*/}
{/* <DropdownMenuContent*/}
{/* side="top"*/}
{/* className="w-[--radix-popper-anchor-width]"*/}
{/* >*/}
{/* <DropdownMenuItem>*/}
{/* <span>Account</span>*/}
{/* </DropdownMenuItem>*/}
{/* <DropdownMenuItem>*/}
{/* <span>Billing</span>*/}
{/* </DropdownMenuItem>*/}
{/* <DropdownMenuItem>*/}
{/* <span>Sign out</span>*/}
{/* </DropdownMenuItem>*/}
{/* </DropdownMenuContent>*/}
{/* </DropdownMenu>*/}
{/* </SidebarMenuItem>*/}
{/*</SidebarMenu>*/}
{/*</SidebarFooter>*/}
</Sidebar>
);
Expand All @@ -196,62 +206,35 @@ const data: Nav = {
url: "/cars/fuel-types",
isActive: true,
items: [
{
title: "Petrol",
icon: Fuel,
url: "/cars/fuel-types/petrol",
},
{
title: "Hybrid",
icon: Zap,
url: "/cars/fuel-types/hybrid",
},
{
title: "Electric",
icon: Battery,
url: "/cars/fuel-types/electric",
},
{
title: "Diesel",
icon: Droplet,
url: "/cars/fuel-types/diesel",
},
],
{ title: "Petrol", icon: Fuel },
{ title: "Hybrid", icon: Zap },
{ title: "Electric", icon: Battery },
{ title: "Diesel", icon: Droplet },
].map((item) => {
const title = item.title;
return {
...item,
url: `/cars/fuel-types/${slugify(title)}`,
};
}),
},
{
title: "Vehicle Types",
url: "/cars/vehicle-types",
isActive: true,
items: [
{
title: "Hatchback",
url: "/cars/vehicle-types/hatchback",
},
{
title: "Sedan",
url: "/cars/vehicle-types/sedan",
},
{
title: "Multi-purpose Vehicle",
url: `/cars/vehicle-types/${slugify("multi-purpose vehicle")}`,
},
{
title: "Station-wagon",
url: "/cars/vehicle-types/station-wagon",
},
{
title: "Sports Utility Vehicle",
url: `/cars/vehicle-types/${slugify("sports utility vehicle")}`,
},
{
title: "Coupe/Convertible",
url: `/cars/vehicle-types/${slugify("coupe/convertible")}`,
},
{ title: "Hatchback" },
{ title: "Sedan" },
{ title: "Multi-purpose Vehicle" },
{ title: "Station-wagon" },
{ title: "Sports Utility Vehicle" },
{ title: "Coupe/Convertible" },
].map((item) => {
const { title } = item;
const title = item.title as VehicleType;
return {
...item,
title: VEHICLE_TYPE_MAP[title] || title,
url: `/cars/vehicle-types/${slugify(title)}`,
};
}),
},
Expand All @@ -276,4 +259,31 @@ const data: Nav = {
// ] satisfies NavSubItem[],
// },
],
socialMedia: [
{
title: "Facebook",
url: "https://facebook.com/sgcarstrends",
icon: Facebook,
},
{
title: "Twitter",
url: "https://twitter.com/sgcarstrends",
icon: Twitter,
},
{
title: "Instagram",
url: "https://instagram.com/sgcarstrends",
icon: Instagram,
},
{
title: "LinkedIn",
url: "https://linkedin.com/company/sgcarstrends",
icon: Linkedin,
},
{
title: "GitHub",
url: "https://github.com/sgcarstrends",
icon: Github,
},
].sort((a, b) => a.title.localeCompare(b.title)),
};
38 changes: 38 additions & 0 deletions components/NavSocialMedia.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as React from "react";
import { type LucideIcon } from "lucide-react";

import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar";

export const NavSocialMedia = ({
items,
...props
}: {
items: {
title: string;
url: string;
icon?: LucideIcon;
}[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) => (
<SidebarGroup {...props}>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild size="sm">
<a href={item.url} target="_blank">
{item.icon && <item.icon />}
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);

0 comments on commit 13de50e

Please sign in to comment.