Merge pull request #19 from anoopkarnik/main

Left Sidebar with only icons - mobile friendly
anoopkarnik · Sep 5, 2024 · 28403e9 · 28403e9
2 parents d34ca94 + 8a8f45f
commit 28403e9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/packages/ui/src/components/organisms/home/LeftSidebar.tsx b/packages/ui/src/components/organisms/home/LeftSidebar.tsx
@@ -1,9 +1,10 @@
 'use client'
+
 import { cn } from '@repo/ui/lib/utils'
 import { usePathname } from 'next/navigation'
 import { ElementRef, useEffect, useRef, useState } from 'react'
 import { useMediaQuery } from 'usehooks-ts'
-import { ChevronsLeft, AlignJustifyIcon, PlusIcon, MinusIcon, CircleChevronDown, CircleChevronUp } from 'lucide-react'
+import { ChevronsLeft, AlignJustifyIcon } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../atoms/shadcn/Tooltip'
 import LeftSidebarItem from './LeftSidebarItem'
 
@@ -15,7 +16,7 @@ interface LeftSidebarProps {
     redirect: (href: string) => void
 }
 
-const LeftSidebar = ({ appName, appIcon,sidebarStartItems, sidebarEndItems, redirect }: LeftSidebarProps) => {
+const LeftSidebar = ({ appName, appIcon, sidebarStartItems, sidebarEndItems, redirect }: LeftSidebarProps) => {
     const pathname = usePathname();
     const isMobile = useMediaQuery("(max-width: 640px)");
     const isNotMobile = useMediaQuery("(min-width: 640px)");
@@ -71,31 +72,32 @@ const LeftSidebar = ({ appName, appIcon,sidebarStartItems, sidebarEndItems, redi
 
     return (
         <>
-            <div ref={sidebarRef} className={cn('group/sidebar max-h-screen bg-secondary overflow-auto sticky flex flex-col z-10 overflow-y-auto',
+            <div ref={sidebarRef} className={cn('group/sidebar max-h-screen bg-secondary overflow-hidden sticky flex flex-col z-10 overflow-y-auto',
                 isResetting && "transition-all ease-in-out duration-300",
-                isMobile && "w-0",
-                isNotMobile && "min-w-[240px]"
+                isMobile && "min-w-[70px]",
             )}>
                 <div onClick={collapse} className={cn('rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 absolute top-3 right-2 opacity-0 group-hover/sidebar:opacity-100 transition cursor-pointer',
                     isMobile && "opacity-100",
                 )}>
-                    {isMobile && <ChevronsLeft className='h-6 w-6' />}
+                    {isMobile && !isCollapsed &&  <ChevronsLeft className='h-6 w-6' />}
                 </div>
-                <div className='py-4 px-2 flex flex-col justify-between flex-grow'>
+                <div className='py-4  flex flex-col justify-between flex-grow'>
                     <div>
-                        <div className='flex items-center justify-center gap-4 w-full border-border/40 border-b-2 pb-4'>
-                            {appIcon && <img src={appIcon} alt={appName} className='w-8 h-8'/>}
-                            {appName && <h1 className='text-xl font-bold '>{appName}</h1>}
+                        <div className={cn('flex items-center justify-center gap-4 w-full border-border/40 border-b-2 pb-4 ml-4',
+                            isMobile && isCollapsed && 'border-none'
+                        )}>
+                            {(!isMobile || (isMobile && !isCollapsed)) && appIcon && <img src={appIcon} alt={appName} className='w-8 h-8' />}
+                            {(!isMobile || (isMobile && !isCollapsed)) && appName && <h1 className='text-xl font-bold '>{appName}</h1>}
                         </div>
                         <div className='pt-4'>
                             {sidebarStartItems.map((item: any, index: number) => (
-                            <LeftSidebarItem key={index} index={index} item={item} redirect={redirect} />
+                                <LeftSidebarItem key={index} index={index} item={item} redirect={redirect} isMobile={isMobile} isCollapsed={isCollapsed}/>
                             ))}
                         </div>
                     </div>
                     <div>
                         {sidebarEndItems.map((item: any, index: number) => (
-                        <LeftSidebarItem key={index} index={index} item={item} redirect={redirect} />
+                            <LeftSidebarItem key={index} index={index} item={item} redirect={redirect} isMobile={isMobile} isCollapsed={isCollapsed} />
                         ))}
                     </div>
                 </div>

diff --git a/packages/ui/src/components/organisms/home/LeftSidebarItem.tsx b/packages/ui/src/components/organisms/home/LeftSidebarItem.tsx
@@ -6,7 +6,7 @@ import { CircleChevronDown, CircleChevronUp } from "lucide-react";
 import { useState } from "react";
 
 
-const LeftSidebarItem = ({index,item,redirect}:any) =>{
+const LeftSidebarItem = ({index,item,redirect,isMobile,isCollapsed}:any) =>{
     const [showSubItems, setShowSubItems] = useState<any>({});
     const pathname = usePathname();
 
@@ -34,18 +34,20 @@ const LeftSidebarItem = ({index,item,redirect}:any) =>{
                         </Tooltip>
                     </TooltipProvider>
                     <div className='flex items-center justify-between w-full'>
-                        {item.title} 
+                        {(!isMobile || (isMobile && !isCollapsed)) && item.title} 
                         {showSubItems[index] ?
-                         <CircleChevronUp className='w-4 h-4'/> :
-                          <CircleChevronDown className='w-4 h-4'/>
+                         <CircleChevronUp className='w-4 h-4 opacity-60'/> :
+                          <CircleChevronDown className='w-4 h-4 opacity-60'/>
                         }
                     </div>
                 </div>
                 <>
                 {showSubItems[index] && item.subItems.map((subItem: any, subIndex: number) => (
                     <div key={subIndex} onClick={() => redirect(subItem.href)}
-                        className={cn('flex items-center gap-2 p-2 mx-8 rounded-lg text-sm hover:bg-destructive/10 transition cursor-pointer  ',
-                            pathname === subItem.href && 'bg-destructive/30'
+                        className={cn('flex items-center gap-2 p-2  rounded-lg text-sm hover:bg-destructive/10 transition cursor-pointer  ',
+                            pathname === subItem.href && 'bg-destructive/30',
+                            isMobile && 'ml-4',
+                            !isMobile && 'mx-8'
                         )}>
                         <TooltipProvider>
                             <Tooltip>
@@ -54,7 +56,7 @@ const LeftSidebarItem = ({index,item,redirect}:any) =>{
                                 <TooltipContent>{subItem.title}</TooltipContent>
                             </Tooltip>
                         </TooltipProvider>
-                        {<span>{subItem.title}</span>}
+                        {(!isMobile || (isMobile && !isCollapsed)) && <span>{subItem.title}</span>}
                     </div>
                 ))} 
                 </>
@@ -73,7 +75,7 @@ const LeftSidebarItem = ({index,item,redirect}:any) =>{
                         <TooltipContent >{item.title}</TooltipContent>
                     </Tooltip>
                 </TooltipProvider>
-                {<span>{item.title}</span>}
+                {(!isMobile || (isMobile && !isCollapsed)) && <span>{item.title}</span>}
             </div>
 }
 

diff --git a/packages/ui/src/components/organisms/home/Navbar.tsx b/packages/ui/src/components/organisms/home/Navbar.tsx
@@ -4,6 +4,8 @@ import { Theme } from './Theme';
 import { GoTriangleDown } from "react-icons/go";
 import { UserDropdown } from './UserDropdown';
 import { Notification } from './Notification';
+import { useMediaQuery } from 'usehooks-ts';
+import { cn } from '../../../lib/utils';
 
 interface NavbarProps {
     title?: string;
@@ -22,14 +24,16 @@ interface NavbarProps {
 
 export const Navbar = ({title, screens, user,setTheme,
     onSignout,resetFunction}:NavbarProps) => {
-
+        const isMobile = useMediaQuery("(max-width: 640px)");
 
   return (
     <div className=' p-1 flex items-center justify-between bg-inherit sticky top-0 z-20  px-4 py-2'>
         <div className='flex items-center'>
-           {title && <div className='text-lg font-semibold'>{title}</div>}
+           {!isMobile && title && <div className='text-lg font-semibold'>{title}</div>}
         </div>
-        <div className='flex items-center gap-4'>
+        <div className={cn('flex items-center gap-4',
+            isMobile && 'gap-2'
+        )}>
             <Notification/>
             <Theme setTheme={setTheme}/>
             <UserDropdown