diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add floating navbar

This commit is contained in:
vergiLgood1 2025-02-21 19:27:54 +07:00
parent 7de1201675
commit 3ba462d797
3 changed files with 257 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
sigap-website/app/protected/(admin-pages)/layout.tsx
View File

@ -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,29 +37,22 @@ 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">
<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="#">Crime Management</BreadcrumbLink>
<BreadcrumbLink href="#">Sigap - v</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Crime Overview</BreadcrumbPage>
<BreadcrumbPage>Map</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</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} />
@ -77,7 +70,12 @@ export default async function Layout({
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
</div>
</nav>
{/* 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>

62
sigap-website/components/action-search-bar.tsx
View File

@ -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,20 +62,30 @@ 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)
useEffect(() => {
if (!isFocused) {
setResult(null)
return
interface ActionSearchBarProps {
actions?: Action[]
autoFocus?: boolean
isFloating?: boolean
}
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
@ -90,11 +98,10 @@ function ActionSearchBar({ actions = allActions }: { actions?: Action[] }) {
})
setResult({ actions: filteredActions })
}, [debouncedQuery, isFocused])
}, [debouncedQuery])
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setQuery(e.target.value)
setIsTyping(true)
}
const container = {
@ -141,21 +148,17 @@ function ActionSearchBar({ actions = allActions }: { actions?: Action[] }) {
},
}
const handleFocus = () => {
setSelectedAction(null)
setIsFocused(true)
}
return (
<div className="relative w-full">
<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={handleFocus}
onBlur={() => setTimeout(() => setIsFocused(false), 200)}
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">
@ -186,9 +189,9 @@ function ActionSearchBar({ actions = allActions }: { actions?: Action[] }) {
</div>
<AnimatePresence>
{isFocused && result && !selectedAction && (
{(isFocused || isFloating) && 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"
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"
@ -228,7 +231,10 @@ function ActionSearchBar({ actions = allActions }: { actions?: Action[] }) {
</AnimatePresence>
</div>
)
}
},
)
ActionSearchBar.displayName = "ActionSearchBar"
export default ActionSearchBar

60
sigap-website/components/floating-action-search-bar.tsx Normal file
View File

@ -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>
);
}