tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

Fixed navbar & removed enter animation

Browse source
This commit is contained in:
Alois 2026-04-07 00:16:24 +02:00
commit cdb0fdbf76
2 changed files with 79 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

150
apps/web/src/components/navbar.tsx
View file

@ -34,84 +34,88 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
data-tauri-drag-region data-tauri-drag-region
className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`} className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`}
> >
{forMobile ? ( <div className="flex items-center justify-center gap-2">
<SidebarTrigger {forMobile ? (
className="w-9 h-9 aspect-square rounded-lg ml-2" <SidebarTrigger
variant="outline" className="w-9 h-9 aspect-square rounded-lg ml-2"
> variant="outline"
<ArrowLeft className="size-4.5" /> >
</SidebarTrigger> <ArrowLeft className="size-4.5" />
) : ( </SidebarTrigger>
<Button ) : (
onClick={() => navigate({ to: "/" })} <Button
className="w-9 h-9 aspect-square rounded-lg" onClick={() => navigate({ to: "/" })}
variant="outline" className="w-9 h-9 aspect-square rounded-lg"
> variant="outline"
<House className="size-4.5" /> >
</Button> <House className="size-4.5" />
)} </Button>
{pathname === "/chat" && ( )}
<Wrapper {pathname === "/chat" && (
userId={id} <Wrapper
component={(user) => ( userId={id}
<p className="font-medium text-md">{user?.display}</p> component={(user) => (
)} <p className="font-medium text-md">{user?.display}</p>
loading={<Skeleton className="ml-3 w-40 h-5" />} )}
/> loading={<Skeleton className="ml-3 w-40 h-5" />}
)} />
)}
</div>
{/* Empty space */} {/* Empty space */}
{pathname === "/chat" && id && ( <div className="flex items-center justify-center gap-2">
<> {pathname === "/chat" && id && (
{currentCalls.length === 0 ? ( <>
<Button {currentCalls.length === 0 ? (
disabled={state !== "closed"}
onClick={() => {
joinCall(id);
}}
className="w-9 h-9 aspect-square rounded-lg mr-2"
variant="outline"
>
<Phone />
</Button>
) : currentCalls.length === 1 ? (
<Button
disabled={state !== "closed"}
onClick={() => {
joinCall(id, currentCalls[0]);
}}
className="w-9 h-9 aspect-square rounded-lg"
>
<Phone />
</Button>
) : (
<>
<Button <Button
onClick={() => setSelectOpen((prev) => !prev)} disabled={state !== "closed"}
className="w-9! h-9! aspect-square rounded-lg" onClick={() => {
joinCall(id);
}}
className="w-9 h-9 aspect-square rounded-lg"
variant="outline"
> >
<Phone /> <Phone />
</Button> </Button>
<Select onOpenChange={setSelectOpen} open={selectOpen}> ) : currentCalls.length === 1 ? (
<SelectTrigger hidden /> <Button
<SelectContent> disabled={state !== "closed"}
{currentCalls.map((callId) => ( onClick={() => {
<SelectItem joinCall(id, currentCalls[0]);
value={callId} }}
key={callId} className="w-9 h-9 aspect-square rounded-lg"
onSelect={() => { >
joinCall(id, callId); <Phone />
}} </Button>
> ) : (
{displayCallId(callId)} <>
</SelectItem> <Button
))} onClick={() => setSelectOpen((prev) => !prev)}
</SelectContent> className="w-9! h-9! aspect-square rounded-lg"
</Select> >
</> <Phone />
)} </Button>
</> <Select onOpenChange={setSelectOpen} open={selectOpen}>
)} <SelectTrigger hidden />
<Controls className="mr-2 ring-border" notPresentClassName="mr-2" /> <SelectContent>
{currentCalls.map((callId) => (
<SelectItem
value={callId}
key={callId}
onSelect={() => {
joinCall(id, callId);
}}
>
{displayCallId(callId)}
</SelectItem>
))}
</SelectContent>
</Select>
</>
)}
</>
)}
<Controls className="mr-2 ring-border" />
</div>
</div> </div>
); );
} }

23
apps/web/src/routes/app/layout.tsx
View file

@ -6,7 +6,6 @@ import Navbar, { MobileNavbar } from "@/components/navbar";
import { SidebarProvider } from "@tensamin/ui/cmp/sidebar"; import { SidebarProvider } from "@tensamin/ui/cmp/sidebar";
import { useIsMobile, cn } from "@tensamin/ui/utils"; import { useIsMobile, cn } from "@tensamin/ui/utils";
import { motion } from "framer-motion";
import { isTauri } from "@tauri-apps/api/core"; import { isTauri } from "@tauri-apps/api/core";
import { useLocation } from "@tanstack/react-router"; import { useLocation } from "@tanstack/react-router";
@ -20,20 +19,7 @@ export default function Layout(props: { children: ReactNode }) {
const location = useLocation(); const location = useLocation();
return ( return (
<motion.div <div className="w-full h-full flex bg-sidebar">
className="w-full h-full flex bg-sidebar"
initial={{ y: -40, scale: 0.95, borderRadius: "1rem" }}
animate={{ y: 0, scale: 1, borderRadius: 0 }}
transition={{
borderRadius: { duration: animationTiming.first, ease: "easeOut" },
y: { duration: animationTiming.first, ease: "easeOut" },
scale: {
delay: animationTiming.first,
duration: animationTiming.second,
ease: "easeOut",
},
}}
>
<SidebarProvider> <SidebarProvider>
<Sidebar /> <Sidebar />
<div <div
@ -58,11 +44,6 @@ export default function Layout(props: { children: ReactNode }) {
{isMobile && location.pathname !== "/chat" && <MobileNavbar />} {isMobile && location.pathname !== "/chat" && <MobileNavbar />}
</div> </div>
</SidebarProvider> </SidebarProvider>
</motion.div> </div>
); );
} }
const animationTiming = {
first: 0.18,
second: 0.1,
};