frontend on /c

app/components/layout/header.tsx

@@ -138,7 +138,7 @@ export function HeaderNav({
 	)
 }
 
-function UserDropdown() {
+export function UserDropdown() {
 	const user = useUser()
 	const submit = useSubmit()
 	const formRef = useRef<HTMLFormElement>(null)
@@ -149,16 +149,22 @@ function UserDropdown() {
 				<div
 					// this is for progressive enhancement
 					onClick={e => e.preventDefault()}
-					className="relative rounded-full border border-primary bg-secondary p-1"
+					className="relative"
 				>
 					<div className="absolute right-0 top-0 rounded-full bg-background p-[1px]">
 						<div className="z-10 h-2 w-2 rounded-full bg-primary"></div>
 					</div>
-					<img
-						className="h-7 w-7 rounded-full object-cover"
-						alt={user.name ?? user.username}
-						src={getUserImgSrc(user.image?.id)}
-					/>
+					<Button
+						variant="outline_2"
+						size="icon"
+						className="rounded-full p-1 hover:bg-background"
+					>
+						<img
+							className="h-6 rounded-full"
+							alt={user.name ?? user.username}
+							src={getUserImgSrc(user.image?.id)}
+						/>
+					</Button>
 					{/* <span className="font-bold text-body-sm">
 						{user.name ?? user.username}
 					</span> */}
@@ -170,7 +176,7 @@ function UserDropdown() {
 					align="end"
 					className="min-w-[16rem] rounded-sm border border-primary"
 				>
-					<DropdownMenuItem asChild className="border-b p-3">
+					<DropdownMenuItem asChild className="p-3">
 						<Link
 							prefetch="intent"
 							to={`/users/${user.username}`}
@@ -189,33 +195,8 @@ function UserDropdown() {
 							</div>
 						</Link>
 					</DropdownMenuItem>
-					{/* <div className="border-b p-2">
-						<div className="p-2 text-xs font-bold">BACKER</div>
-						<DropdownMenuItem asChild className="p-2">
-							<Link prefetch="intent" to="/" className="hover:bg-muted/30">
-								Home
-							</Link>
-						</DropdownMenuItem>
-						<DropdownMenuItem asChild className="p-2">
-							<Link
-								prefetch="intent"
-								to="/projects"
-								className="hover:bg-muted/30"
-							>
-								Discover
-							</Link>
-						</DropdownMenuItem>
-						<DropdownMenuItem asChild className="p-2">
-							<Link
-								prefetch="intent"
-								to="/studio/backed-projects"
-								className="hover:bg-muted/30"
-							>
-								Backed Projects
-							</Link>
-						</DropdownMenuItem>
-					</div> */}
-					<div className="border-b p-2">
+					<hr />
+					<div className="p-2">
 						<div className="p-2 text-xs font-bold">DASHBOARD</div>
 						<DropdownMenuItem asChild className="p-2">
 							<Link
@@ -245,14 +226,15 @@ function UserDropdown() {
 							</Link>
 						</DropdownMenuItem>
 					</div>
+					<hr />
 					<DropdownMenuItem
 						asChild
 						// this prevents the menu from closing before the form submission is completed
 						onSelect={event => {
 							event.preventDefault()
 							submit(formRef.current)
 						}}
-						className="cursor-pointer p-4 text-sm"
+						className="cursor-pointer p-4  text-sm"
 					>
 						<Form
 							action="/logout"

app/components/layout/mobile-nav.tsx

@@ -1,12 +1,12 @@
-import { Link } from '@remix-run/react'
+import { Link, NavLink } from '@remix-run/react'
 import { Icon } from '../ui/icon.tsx'
 import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet.tsx'
 
 export function MobileNav({
 	menuItems,
 }: {
 	menuItems?: {
-		title: string
+		title?: string
 		items: {
 			title: string
 			href: string
@@ -24,46 +24,31 @@ export function MobileNav({
 				className="h-screen overflow-y-auto border lg:hidden"
 			>
 				<div className="flex flex-col gap-4">
-					<div className="inline-flex">
-						<svg
-							className="mr-2 text-primary"
-							width="30"
-							height="30"
-							viewBox="0 0 97 85"
-							fill="none"
-						>
-							<path
-								d="M96.1608 1.3148C98.5608 36.1148 73.4941 47.1481 60.6608 48.3148C81.8608 52.3148 84.4941 71.9815 83.1608 81.3148C57.9608 85.3148 50.9941 60.9815 50.6608 48.3148C51.8608 5.9148 81.4941 -0.685196 96.1608 1.3148Z"
-								fill="currentColor"
-								stroke="currentColor"
-							/>
-							<path
-								d="M1.16077 1.3148C-1.23923 36.1148 23.8274 47.1481 36.6608 48.3148C15.4608 52.3148 12.8274 71.9815 14.1608 81.3148C39.3608 85.3148 46.3274 60.9815 46.6608 48.3148C45.4608 5.9148 15.8274 -0.685196 1.16077 1.3148Z"
-								fill="currentColor"
-								stroke="currentColor"
-							/>
-						</svg>
-						<span className="text-2xl font-black text-primary">
-							BloomBacker
-						</span>
-					</div>
+					<Link to="/" className="text-h4 font-semibold text-primary">
+						䷸ Book<span className="text-cyan-400">Breeze</span>
+					</Link>
 
 					<ul className="divide-y">
 						{menuItems?.map(item => (
 							<li key={item.title} className="py-4">
-								<div className="px-2 text-xl font-bold text-primary">
-									{item.title}
-								</div>
+								{item.title && (
+									<div className="p-1 text-xl font-bold text-cyan-400">
+										{item.title}
+									</div>
+								)}
 
-								<ul>
+								<ul className="flex flex-col gap-1">
 									{item.items.map(subItem => (
 										<li key={subItem.title}>
-											<Link
+											<NavLink
 												to={subItem.href}
-												className="block cursor-none rounded-md p-2 transition hover:text-primary hover:underline"
+												className={({ isActive }) =>
+													`flex rounded-lg p-1 px-2 hover:bg-border ${isActive ? 'bg-border' : ''}`
+												}
+												end
 											>
 												{subItem.title}
-											</Link>
+											</NavLink>
 										</li>
 									))}
 								</ul>

app/components/search-bar.tsx

@@ -59,7 +59,7 @@ export function SearchBar({
 					id={id}
 					defaultValue={defaultValue}
 					placeholder="Search"
-					className="w-full"
+					className="h-full w-full"
 					// autoFocus={autoFocusSearch}
 				/>
 			</div>

app/components/theme-switcher.tsx

@@ -7,6 +7,7 @@ import {
 } from '#app/root'
 import { type Theme } from '#app/utils/theme.server'
 import { Icon } from './ui/icon'
+import { Button } from './ui/button'
 
 // export function ThemeSwitch({
 // 	userPreference,
@@ -51,12 +52,14 @@ export function ThemeSwitch() {
 		<fetcher.Form method="POST" action="/" {...getFormProps(form)}>
 			<input type="hidden" name="theme" value={nextMode} />
 			<div className="flex gap-2">
-				<button
+				<Button
+					variant="outline_2"
 					type="submit"
-					className="flex h-8 w-8 cursor-pointer items-center justify-center"
+					size="icon"
+					className="rounded-full"
 				>
 					{modeLabel[mode]}
-				</button>
+				</Button>
 			</div>
 		</fetcher.Form>
 	)

app/components/ui/icon.tsx

@@ -46,9 +46,7 @@ export function Icon({
 }) {
 	if (children) {
 		return (
-			<span
-				className={`inline-flex items-center ${childrenSizeClassName[size]}`}
-			>
+			<span className={`flex items-center ${childrenSizeClassName[size]}`}>
 				<Icon name={name} size={size} className={className} {...props} />
 				{children}
 			</span>
@@ -57,7 +55,7 @@ export function Icon({
 	return (
 		<svg
 			{...props}
-			className={cn(sizeClassName[size], 'inline self-center', className)}
+			className={cn(sizeClassName[size], 'flex items-center', className)}
 		>
 			<use href={`${href}#${name}`} />
 		</svg>

app/root.tsx

@@ -215,13 +215,13 @@ function App() {
 			<div className="flex h-screen flex-col justify-between">
 				<Outlet />
 
-				<div>
+				{/* <div>
 					<hr className="border-primary" />
 					<div className="container flex justify-between p-6">
 						<Logo />
 						<ThemeSwitch />
 					</div>
-				</div>
+				</div> */}
 			</div>
 			<EpicToaster closeButton position="top-center" theme={theme} />
 			<EpicProgress />

app/routes/c.$companyId+/_layout_company.tsx

@@ -1,5 +1,10 @@
 import { Link, NavLink, Outlet } from '@remix-run/react'
+import { UserDropdown } from '#app/components/layout/header'
+import { MobileNav } from '#app/components/layout/mobile-nav'
+import { SearchBar } from '#app/components/search-bar'
 import { ThemeSwitch } from '#app/components/theme-switcher'
+import { Button } from '#app/components/ui/button'
+import { Icon } from '#app/components/ui/icon'
 
 const companyRoutes = [
 	{
@@ -20,17 +25,57 @@ const companyRoutes = [
 	},
 ]
 
+const mobileCompanyRoutes = [
+	{
+		title: 'General',
+		items: [
+			{
+				title: 'Dashboard',
+				href: '',
+			},
+			{
+				title: 'Accounts',
+				href: 'accounts',
+			},
+			{
+				title: 'Sales',
+				href: 'sales',
+			},
+			{
+				title: 'Purchase',
+				href: 'purchase',
+			},
+			{
+				title: 'Reports',
+				href: 'reports',
+			},
+		],
+	},
+]
+
 export default function LayoutCompany() {
 	return (
-		<div className="relative flex min-h-full flex-col lg:flex-row">
-			<nav className="border-r bg-muted p-4 lg:w-2/12">
-				<Link
-					to="/"
-					className="px-2 text-h5 font-semibold text-primary md:text-h4"
-				>
-					䷸ Book<span className="text-sky-400">Breeze</span>
-				</Link>
-				<ul className="my-10 text-lg font-semibold">
+		<div className="relative flex flex-col lg:flex-row">
+			<nav className="top-0 border-r bg-muted/50 p-4 lg:sticky lg:h-screen lg:w-2/12">
+				<div className="flex items-center justify-between">
+					<div className="flex">
+						<MobileNav menuItems={mobileCompanyRoutes} />
+
+						<Link to="/" className="px-2 text-h4 font-semibold text-primary">
+							䷸ Book<span className="text-cyan-400">Breeze</span>
+						</Link>
+					</div>
+					{/* <Link to="search" className="lg:hidden">
+						<Button size="sm">
+							<Icon name="magnifying-glass" size="sm" />
+							<span className="sr-only">Search</span>
+						</Button>
+					</Link> */}
+					<span className="lg:hidden">
+						<UserDropdown />
+					</span>
+				</div>
+				<ul className="my-10 hidden text-lg font-semibold lg:block">
 					<li>
 						<NavLink
 							className={({ isActive }) =>
@@ -56,10 +101,24 @@ export default function LayoutCompany() {
 						</li>
 					))}
 				</ul>
-				<ThemeSwitch />
 			</nav>
 
-			<section className="overflow-y-auto bg-red-400 p-4 lg:w-10/12">
+			<section className="flex flex-col gap-4 p-4 lg:w-10/12">
+				<header className="hidden w-full justify-between gap-4 lg:flex">
+					{/* {!isProjectPage && ( */}
+					<SearchBar
+						action="/search"
+						status="idle"
+						className="hidden max-w-lg lg:flex"
+					/>
+					{/* )} */}
+
+					<div className="flex gap-4">
+						<ThemeSwitch />
+						<UserDropdown />
+					</div>
+				</header>
+
 				<Outlet />
 			</section>
 		</div>

app/routes/c.$companyId+/index.tsx

@@ -1,6 +1,6 @@
 export default function CompanyIndex() {
 	return (
-		<div className="h-[1500px] overflow-y-auto">
+		<div className="bg-red-400">
 			<h1>Company Route</h1>
 		</div>
 	)