Skip to content

Commit

Permalink
improve sidebar ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@kavinvalli
kavinvalli committed Oct 10, 2024
1 parent 9f75f23 commit 36ffa25
Show file tree
Hide file tree
Showing 3 changed files with 278 additions and 149 deletions.
26 changes: 13 additions & 13 deletions web/components/layout/auth/DesktopSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,15 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
return (
<>
{/* Mobile hamburger menu */}
<div className="sticky top-0 z-20 px-2 py-3 flex md:hidden flex-shrink-0 bg-white dark:bg-black border-b border-gray-300 dark:border-gray-70">
<div className="sticky top-0 z-20 px-2 py-3 flex md:hidden flex-shrink-0 bg-white dark:bg-black border-b border-slate-300 dark:border-slate-70">
<Button
variant="ghost"
size="icon"
onClick={() => {
setIsCollapsed(false);
setIsMobileMenuOpen(true);
}}
className="text-gray-500 hover:text-gray-600"
className="text-slate-500 hover:text-slate-600"
>
<Bars3Icon className="h-6 w-6" />
</Button>
Expand Down Expand Up @@ -176,7 +176,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
<div
ref={sidebarRef}
className={cn(
"flex flex-col z-50 bg-background dark:bg-gray-900 transition-all duration-300 h-screen bg-white",
"flex flex-col z-50 bg-background dark:bg-slate-900 transition-all duration-300 h-screen bg-white",
largeWith,
"fixed top-0 left-0",
"md:translate-x-0", // Always visible on desktop
Expand All @@ -191,15 +191,15 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
variant="ghost"
size="icon"
onClick={() => setIsMobileMenuOpen(false)}
className="text-gray-500 hover:text-gray-600"
className="text-slate-500 hover:text-slate-600"
>
<XMarkIcon className="h-6 w-6" />
</Button>
</div> */}

{/* Existing sidebar content */}
<div className="w-full flex flex-grow flex-col overflow-y-auto border-r dark:border-gray-700 justify-between pb-4">
<div className="flex items-center gap-2 h-14 border-b dark:border-gray-700">
<div className="w-full flex flex-grow flex-col overflow-y-auto border-r dark:border-slate-700 justify-between pb-4">
<div className="flex items-center gap-2 h-14 border-b dark:border-slate-700">
<div className="flex items-center gap-2 w-full">
{!isCollapsed && <OrgDropdown />}
</div>
Expand All @@ -210,7 +210,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
variant="ghost"
size="icon"
onClick={handleCollapseToggle}
className="w-full flex justify-center dark:hover:bg-gray-800 px-2"
className="w-full flex justify-center dark:hover:bg-slate-800 px-2"
>
{isCollapsed ? (
<ChevronRightIcon className="h-4 w-4" />
Expand Down Expand Up @@ -312,7 +312,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
<Button
variant="ghost"
size="icon"
className="w-full dark:hover:bg-gray-800"
className="w-full dark:hover:bg-slate-800"
asChild
>
<Link
Expand All @@ -326,7 +326,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
</TooltipTrigger>
<TooltipContent
side="right"
className="dark:bg-gray-800 dark:text-gray-200"
className="dark:bg-slate-800 dark:text-slate-200"
>
View Documentation
</TooltipContent>
Expand All @@ -336,7 +336,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
<Button
variant="ghost"
size="icon"
className="w-full dark:hover:bg-gray-800"
className="w-full dark:hover:bg-slate-800"
asChild
>
<Link
Expand All @@ -350,7 +350,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
</TooltipTrigger>
<TooltipContent
side="right"
className="dark:bg-gray-800 dark:text-gray-200"
className="dark:bg-slate-800 dark:text-slate-200"
>
Help And Support
</TooltipContent>
Expand All @@ -361,7 +361,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
<Button
variant="ghost"
size="sm"
className="w-full justify-start dark:hover:bg-gray-800 text-[12px]"
className="w-full justify-start dark:hover:bg-slate-800 text-[12px]"
asChild
>
<Link
Expand All @@ -378,7 +378,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
<Button
variant="ghost"
size="sm"
className="w-full justify-start dark:hover:bg-gray-800 text-[12px]"
className="w-full justify-start dark:hover:bg-slate-800 text-[12px]"
asChild
>
<Link
Expand Down
206 changes: 70 additions & 136 deletions web/components/layout/orgDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ import { Dialog, DialogContent } from "@/components/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
import { Database } from "@/supabase/database.types";
import { CheckIcon } from "@heroicons/react/24/outline";
import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import { useCallback, useMemo, useState } from "react";
Expand All @@ -26,6 +25,9 @@ import {
ORGANIZATION_COLORS,
ORGANIZATION_ICONS,
} from "../templates/organization/orgConstants";
import { LogOutIcon } from "lucide-react";
import Link from "next/link";
import OrgMoreDropdown from "./orgMoreDropdown";

interface OrgDropdownProps {}

Expand Down Expand Up @@ -90,7 +92,7 @@ export default function OrgDropdown({}: OrgDropdownProps) {
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="flex items-center justify-start w-full ml-1 p-2"
className="flex items-center justify-start w-full ml-1 p-2"
>
{currentIcon && (
<currentIcon.icon
Expand All @@ -106,143 +108,75 @@ export default function OrgDropdown({}: OrgDropdownProps) {
</p>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[15rem] ml-2 mt-1 max-h-[90vh] flex flex-col">
<DropdownMenuLabel>Organizations</DropdownMenuLabel>
<div className="flex-grow flex flex-col overflow-hidden">
{ownedOrgs && ownedOrgs.length > 0 && (
<div className="flex flex-col min-h-0">
<DropdownMenuLabel className="text-xs text-muted-foreground">
Your Organizations
{ownedOrgs.length > 7 && ` (${ownedOrgs.length})`}
</DropdownMenuLabel>
<ScrollArea className="flex-grow overflow-y-auto">
{ownedOrgs.map((org, idx) => {
const icon = ORGANIZATION_ICONS.find(
(icon) => icon.name === org.icon
);
return (
<DropdownMenuItem
key={idx}
onSelect={() => orgContext?.setCurrentOrg(org.id)}
>
<div className="flex items-center justify-between w-full">
<div className="flex items-center space-x-2">
{icon && (
<icon.icon className="h-4 w-4 text-muted-foreground" />
)}
<span className="truncate max-w-[7.5rem]">
{org.name}
</span>
</div>
{org.id === orgContext?.currentOrg?.id && (
<CheckIcon className="h-4 w-4 text-primary" />
)}
</div>
</DropdownMenuItem>
);
})}
</ScrollArea>
<DropdownMenuContent className="w-[15rem] ml-2 mt-2 max-h-[90vh] flex flex-col border-slate-200">
<DropdownMenuLabel className="flex justify-between items-center">
<div className="flex gap-2">
{currentIcon && (
<currentIcon.icon
className={clsx(
`text-${currentColor?.name}-500`,
"mt-1 flex-shrink-0 h-4 w-4"
)}
aria-hidden="true"
/>
)}
<div className="flex flex-col gap-1">
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
{orgContext?.currentOrg?.name}
</h3>
<p className="text-xs text-slate-500 font-medium">
{user?.email}
</p>
</div>
)}
{memberOrgs && memberOrgs.length > 0 && (
<div className="flex flex-col min-h-0">
<DropdownMenuLabel className="text-xs text-muted-foreground">
Member Organizations
{memberOrgs.length > 7 && ` (${memberOrgs.length})`}
</DropdownMenuLabel>
<ScrollArea className="flex-grow overflow-y-auto">
{memberOrgs.map((org, idx) => {
const icon = ORGANIZATION_ICONS.find(
(icon) => icon.name === org.icon
);
return (
<DropdownMenuItem
key={idx}
onSelect={() => orgContext?.setCurrentOrg(org.id)}
>
<div className="flex items-center justify-between w-full">
<div className="flex items-center space-x-2">
{icon && (
<icon.icon className="h-4 w-4 text-muted-foreground" />
)}
<span className="truncate max-w-[7.5rem]">
{org.name}
</span>
</div>
{org.id === orgContext?.currentOrg?.id && (
<CheckIcon className="h-4 w-4 text-primary" />
)}
</div>
</DropdownMenuItem>
);
})}
</ScrollArea>
</div>
)}
{customerOrgs && customerOrgs.length > 0 && (
<div className="flex flex-col min-h-0">
<DropdownMenuLabel className="text-xs text-muted-foreground">
Customers
{customerOrgs.length > 7 && ` (${customerOrgs.length})`}
</DropdownMenuLabel>
<ScrollArea className="flex-grow overflow-y-auto">
{customerOrgs.map((org, idx) => {
const icon = ORGANIZATION_ICONS.find(
(icon) => icon.name === org.icon
);
return (
<DropdownMenuItem
key={idx}
onSelect={() => orgContext?.setCurrentOrg(org.id)}
>
<div className="flex items-center justify-between w-full">
<div className="flex items-center space-x-2">
{icon && (
<icon.icon className="h-4 w-4 text-muted-foreground" />
)}
<span className="truncate max-w-[7.5rem]">
{org.name}
</span>
</div>
{org.id === orgContext?.currentOrg?.id && (
<CheckIcon className="h-4 w-4 text-primary" />
)}
</div>
</DropdownMenuItem>
);
})}
</ScrollArea>
</div>
)}
</div>
<DropdownMenuSeparator />
<DropdownMenuItem onSelect={() => createNewOrgHandler()}>
Create New Org
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>User Settings</DropdownMenuLabel>
<DropdownMenuItem
className={cn("hover:bg-transparent cursor-default")}
disableHover
disableClickClose
>
<div className="flex items-center justify-between w-full">
<span>Theme</span>
<Switch
checked={themeContext?.theme === "dark"}
onCheckedChange={handleThemeChange}
/>
</div>
</DropdownMenuItem>
<DropdownMenuItem disableHover>
<div className="flex items-center justify-between w-full">
<span className="text-sm text-muted-foreground truncate">
{user?.email}
</span>
<div className="hidden sm:block">
<OrgMoreDropdown
ownedOrgs={ownedOrgs}
memberOrgs={memberOrgs}
customerOrgs={customerOrgs}
createNewOrgHandler={createNewOrgHandler}
currentOrgId={orgContext?.currentOrg?.id}
setCurrentOrg={orgContext?.setCurrentOrg}
/>
</div>
</DropdownMenuItem>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem onSelect={handleSignOut}>Sign out</DropdownMenuItem>
<div className="block sm:hidden">
<OrgMoreDropdown
ownedOrgs={ownedOrgs}
memberOrgs={memberOrgs}
customerOrgs={customerOrgs}
createNewOrgHandler={createNewOrgHandler}
currentOrgId={orgContext?.currentOrg?.id}
setCurrentOrg={orgContext?.setCurrentOrg}
/>
<DropdownMenuSeparator />
</div>
<DropdownMenuGroup>
<DropdownMenuItem asChild className="cursor-pointer text-xs">
<Link href="/settings/members">Invite members</Link>
</DropdownMenuItem>
<DropdownMenuItem
className={cn("hover:bg-transparent cursor-default")}
disableHover
disableClickClose
>
<div className="flex items-center justify-between w-full text-xs">
<span>Dark mode</span>
<Switch
checked={themeContext?.theme === "dark"}
onCheckedChange={handleThemeChange}
size="md"
/>
</div>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />

<DropdownMenuItem onSelect={handleSignOut} className="text-xs">
<LogOutIcon className="h-4 w-4 mr-2" />
Sign out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

Expand Down
Loading

0 comments on commit 36ffa25

Please sign in to comment.