style: redesigned sidebar, added new icons and spacing changes
This commit is contained in:
Dakshesh Jain
parent
1b369feb6a
commit
73567dc7fc
15 changed files with 315 additions and 185 deletions
|
|
@ -56,30 +56,10 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`flex w-full items-center justify-between self-baseline bg-primary px-2 py-2 ${
|
||||
className={`flex w-full items-center justify-between self-baseline bg-white border-t border-gray-200 px-6 py-2 ${
|
||||
sidebarCollapse ? "flex-col-reverse" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:flex ${
|
||||
sidebarCollapse ? "w-full justify-center" : ""
|
||||
}`}
|
||||
onClick={() => toggleCollapsed()}
|
||||
>
|
||||
<ArrowLongLeftIcon
|
||||
className={`h-4 w-4 flex-shrink-0 text-gray-500 duration-300 group-hover:text-gray-900 ${
|
||||
sidebarCollapse ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:hidden"
|
||||
onClick={() => setSidebarActive(false)}
|
||||
>
|
||||
<ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
|
||||
|
|
@ -93,9 +73,47 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
|||
}}
|
||||
title="Shortcuts"
|
||||
>
|
||||
<BoltIcon className="h-4 w-4 text-gray-500" />
|
||||
<BoltIcon className={`text-gray-500 ${sidebarCollapse ? "h-4 w-4" : "h-6 w-6"}`} />
|
||||
{!sidebarCollapse && <span>Shortcuts</span>}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
|
||||
sidebarCollapse ? "w-full justify-center" : ""
|
||||
}`}
|
||||
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
|
||||
title="Help"
|
||||
>
|
||||
<QuestionMarkCircleIcon
|
||||
className={`text-gray-500 ${sidebarCollapse ? "h-4 w-4" : "h-6 w-6"}`}
|
||||
/>
|
||||
{!sidebarCollapse && <span>Help</span>}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:hidden"
|
||||
onClick={() => setSidebarActive(false)}
|
||||
>
|
||||
<ArrowLongLeftIcon
|
||||
className={`flex-shrink-0 text-gray-500 group-hover:text-gray-900 ${
|
||||
sidebarCollapse ? "h-4 w-4" : "h-6 w-6"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:flex ${
|
||||
sidebarCollapse ? "w-full justify-center" : ""
|
||||
}`}
|
||||
onClick={() => toggleCollapsed()}
|
||||
>
|
||||
<ArrowLongLeftIcon
|
||||
className={`flex-shrink-0 text-gray-500 duration-300 group-hover:text-gray-900 ${
|
||||
sidebarCollapse ? "h-4 w-4 rotate-180" : "h-6 w-6"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<Transition
|
||||
show={isNeedHelpOpen}
|
||||
|
|
@ -123,17 +141,6 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
|||
))}
|
||||
</div>
|
||||
</Transition>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
|
||||
sidebarCollapse ? "w-full justify-center" : ""
|
||||
}`}
|
||||
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
|
||||
title="Help"
|
||||
>
|
||||
<QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
|
||||
{!sidebarCollapse && <span>Help?</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -69,45 +69,43 @@ export const WorkspaceSidebarDropdown = () => {
|
|||
return (
|
||||
<div className="relative">
|
||||
<Menu as="div" className="col-span-4 inline-block w-full text-left">
|
||||
<div className="w-full">
|
||||
<Menu.Button
|
||||
className={`inline-flex w-full items-center justify-between rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
|
||||
!sidebarCollapse
|
||||
? "border border-gray-300 shadow-sm hover:bg-gray-50 focus:bg-gray-50"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<Image
|
||||
src={activeWorkspace.logo}
|
||||
alt="Workspace Logo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded"
|
||||
/>
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0) ?? "..."
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<p className="ml-1 text-left">
|
||||
{activeWorkspace?.name
|
||||
? activeWorkspace.name.length > 17
|
||||
? `${activeWorkspace.name.substring(0, 17)}...`
|
||||
: activeWorkspace.name
|
||||
: "Loading..."}
|
||||
</p>
|
||||
<Menu.Button
|
||||
className={`inline-flex w-full items-center justify-between rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
|
||||
!sidebarCollapse
|
||||
? "border border-gray-300 shadow-sm hover:bg-gray-50 focus:bg-gray-50"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center mx-auto gap-x-1">
|
||||
<div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<Image
|
||||
src={activeWorkspace.logo}
|
||||
alt="Workspace Logo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded"
|
||||
/>
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0) ?? "..."
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<div className="flex flex-grow justify-end">
|
||||
<ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
|
||||
</div>
|
||||
<p className="ml-1 text-left">
|
||||
{activeWorkspace?.name
|
||||
? activeWorkspace.name.length > 17
|
||||
? `${activeWorkspace.name.substring(0, 17)}...`
|
||||
: activeWorkspace.name
|
||||
: "Loading..."}
|
||||
</p>
|
||||
)}
|
||||
</Menu.Button>
|
||||
</div>
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<div className="flex flex-grow justify-end">
|
||||
<ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
|
|
|
|||
|
|
@ -2,39 +2,34 @@ import React from "react";
|
|||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
// icons
|
||||
import {
|
||||
ClipboardDocumentListIcon,
|
||||
Cog6ToothIcon,
|
||||
HomeIcon,
|
||||
RectangleStackIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons";
|
||||
// hooks
|
||||
import useTheme from "hooks/use-theme";
|
||||
|
||||
const workspaceLinks = (workspaceSlug: string) => [
|
||||
{
|
||||
icon: HomeIcon,
|
||||
name: "Home",
|
||||
icon: GridViewIcon,
|
||||
name: "Dashboard",
|
||||
href: `/${workspaceSlug}`,
|
||||
},
|
||||
{
|
||||
icon: ClipboardDocumentListIcon,
|
||||
icon: AssignmentClipboardIcon,
|
||||
name: "Projects",
|
||||
href: `/${workspaceSlug}/projects`,
|
||||
},
|
||||
{
|
||||
icon: RectangleStackIcon,
|
||||
icon: TickMarkIcon,
|
||||
name: "My Issues",
|
||||
href: `/${workspaceSlug}/me/my-issues`,
|
||||
},
|
||||
{
|
||||
icon: Cog6ToothIcon,
|
||||
icon: SettingIcon,
|
||||
name: "Settings",
|
||||
href: `/${workspaceSlug}/settings`,
|
||||
},
|
||||
];
|
||||
|
||||
export const WorkspaceSidebarMenu = () => {
|
||||
export const WorkspaceSidebarMenu: React.FC = () => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
|
@ -49,15 +44,15 @@ export const WorkspaceSidebarMenu = () => {
|
|||
<a
|
||||
className={`${
|
||||
link.href === router.asPath
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100"
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
|
||||
} group flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-500"
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
|
||||
} h-4 w-4 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue