1- import  React  from  "react" ; 
1+ import  React ,  {  useState  }  from  "react" ; 
2+ 
3+ import  Link  from  "next/link" ; 
4+ 
5+ import  {  Transition  }  from  "@headlessui/react" ; 
26
37// hooks 
48import  useTheme  from  "lib/hooks/useTheme" ; 
@@ -10,16 +14,46 @@ import {
1014  Cog6ToothIcon , 
1115  RectangleStackIcon , 
1216  ArrowLongLeftIcon , 
13-   QuestionMarkCircleIcon , 
1417  RectangleGroupIcon , 
1518}  from  "@heroicons/react/24/outline" ; 
16- import  {  CyclesIcon  }  from  "ui/icons" ; 
19+ import  { 
20+   CyclesIcon , 
21+   QuestionMarkCircleIcon , 
22+   BoltIcon , 
23+   DocumentIcon , 
24+   DiscordIcon , 
25+   GithubIcon , 
26+   CommentIcon , 
27+ }  from  "ui/icons" ; 
1728
1829type  Props  =  { 
1930  toggleSidebar : boolean ; 
2031  setToggleSidebar : React . Dispatch < React . SetStateAction < boolean > > ; 
2132} ; 
2233
34+ const  helpOptions  =  [ 
35+   { 
36+     name : "Documentation" , 
37+     href : "https://docs.plane.so/" , 
38+     Icon : DocumentIcon , 
39+   } , 
40+   { 
41+     name : "Join our Discord" , 
42+     href : "https://discord.com/invite/A92xrEGCge" , 
43+     Icon : DiscordIcon , 
44+   } , 
45+   { 
46+     name : "Report a bug" , 
47+     href : "https://github.com/makeplane/plane/issues/new/choose" , 
48+     Icon : GithubIcon , 
49+   } , 
50+   { 
51+     name : "Chat with us" , 
52+ 53+     Icon : CommentIcon , 
54+   } , 
55+ ] ; 
56+ 
2357const  navigation  =  ( workspaceSlug : string ,  projectId : string )  =>  [ 
2458  { 
2559    name : "Issues" , 
@@ -46,6 +80,8 @@ const navigation = (workspaceSlug: string, projectId: string) => [
4680const  Sidebar : React . FC < Props >  =  ( {  toggleSidebar,  setToggleSidebar } )  =>  { 
4781  const  {  collapsed : sidebarCollapse ,  toggleCollapsed }  =  useTheme ( ) ; 
4882
83+   const  [ isNeedHelpOpen ,  setIsNeedHelpOpen ]  =  useState ( false ) ; 
84+ 
4985  return  ( 
5086    < nav  className = "relative z-20 h-screen md:z-0" > 
5187      < div 
@@ -84,7 +120,7 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
84120              </ button > 
85121              < button 
86122                type = "button" 
87-                 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 ${  
123+                 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 ${  
88124                  sidebarCollapse  ? "w-full justify-center"  : ""  
89125                }  `} 
90126                onClick = { ( )  =>  { 
@@ -96,8 +132,45 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
96132                } } 
97133                title = "Help" 
98134              > 
99-                 < QuestionMarkCircleIcon  className = "h-4 w-4 text-gray-500"  /> 
135+                 < BoltIcon  className = "h-4 w-4 text-gray-500"  /> 
136+                 { ! sidebarCollapse  &&  < span > Shortcuts</ span > } 
100137              </ button > 
138+               < div  className = "relative" > 
139+                 < Transition 
140+                   show = { isNeedHelpOpen } 
141+                   enter = "transition ease-out duration-100" 
142+                   enterFrom = "transform opacity-0 scale-95" 
143+                   enterTo = "transform opacity-100 scale-100" 
144+                   leave = "transition ease-in duration-75" 
145+                   leaveFrom = "transform opacity-100 scale-100" 
146+                   leaveTo = "transform opacity-0 scale-95" 
147+                 > 
148+                   < div  className = "absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md" > 
149+                     { helpOptions . map ( ( {  name,  Icon,  href } )  =>  ( 
150+                       < Link  href = { href }  key = { name } > 
151+                         < a 
152+                           target = "_blank" 
153+                           className = "mx-3 flex items-center gap-x-2 rounded-md px-2 py-2 text-xs hover:bg-gray-100" 
154+                         > 
155+                           < Icon  className = "h-5 w-5 text-gray-500"  /> 
156+                           < span  className = "text-sm" > { name } </ span > 
157+                         </ a > 
158+                       </ Link > 
159+                     ) ) } 
160+                   </ div > 
161+                 </ Transition > 
162+                 < button 
163+                   type = "button" 
164+                   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 ${  
165+                     sidebarCollapse  ? "w-full justify-center"  : ""  
166+                   }  `} 
167+                   onClick = { ( )  =>  setIsNeedHelpOpen ( ( prev )  =>  ! prev ) } 
168+                   title = "Help" 
169+                 > 
170+                   < QuestionMarkCircleIcon  className = "h-4 w-4 text-gray-500"  /> 
171+                   { ! sidebarCollapse  &&  < span > Need help?</ span > } 
172+                 </ button > 
173+               </ div > 
101174            </ div > 
102175          </ div > 
103176        </ div > 
0 commit comments