add floating navbar
This commit is contained in:
vergiLgood1
parent
7de1201675
commit
3ba462d797
|
|
@ -23,7 +23,7 @@ import {
|
|||
import { MoreHorizontal } from "lucide-react";
|
||||
import { InboxDrawer } from "@/components/inbox-drawer";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
import ActionSearchBar from "@/components/action-search-bar";
|
||||
import FloatingActionSearchBar from "@/components/floating-action-search-bar";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default async function Layout({
|
||||
|
|
@ -37,47 +37,45 @@ export default async function Layout({
|
|||
<SidebarInset>
|
||||
{/* Navigation bar with SidebarTrigger and Breadcrumbs */}
|
||||
<nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="flex h-12 items-center px-4">
|
||||
<SidebarTrigger className="" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="#">Crime Management</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Crime Overview</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<div className="flex h-16 shrink-0 items-center justify-end border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<SidebarTrigger className="" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="#">Sigap - v</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Map</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<InboxDrawer showTitle={true} showAvatar={false} />
|
||||
<ThemeSwitcher showTitle={true} />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-5 w-5" />
|
||||
<span className="sr-only">More options</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Help</DropdownMenuItem>
|
||||
<DropdownMenuItem>About</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Header with action bar and other controls */}
|
||||
<header className="flex h-16 shrink-0 items-center justify-between border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
||||
<div className="w-[300px]">
|
||||
<ActionSearchBar />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<InboxDrawer showTitle={true} showAvatar={false} />
|
||||
<ThemeSwitcher showTitle={true} />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-5 w-5" />
|
||||
<span className="sr-only">More options</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Help</DropdownMenuItem>
|
||||
<DropdownMenuItem>About</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
{/* Header with other controls */}
|
||||
<header className="flex h-12 shrink-0 items-center justify-end border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-8"></header>
|
||||
<FloatingActionSearchBar />
|
||||
{children}
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import React, { useState, useEffect, forwardRef, useImperativeHandle } from "react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { Search, Send, BarChart2, Globe, Video, PlaneTakeoff, AudioLines } from "lucide-react"
|
||||
|
|
@ -64,171 +62,179 @@ const allActions = [
|
|||
},
|
||||
]
|
||||
|
||||
function ActionSearchBar({ actions = allActions }: { actions?: Action[] }) {
|
||||
const [query, setQuery] = useState("")
|
||||
const [result, setResult] = useState<SearchResult | null>(null)
|
||||
const [isFocused, setIsFocused] = useState(false)
|
||||
const [isTyping, setIsTyping] = useState(false)
|
||||
const [selectedAction, setSelectedAction] = useState<Action | null>(null)
|
||||
const debouncedQuery = useDebounce(query, 200)
|
||||
interface ActionSearchBarProps {
|
||||
actions?: Action[]
|
||||
autoFocus?: boolean
|
||||
isFloating?: boolean
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isFocused) {
|
||||
setResult(null)
|
||||
return
|
||||
const ActionSearchBar = forwardRef<HTMLInputElement, ActionSearchBarProps>(
|
||||
({ actions = allActions, autoFocus = false, isFloating = false }, ref) => {
|
||||
const [query, setQuery] = useState("")
|
||||
const [result, setResult] = useState<SearchResult | null>(null)
|
||||
const [isFocused, setIsFocused] = useState(autoFocus)
|
||||
const [selectedAction, setSelectedAction] = useState<Action | null>(null)
|
||||
const debouncedQuery = useDebounce(query, 200)
|
||||
const inputRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
|
||||
|
||||
useEffect(() => {
|
||||
if (autoFocus && inputRef.current) {
|
||||
inputRef.current.focus()
|
||||
}
|
||||
}, [autoFocus])
|
||||
|
||||
useEffect(() => {
|
||||
if (!debouncedQuery) {
|
||||
setResult({ actions: allActions })
|
||||
return
|
||||
}
|
||||
|
||||
const normalizedQuery = debouncedQuery.toLowerCase().trim()
|
||||
const filteredActions = allActions.filter((action) => {
|
||||
const searchableText = action.label.toLowerCase()
|
||||
return searchableText.includes(normalizedQuery)
|
||||
})
|
||||
|
||||
setResult({ actions: filteredActions })
|
||||
}, [debouncedQuery])
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setQuery(e.target.value)
|
||||
}
|
||||
|
||||
if (!debouncedQuery) {
|
||||
setResult({ actions: allActions })
|
||||
return
|
||||
}
|
||||
|
||||
const normalizedQuery = debouncedQuery.toLowerCase().trim()
|
||||
const filteredActions = allActions.filter((action) => {
|
||||
const searchableText = action.label.toLowerCase()
|
||||
return searchableText.includes(normalizedQuery)
|
||||
})
|
||||
|
||||
setResult({ actions: filteredActions })
|
||||
}, [debouncedQuery, isFocused])
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setQuery(e.target.value)
|
||||
setIsTyping(true)
|
||||
}
|
||||
|
||||
const container = {
|
||||
hidden: { opacity: 0, height: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
height: "auto",
|
||||
transition: {
|
||||
height: {
|
||||
duration: 0.4,
|
||||
const container = {
|
||||
hidden: { opacity: 0, height: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
height: "auto",
|
||||
transition: {
|
||||
height: {
|
||||
duration: 0.4,
|
||||
},
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
height: 0,
|
||||
transition: {
|
||||
height: {
|
||||
exit: {
|
||||
opacity: 0,
|
||||
height: 0,
|
||||
transition: {
|
||||
height: {
|
||||
duration: 0.3,
|
||||
},
|
||||
opacity: {
|
||||
duration: 0.2,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const item = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.3,
|
||||
},
|
||||
opacity: {
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -10,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const item = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.3,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -10,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
setSelectedAction(null)
|
||||
setIsFocused(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="What's up?"
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
onFocus={handleFocus}
|
||||
onBlur={() => setTimeout(() => setIsFocused(false), 200)}
|
||||
className="pl-3 pr-9 py-1.5 h-9 text-sm rounded-lg focus-visible:ring-offset-0"
|
||||
/>
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{query.length > 0 ? (
|
||||
<motion.div
|
||||
key="send"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 20, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Send className="w-4 h-4 text-gray-400 dark:text-gray-500" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="search"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 20, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Search className="w-4 h-4 text-gray-400 dark:text-gray-500" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{isFocused && result && !selectedAction && (
|
||||
<motion.div
|
||||
className="absolute left-0 right-0 z-50 border rounded-md shadow-lg overflow-hidden dark:border-gray-800 bg-background mt-1"
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
exit="exit"
|
||||
>
|
||||
<motion.ul>
|
||||
{result.actions.map((action) => (
|
||||
<motion.li
|
||||
key={action.id}
|
||||
className="px-3 py-2 flex items-center justify-between hover:bg-accent hover:text-accent-foreground cursor-pointer"
|
||||
variants={item}
|
||||
layout
|
||||
onClick={() => setSelectedAction(action)}
|
||||
return (
|
||||
<div className={`relative w-full ${isFloating ? "bg-background rounded-lg shadow-lg" : ""}`}>
|
||||
<div className="relative">
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder="What's up?"
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => !isFloating && setTimeout(() => setIsFocused(false), 200)}
|
||||
className="pl-3 pr-9 py-1.5 h-9 text-sm rounded-lg focus-visible:ring-offset-0"
|
||||
/>
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{query.length > 0 ? (
|
||||
<motion.div
|
||||
key="send"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 20, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-500">{action.icon}</span>
|
||||
<span className="text-sm font-medium">{action.label}</span>
|
||||
<span className="text-xs text-muted-foreground">{action.description}</span>
|
||||
<Send className="w-4 h-4 text-gray-400 dark:text-gray-500" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="search"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 20, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Search className="w-4 h-4 text-gray-400 dark:text-gray-500" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{(isFocused || isFloating) && result && !selectedAction && (
|
||||
<motion.div
|
||||
className={`${isFloating ? "relative mt-2" : "absolute left-0 right-0 z-50"} border rounded-md shadow-lg overflow-hidden dark:border-gray-800 bg-background`}
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
exit="exit"
|
||||
>
|
||||
<motion.ul>
|
||||
{result.actions.map((action) => (
|
||||
<motion.li
|
||||
key={action.id}
|
||||
className="px-3 py-2 flex items-center justify-between hover:bg-accent hover:text-accent-foreground cursor-pointer"
|
||||
variants={item}
|
||||
layout
|
||||
onClick={() => setSelectedAction(action)}
|
||||
>
|
||||
<div className="flex items-center gap-2 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-500">{action.icon}</span>
|
||||
<span className="text-sm font-medium">{action.label}</span>
|
||||
<span className="text-xs text-muted-foreground">{action.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{action.short}</span>
|
||||
<span className="text-xs text-muted-foreground text-right">{action.end}</span>
|
||||
</div>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ul>
|
||||
<div className="mt-2 px-3 py-2 border-t border-border">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>Press ⌘K to open commands</span>
|
||||
<span>ESC to cancel</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{action.short}</span>
|
||||
<span className="text-xs text-muted-foreground text-right">{action.end}</span>
|
||||
</div>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ul>
|
||||
<div className="mt-2 px-3 py-2 border-t border-border">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>Press ⌘K to open commands</span>
|
||||
<span>ESC to cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
ActionSearchBar.displayName = "ActionSearchBar"
|
||||
|
||||
export default ActionSearchBar
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import ActionSearchBar from "@/components/action-search-bar";
|
||||
|
||||
export default function FloatingActionSearchBar() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const searchBarRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
||||
event.preventDefault();
|
||||
setIsOpen((prev) => !prev);
|
||||
} else if (event.key === "Escape") {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && searchBarRef.current) {
|
||||
searchBarRef.current.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 z-50 flex items-start justify-center bg-background/80 backdrop-blur-sm p-4 sm:p-6 md:p-8 lg:p-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, y: -20 }}
|
||||
animate={{ scale: 1, y: 0 }}
|
||||
exit={{ scale: 0.95, y: -20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-full max-w-lg sm:max-w-xl md:max-w-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ActionSearchBar
|
||||
ref={searchBarRef}
|
||||
autoFocus={true}
|
||||
isFloating={true}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue