Skip to content

Commit

Permalink
progress in admin sidebar menu - mobile view, responsivness, items, h…
Browse files Browse the repository at this point in the history 
…over block with children items, custom FE styles
  • Loading branch information
@filipc30
filipc30 committed Jan 12, 2024
1 parent 793ae8d commit 328de99
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 101 deletions.
223 changes: 123 additions & 100 deletions app/routes/admin.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { type DataFunctionArgs } from '@remix-run/node'
import { NavLink, Outlet } from '@remix-run/react'
import UserDropdown from '#app/components/dropdowns/dropdown-user.tsx'
import { Link, NavLink, Outlet } from '@remix-run/react'
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
import { Button } from '#app/components/ui/button.tsx'
import { Icon } from '#app/components/ui/icon.tsx'
import { cn } from '#app/utils/misc.tsx'
import { cn, getUserImgSrc } from '#app/utils/misc.tsx'
import { requireUserWithRole } from '#app/utils/permissions.ts'
import { useUser } from '#app/utils/user.ts'
import { type IconName } from '@/icon-name'
Expand Down Expand Up @@ -41,12 +40,16 @@ function SidebarMainNavLink({
isActive ? 'rounded-xl bg-background text-foreground' : '',
)}
>
<Icon size="xl" name={icon ?? 'caret-right'} />
<Icon
size="xl"
name={icon ?? 'caret-right'}
className='max-lg:w-5 max-lg:h-5'
/>
<div
className={cn(
'no-scrollbar overflow-x-scroll text-sm',
'no-scrollbar overflow-x-scroll text-sm max-lg:text-xs',
!isActive
? 'lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100'
? 'group-hover/rooms:opacity-100 lg:opacity-0 lg:transition-opacity lg:duration-300 lg:group-hover:opacity-100'
: '',
)}
>
Expand All @@ -60,19 +63,21 @@ function SidebarMainNavLink({
}
function SidebarNavLink({
routeName,
classList,
title,
first,
icon,
target,
}: {
routeName: string
classList?: string
title?: string
first?: boolean
icon?: IconName
target?: '_blank'
}) {
return (
<div className={cn(!first ? 'mt-2' : '', 'mb-2')}>
<div className={cn(classList, !first ? 'mt-2' : '', 'mb-2')}>
<NavLink to={routeName} target={target}>
{({ isActive }) => (
<Button
Expand All @@ -92,13 +97,9 @@ function SidebarNavLink({
}
className={cn(
'capitalize',
title === 'pricings2' ||
title === 'discounts' ||
title === 'facilities' ||
title === 'galleries' ||
title === 'packages'
? isActive && 'font-bold text-highlight'
: isActive && 'hover:bg-black dark:hover:bg-white',
isActive
? 'bg-background font-bold text-highlight dark:bg-foreground'
: 'hover:bg-background hover:text-highlight hover:dark:bg-foreground hover:dark:text-foreground',
)}
>
<Icon
Expand All @@ -119,113 +120,135 @@ export default function AdminRoute() {

const sidebarBoxBaseClasslist =
'lg:flex lg:flex-col lg:justify-between lg:items-center rounded-3xl bg-foreground text-background'
const sidebarWidthClassList = 'w-full lg:w-[152px]'


// TODO: implement fixed position for "max-lg:" mob view of these hover boxes
function menuItemChildrenInnerBoxClassList(groupName: string) {
return `lg:left-full lg:ml-4 opacity-0 rounded-2xl bg-foreground px-4 py-2 transition group-hover/${groupName}:opacity-100`
}
function menuItemChildrenBoxClassList(groupName: string) {
return `pointer-events-none absolute lg:top-[-2rem] z-3001 group-hover/${groupName}:pointer-events-auto`
}

return (
<div className="flex items-start justify-center">
<div className="max-lg:contents">
<div
className={cn(
'fixed z-3001 py-6 max-lg:bottom-0 max-lg:px-6 lg:h-full lg:overflow-y-scroll lg:pr-9 2xl:py-10',
sidebarWidthClassList,
)}
>
<div className={cn(sidebarBoxBaseClasslist, 'py-2 lg:py-10')}>
<div className="text-center max-lg:hidden">
property
<br />
logo
</div>
<div className="fixed z-3001 w-full max-lg:bottom-0 lg:h-full lg:overflow-y-scroll">
<div className="pb-2 max-lg:px-2 lg:w-[152px] lg:pb-20 lg:pr-9 xl:py-6 2xl:py-10">
<div className={cn(sidebarBoxBaseClasslist, 'py-2 lg:py-10 ')}>
<div className="text-center max-lg:hidden">logo</div>

<div className="flex w-full items-center justify-between gap-5 lg:my-16 lg:flex-col">
<SidebarMainNavLink
first={true}
routeName="dashboard"
title="dashboard"
icon="dashboard"
/>
<div className="custom-admin-sidebar-height flex w-full items-center justify-between lg:gap-5 lg:flex-col">
<SidebarMainNavLink
first={true}
routeName="dashboard"
title="dashboard"
icon="dashboard"
/>

<SidebarMainNavLink
routeName="reservations"
title="bookings"
icon="calendar"
/>
<SidebarMainNavLink
routeName="reservations"
title="bookings"
icon="calendar"
/>

<SidebarMainNavLink routeName="rooms" icon="home" />
<div className="group/rooms relative w-full h-full">
<SidebarMainNavLink routeName="rooms" icon="home" />

<div className="hidden">
<SidebarNavLink
routeName="rooms/gallery"
title="galleries"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/pricing"
title="pricings"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/discounts"
title="discounts"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/packagedeals"
title="packages"
<div className={menuItemChildrenBoxClassList('rooms')}>
<div className={menuItemChildrenInnerBoxClassList('rooms')}>
<SidebarNavLink
routeName="rooms/pricing"
title="pricings"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/gallery"
title="galleries"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/packagedeals"
title="packages"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/facility"
title="facilities"
icon="file-text"
/>
<SidebarNavLink
routeName="rooms/discounts"
title="discounts"
icon="file-text"
/>
</div>
</div>
</div>

<SidebarMainNavLink
routeName="pages"
icon="file-text"
classList="max-lg:hidden"
/>

<div className="group/others relative w-full h-full">
<Icon
name="dots-horizontal"
size="xl"
className="w-full cursor-pointer"
/>

<div className={menuItemChildrenBoxClassList('others')}>
<div
className={menuItemChildrenInnerBoxClassList('others')}
>
<SidebarNavLink
routeName="rooms/facility"
title="facilities"
icon="file-text"
/>
</div>
routeName="pages"
icon="file-text"
classList="lg:hidden"
/>

<SidebarMainNavLink
routeName="pages"
icon="file-text"
classList="max-lg:hidden"
/>

<SidebarMainNavLink
title="more"
routeName="more"
icon="dots-horizontal"
classList="lg:hidden"
/>
</div>
<SidebarNavLink
routeName="docs"
title="help"
icon="question-mark-circled"
/>
<SidebarNavLink routeName="users" icon="avatar" />
{/* dots-horizontal, file-text, link-2 */}

<div className="text-center max-lg:hidden">
<span>language</span>
<SidebarNavLink routeName="cache" />

<SidebarMainNavLink routeName="more" icon="dots-horizontal" />
<div className="hidden">
<SidebarNavLink
routeName="docs"
title="help"
icon="question-mark-circled"
/>
<SidebarNavLink routeName="users" icon="avatar" />
{/* dots-horizontal, file-text, link-2 */}

<SidebarNavLink routeName="cache" />

<div
className={cn(
'mt-4 2xl:mt-8',
sidebarBoxBaseClasslist,
'px-2 py-4 2xl:px-4',
)}
>
{user ? <UserDropdown /> : null}
<Button variant="secondary" className="z-9999">
<Link
to="/me"
// this is for progressive enhancement
className="flex items-center gap-2"
>
<img
className="h-8 w-8 rounded-full object-cover"
alt={user.name ?? user.username}
src={getUserImgSrc(user.image?.id)}
/>
<span className="text-body-sm font-bold">
{user.name ?? user.username}
</span>
</Link>
</Button>
</div>
</div>
</div>
</div>

<div className="w-full text-center max-lg:hidden">
<span>language</span>
</div>
</div>
</div>
</div>
</div>

<div className={cn('h-full max-lg:hidden', sidebarWidthClassList)} />
<div className="h-full w-full max-lg:hidden lg:w-[152px]" />

<div className="w-full py-6 2xl:py-10">
<div className="rounded-3xl bg-backgroundDashboard px-2 py-8 sm:px-3 xl:px-4 2xl:px-8 2xl:py-8">
Expand Down
20 changes: 19 additions & 1 deletion app/styles/customComponents.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,26 @@
@media (max-height: 700px) {
.reservationModalCustomMaxHeight {
height: 100%;
}
}
}


@media (max-height: 649px) {
.custom-admin-sidebar-height {
@apply lg:my-4;
}
}
@media (min-height: 650px) and (max-height: 749px) {
.custom-admin-sidebar-height {
@apply lg:my-10;
}
}
@media (min-height: 750px) {
.custom-admin-sidebar-height {
@apply lg:my-16;
}
}



/* page detail's "dangerouslySetInnerHTML Styles */
Expand Down

0 comments on commit 328de99

Please sign in to comment.