another admin sidebar menu fixes - mobile view + boxes view + hiding …

…base FE menu in admin's routes
filipc30 · Jan 13, 2024 · ad60943 · ad60943
1 parent 7600f6c
commit ad60943
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/app/components/headers/header-base.tsx b/app/components/headers/header-base.tsx
@@ -1,22 +1,22 @@
-import { Link, NavLink } from "@remix-run/react"
-import { cn } from "#app/utils/misc.tsx"
-import ThemeSwitcher from "../theme-switch.tsx"
-import { Button } from "../ui/button.tsx"
+import { Link, NavLink } from '@remix-run/react'
+import { cn } from '#app/utils/misc.tsx'
+import ThemeSwitcher from '../theme-switch.tsx'
+import { Button } from '../ui/button.tsx'
 // import { useOptionalUser } from "#app/utils/user.ts"
 // import UserDropdown from "../dropdowns/dropdown-user.tsx"
 
-export function HeaderBase() {
-    // const user = useOptionalUser()
-    const headerHeight = "h-[60px]"
+export function HeaderBase({ routeAdmin }: { routeAdmin?: boolean }) {
+	// const user = useOptionalUser()
+	const headerHeight = 'h-[60px]'
 
 	return (
-		<header className="max-md:absolute">
+		<header className={cn('max-md:absolute', routeAdmin && 'max-lg:hidden')}>
 			<div className="fixed z-1999 w-full max-md:bottom-2 md:top-0">
 				<div
 					className={cn(
 						'bg-background max-md:mx-2 max-md:rounded-xl',
 						headerHeight,
-						'py-2 max-md:px-2 max-md:py-4 shadow-header-menu',
+						'py-2 shadow-header-menu max-md:px-2 max-md:py-4',
 					)}
 				>
 					<nav className="space-between flex items-center justify-between">
@@ -27,23 +27,29 @@ export function HeaderBase() {
 
 						<div className="md:absolute md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2">
 							<div className="flex justify-center gap-5">
-                            <NavLink to="rooms">
-                                        {({ isActive }) => (
-                                            <Button variant={isActive ? "highlight" : "secondary"}>rooms</Button>
-                                        )}
-                                    </NavLink>
+								<NavLink to="rooms">
+									{({ isActive }) => (
+										<Button variant={isActive ? 'highlight' : 'secondary'}>
+											rooms
+										</Button>
+									)}
+								</NavLink>
 
-                                    <NavLink to="pages">
-                                        {({ isActive }) => (
-                                            <Button variant={isActive ? "highlight" : "secondary"}>pages</Button>
-                                        )}
-                                    </NavLink>
+								<NavLink to="pages">
+									{({ isActive }) => (
+										<Button variant={isActive ? 'highlight' : 'secondary'}>
+											pages
+										</Button>
+									)}
+								</NavLink>
 
-                                    <NavLink to="contact">
-                                        {({ isActive }) => (
-                                            <Button variant={isActive ? "highlight" : "secondary"}>contact</Button>
-                                        )}
-                                    </NavLink>
+								<NavLink to="contact">
+									{({ isActive }) => (
+										<Button variant={isActive ? 'highlight' : 'secondary'}>
+											contact
+										</Button>
+									)}
+								</NavLink>
 							</div>
 						</div>
 
@@ -64,5 +70,5 @@ export function HeaderBase() {
 
 			<div className={headerHeight} />
 		</header>
-    )
-}
+	)
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -231,7 +231,7 @@ function App() {
 
 	return (
 		<Document nonce={nonce} theme={theme} env={data.ENV}>
-			<HeaderBase />
+			<HeaderBase routeAdmin={routeAdmin} />
 
 			<div className={baseContainerWidthClassList}>
 				<Outlet />

diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx
@@ -31,13 +31,13 @@ function SidebarMainNavLink({
 }) {
 	return (
 		<div
-			className={cn(classList, !first ? 'lg:mt-2' : '', 'w-full px-2 lg:mb-2')}
+			className={cn(classList, !first ? 'lg:mt-2' : '', 'w-full px-1 lg:mb-2')}
 		>
 			<NavLink to={routeName} target={target}>
 				{({ isActive }) => (
 					<div
 						className={cn(
-							'group/item px-2 py-4 text-center capitalize',
+							'group/item p-2 lg:px-2 lg:py-4 text-center capitalize',
 							isActive ? 'rounded-xl bg-background text-foreground' : '',
 						)}
 					>
@@ -120,22 +120,20 @@ function SidebarNavLink({
 
 export default function AdminRoute() {
 	const user = useUser()
-
-	const sidebarBoxBaseClasslist =
-		'lg:flex lg:flex-col lg:justify-between lg:items-center rounded-3xl bg-foreground text-background'
-
 	const [isHovered, setIsHovered] = useState(false)
 
 	const handleMouseOver = () => {
 		setIsHovered(true)
 	}
-
 	const handleMouseOut = () => {
 		setTimeout(() => {
 			setIsHovered(false)
 		}, 300)
 	}
 
+	const sidebarBoxBaseClasslist =
+		'lg:flex lg:flex-col lg:justify-between lg:items-center rounded-2xl lg:rounded-3xl bg-foreground text-background'
+
 	return (
 		<div className="flex items-start justify-center">
 			<div className="max-lg:contents">
@@ -146,11 +144,11 @@ export default function AdminRoute() {
 					)}
 				>
 					<div
-						className="pb-2 max-lg:px-2 lg:w-[152px] lg:py-6 lg:pb-20 lg:pr-9 2xl:py-10"
+						className="pb-1 max-lg:px-1 lg:w-[152px] lg:py-6 lg:pb-20 lg:pr-9 2xl:py-10"
 						onMouseOver={handleMouseOver}
 						onMouseLeave={handleMouseOut}
 					>
-						<div className={cn(sidebarBoxBaseClasslist, 'py-2 lg:py-10')}>
+						<div className={cn(sidebarBoxBaseClasslist, 'py-1 lg:py-10')}>
 							<div className="text-center max-lg:hidden">logo</div>
 
 							<div className="custom-admin-sidebar-height flex w-full items-center justify-between gap-1 lg:flex-col 2xl:gap-2">
@@ -170,7 +168,7 @@ export default function AdminRoute() {
 								<div className="group/rooms relative w-full">
 									<SidebarMainNavLink routeName="rooms" icon="home" />
 
-									<div className="pointer-events-none absolute z-3001 group-hover/rooms:pointer-events-auto max-lg:bottom-16 max-lg:right-0 lg:left-full lg:top-[-50%]">
+									<div className="pointer-events-none absolute z-3001 group-hover/rooms:pointer-events-auto max-lg:bottom-16 max-lg:right-[-3rem] lg:left-full lg:top-[-50%]">
 										<div className="ml-4 rounded-2xl bg-foreground px-4 py-2 opacity-0 transition group-hover/rooms:opacity-100">
 											<div
 												className="max-lg:hidden"