Skip to content

Commit 8985b57

Browse files
itsskofficialitsskofficial
committed
fix (ui): responsive navbar
1 parent 5632abe commit 8985b57

6 files changed

Lines changed: 137 additions & 104 deletions

File tree

‎src/client/app/chat/[[...chatId]]/page.js‎

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ const UseCaseGrid = ({ useCases, onSelectPrompt }) => {
309309
>
310310
{useCase.action}{" "}
311311
<span className="transition-transform group-hover:translate-x-1">
312-
›
312+
���
313313
</span>
314314
</button>
315315
</motion.div>
@@ -634,7 +634,7 @@ export default function ChatPage({ params }) {
634634
}
635635

636636
return (
637-
<div className="flex-1 flex h-screen bg-black text-white overflow-hidden md:pl-20">
637+
<div className="flex-1 flex bg-black text-white overflow-hidden md:pl-20">
638638
<Tooltip id="home-tooltip" place="right" style={{ zIndex: 9999 }} />
639639
<ChatHistorySidebar
640640
chatList={chatList}
@@ -646,7 +646,7 @@ export default function ChatPage({ params }) {
646646
onClose={() => setIsHistoryOpen(false)}
647647
isSidebarOpen={isHistoryOpen}
648648
/>
649-
<div className="flex flex-col flex-1 relative bg-black">
649+
<div className="flex flex-col flex-1 relative bg-black pb-16 md:pb-0">
650650
<div className="absolute top-6 left-6 z-20 flex items-center gap-1">
651651
<button
652652
onClick={() => setIsHistoryOpen(!isHistoryOpen)}
@@ -693,11 +693,10 @@ export default function ChatPage({ params }) {
693693
<div className="w-full max-w-4xl mx-auto mt-12">
694694
<div className="w-full max-w-4xl mx-auto">
695695
<div
696-
className="p-0.5 rounded-2xl ${
697-
!isFocused
698-
? 'p-0.5 bg-gradient-to-tr from-blue-500 to-cyan-500'
699-
: ''
700-
} shadow-2xl shadow-black/40"
696+
className={cn(
697+
"rounded-2xl shadow-2xl shadow-black/40",
698+
!isFocused && "p-0.5 bg-gradient-to-tr from-blue-500 to-cyan-500"
699+
)}
701700
>
702701
<div className="relative bg-neutral-900 rounded-[15px] flex items-end">
703702
<textarea
@@ -815,53 +814,59 @@ export default function ChatPage({ params }) {
815814
</main>
816815

817816
{messages.length > 0 && !isLoadingMessages && (
818-
<footer className="p-4 sm:p-6 z-10">
819-
<div
820-
className={`w-full max-w-4xl mx-auto p-0.5 rounded-2xl ${
821-
!isFocused
822-
? "p-0.5 bg-gradient-to-tr from-blue-500 to-cyan-500"
823-
: ""
824-
} shadow-2xl shadow-black/40`}
825-
>
826-
<div className="relative bg-neutral-900 rounded-[15px] flex items-end">
827-
<textarea
828-
ref={textareaRef}
829-
value={input}
830-
onChange={handleInputChange}
831-
onKeyDown={(e) => {
832-
if (e.key === "Enter" && !e.shiftKey) {
833-
e.preventDefault()
834-
sendMessage()
835-
}
836-
}}
837-
placeholder="Ask me anything..."
838-
className="w-full p-4 pr-24 bg-transparent text-base text-white placeholder-neutral-500 resize-none focus:outline-none overflow-y-auto custom-scrollbar"
839-
rows={1}
840-
style={{ maxHeight: "200px" }}
841-
/>
842-
<div className="absolute right-3 bottom-3 flex items-center gap-2">
843-
{thinking ? (
844-
<button
845-
onClick={handleStopStreaming}
846-
className="p-2.5 rounded-full text-white bg-red-600 hover:bg-red-500 transition-colors"
847-
data-tooltip-id="home-tooltip"
848-
data-tooltip-content="Stop Generation"
849-
>
850-
<IconPlayerStopFilled size={18} />
851-
</button>
852-
) : (
853-
<button
854-
onClick={sendMessage}
855-
disabled={!input.trim()}
856-
className="p-2.5 bg-gradient-to-tr from-blue-500 to-cyan-500 rounded-full text-white disabled:opacity-50 hover:from-blue-400 hover:to-cyan-400 transition-all shadow-md"
857-
>
858-
<IconSend size={18} />
859-
</button>
860-
)}
817+
<div className="px-4 pt-2 pb-4 sm:px-6 sm:pb-6 bg-black border-t border-neutral-800/50">
818+
<div className="w-full max-w-4xl mx-auto">
819+
<div
820+
className={cn(
821+
"rounded-2xl shadow-2xl shadow-black/40",
822+
!isFocused && "p-0.5 bg-gradient-to-tr from-blue-500 to-cyan-500"
823+
)}
824+
>
825+
<div className="relative bg-neutral-900 rounded-[15px] flex items-end">
826+
<textarea
827+
ref={textareaRef}
828+
value={input}
829+
onChange={handleInputChange}
830+
onFocus={() => setIsFocused(true)}
831+
onBlur={() => setIsFocused(false)}
832+
onKeyDown={(e) => {
833+
if (
834+
e.key === "Enter" &&
835+
!e.shiftKey
836+
) {
837+
e.preventDefault()
838+
sendMessage()
839+
}
840+
}}
841+
placeholder="Ask me anything..."
842+
className="w-full p-4 pr-24 bg-transparent text-base text-white placeholder-neutral-500 resize-none focus:outline-none overflow-y-auto custom-scrollbar"
843+
rows={1}
844+
style={{ maxHeight: "200px" }}
845+
/>
846+
<div className="absolute right-3 bottom-3 flex items-center gap-2">
847+
{thinking ? (
848+
<button
849+
onClick={handleStopStreaming}
850+
className="p-2.5 rounded-full text-white bg-red-600 hover:bg-red-500 transition-colors"
851+
data-tooltip-id="home-tooltip"
852+
data-tooltip-content="Stop Generation"
853+
>
854+
<IconPlayerStopFilled size={18} />
855+
</button>
856+
) : (
857+
<button
858+
onClick={sendMessage}
859+
disabled={!input.trim()}
860+
className="p-2.5 bg-gradient-to-tr from-blue-500 to-cyan-500 rounded-full text-white disabled:opacity-50 hover:from-blue-400 hover:to-cyan-400 transition-all shadow-md"
861+
>
862+
<IconSend size={18} />
863+
</button>
864+
)}
865+
</div>
861866
</div>
862867
</div>
863868
</div>
864-
</footer>
869+
</div>
865870
)}
866871
</div>
867872
</div>

‎src/client/app/home/page.js‎

Whitespace-only changes.

‎src/client/app/integrations/page.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -700,7 +700,7 @@ const IntegrationsPage = () => {
700700
}, [fetchIntegrations])
701701

702702
return (
703-
<div className="flex-1 flex h-screen bg-[var(--color-primary-background)] text-[var(--color-text-primary)] overflow-x-hidden md:pl-20">
703+
<div className="flex-1 flex h-screen bg-dark-surface text-white overflow-x-hidden">
704704
<Tooltip
705705
id="integrations-tooltip"
706706
place="right-start"
@@ -711,10 +711,10 @@ const IntegrationsPage = () => {
711711
place="right-start"
712712
style={{ zIndex: 9999 }}
713713
/>
714-
<div className="flex-1 flex flex-col overflow-hidden relative">
715-
<header className="flex items-center justify-between p-4 sm:p-6 md:px-8 md:py-6 bg-[var(--color-primary-background)] border-b border-[var(--color-primary-surface)]">
714+
<div className="flex-1 flex flex-col overflow-hidden relative bg-dark-surface md:pl-20 pb-16 md:pb-0">
715+
<header className="flex items-center justify-between p-4 sm:p-6 md:px-8 md:py-6 bg-dark-surface border-b border-[var(--color-primary-surface)] shrink-0">
716716
<HelpTooltip content="Connect your apps here. This allows Sentient to access information and perform actions on your behalf." />
717-
<h1 className="text-3xl lg:text-4xl font-semibold text-[var(--color-text-primary)] flex items-center gap-3">
717+
<h1 className="text-3xl lg:text-4xl font-semibold text-white flex items-center gap-3">
718718
Integrations
719719
</h1>
720720
{/* This empty div is to help the justify-between on the header */}

‎src/client/app/settings/page.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -791,7 +791,7 @@ const AIPersonalitySettings = () => {
791791

792792
const handleNotificationChange = (field) => {
793793
setSettings((prev) => ({
794-
...prev,
794+
...prev.notificationControls,
795795
notificationControls: {
796796
...prev.notificationControls,
797797
[field]: !prev.notificationControls[field]
@@ -1426,7 +1426,7 @@ const ProfilePage = () => {
14261426
)
14271427

14281428
return (
1429-
<div className="flex-1 flex h-screen bg-[var(--color-primary-background)] text-[var(--color-text-primary)] overflow-x-hidden md:pl-20">
1429+
<div className="flex-1 flex h-screen bg-[var(--color-primary-background)] text-[var(--color-text-primary)] overflow-x-hidden">
14301430
<Tooltip
14311431
id="settings-tooltip"
14321432
place="right-start"
@@ -1437,7 +1437,7 @@ const ProfilePage = () => {
14371437
place="right-start"
14381438
style={{ zIndex: 9999 }}
14391439
/>
1440-
<div className="flex-1 flex flex-col overflow-hidden relative w-full">
1440+
<div className="flex-1 flex flex-col overflow-hidden relative w-full md:pl-20 pb-16 md:pb-0">
14411441
<main className="flex-1 overflow-y-auto p-4 sm:p-6 md:p-10 custom-scrollbar">
14421442
<HelpTooltip content="Customize your experience here. Teach Sentient about yourself, change its personality, manage notifications, and connect your LinkedIn profile." />
14431443
<div className="w-full max-w-5xl mx-auto space-y-10">

‎src/client/app/tasks/page.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const StorylaneDemoModal = ({ onClose }) => {
4848
<div className="relative flex justify-between items-center pb-6 flex-shrink-0 z-10">
4949
<div>
5050
<h2 className="text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-purple-100 bg-clip-text text-transparent drop-shadow-2xl">
51-
🎥 Interactive Walkthrough
51+
���� Interactive Walkthrough
5252
</h2>
5353
<div className="w-1/3 h-1 bg-gradient-to-r from-blue-500/50 via-purple-500/50 to-pink-500/50 rounded-full blur-sm mt-2" />
5454
</div>
@@ -387,14 +387,14 @@ function TasksPageContent() {
387387
)
388388

389389
return (
390-
<div className="flex-1 flex h-screen bg-[var(--color-primary-background)] text-[var(--color-text-primary)] overflow-hidden font-Inter md:pl-20">
390+
<div className="flex-1 flex h-screen bg-dark-surface text-white overflow-hidden font-Inter">
391391
<Tooltip
392392
id="tasks-tooltip"
393393
place="right-start"
394394
style={{ zIndex: 9999 }}
395395
/>
396396

397-
<div className="flex flex-1 overflow-hidden relative">
397+
<div className="flex flex-1 overflow-hidden relative bg-dark-surface md:pl-20 pb-16 md:pb-0">
398398
<main
399399
className={cn(
400400
"flex-1 flex flex-col overflow-hidden",
@@ -470,7 +470,7 @@ export default function TasksPage() {
470470
return (
471471
<Suspense
472472
fallback={
473-
<div className="flex-1 flex h-screen bg-[var(--color-primary-background)] text-[var(--color-text-primary)] overflow-hidden pl-0 md:pl-20 justify-center items-center">
473+
<div className="flex-1 flex h-screen bg-dark-surface text-white overflow-hidden justify-center items-center">
474474
<IconLoader className="w-10 h-10 animate-spin text-[var(--color-accent-blue)]" />
475475
</div>
476476
}

‎src/client/components/Sidebar.js‎

Lines changed: 69 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client"
2-
import React, { useState, useEffect } from "react"
2+
import React, { useState, useEffect, cloneElement } from "react"
33
import { usePathname } from "next/navigation"
44
import Link from "next/link"
55
import {
@@ -8,8 +8,7 @@ import {
88
IconLogout,
99
IconPlugConnected,
1010
IconUser,
11-
IconMessage,
12-
IconHome
11+
IconMessage
1312
} from "@tabler/icons-react"
1413
import { cn } from "@utils/cn"
1514

@@ -37,30 +36,81 @@ const Sidebar = () => {
3736
}
3837
]
3938
return (
40-
<div className="hidden md:flex fixed top-0 left-0 h-screen w-20 bg-black border-r border-neutral-800/50 flex-col items-center justify-between py-5 z-40">
41-
<div className="flex flex-col items-center gap-8 w-full">
42-
<Link href="/chat">
43-
<img
44-
src="/images/half-logo-dark.svg"
45-
alt="Logo"
46-
className="w-8 h-8"
47-
/>
48-
</Link>
49-
<nav className="flex flex-col items-center gap-2 w-full">
39+
<>
40+
{/* Desktop Sidebar */}
41+
<div className="hidden md:flex fixed top-0 left-0 h-screen w-20 bg-black border-r border-neutral-800/50 flex-col items-center justify-between py-5 z-40">
42+
<div className="flex flex-col items-center gap-8 w-full">
43+
<Link href="/chat">
44+
<img
45+
src="/images/half-logo-dark.svg"
46+
alt="Logo"
47+
className="w-8 h-8"
48+
/>
49+
</Link>
50+
<nav className="flex flex-col items-center gap-2 w-full">
51+
{navLinks.map((link) => {
52+
const isActive = pathname.startsWith(link.href)
53+
return (
54+
<Link
55+
href={link.href}
56+
key={link.title}
57+
className={cn(
58+
"flex flex-col items-center gap-1.5 transition-colors duration-200 w-full py-3",
59+
isActive
60+
? "text-white bg-neutral-800 border-r-2 border-white"
61+
: "text-neutral-400 hover:text-white hover:bg-neutral-800/50"
62+
)}
63+
>
64+
{link.icon}
65+
<span className="text-xs font-medium">
66+
{link.title}
67+
</span>
68+
</Link>
69+
)
70+
})}
71+
</nav>
72+
</div>
73+
<div className="flex flex-col items-center gap-4">
74+
{!isSelfHost && (
75+
<Link
76+
href="/api/auth/logout"
77+
className="flex flex-col items-center gap-1.5 text-neutral-400 hover:text-white transition-colors"
78+
>
79+
<IconLogout size={24} />
80+
</Link>
81+
)}
82+
<Link href="/settings">
83+
{userDetails?.picture ? (
84+
<img
85+
src={userDetails.picture}
86+
alt="User"
87+
className="w-9 h-9 rounded-full border-2 border-neutral-700"
88+
/>
89+
) : (
90+
<div className="w-9 h-9 rounded-full bg-neutral-800 flex items-center justify-center border-2 border-neutral-700">
91+
<IconUser className="w-5 h-5 text-white" />
92+
</div>
93+
)}
94+
</Link>
95+
</div>
96+
</div>
97+
{/* Mobile Bottom Navigation */}
98+
<div className="md:hidden fixed bottom-0 left-0 w-full bg-black border-t border-neutral-800/50 z-40">
99+
<nav className="flex items-center justify-around w-full h-16">
50100
{navLinks.map((link) => {
51101
const isActive = pathname.startsWith(link.href)
52102
return (
53103
<Link
54104
href={link.href}
55105
key={link.title}
56106
className={cn(
57-
"flex flex-col items-center gap-1.5 transition-colors duration-200 w-full py-3",
107+
"flex flex-col items-center justify-center gap-1 w-full h-full transition-colors",
58108
isActive
59-
? "text-white bg-neutral-800 border-r-2 border-white"
60-
: "text-neutral-400 hover:text-white hover:bg-neutral-800/50"
109+
? "text-white"
110+
: "text-neutral-400 hover:text-white"
61111
)}
62112
>
63-
{link.icon}
113+
{cloneElement(link.icon, { size: 24 })}
64114
<span className="text-xs font-medium">
65115
{link.title}
66116
</span>
@@ -69,30 +119,8 @@ const Sidebar = () => {
69119
})}
70120
</nav>
71121
</div>
72-
<div className="flex flex-col items-center gap-4">
73-
{!isSelfHost && (
74-
<Link
75-
href="/api/auth/logout"
76-
className="flex flex-col items-center gap-1.5 text-neutral-400 hover:text-white transition-colors"
77-
>
78-
<IconLogout size={24} />
79-
</Link>
80-
)}
81-
<Link href="/settings">
82-
{userDetails?.picture ? (
83-
<img
84-
src={userDetails.picture}
85-
alt="User"
86-
className="w-9 h-9 rounded-full border-2 border-neutral-700"
87-
/>
88-
) : (
89-
<div className="w-9 h-9 rounded-full bg-neutral-800 flex items-center justify-center border-2 border-neutral-700">
90-
<IconUser className="w-5 h-5 text-white" />
91-
</div>
92-
)}
93-
</Link>
94-
</div>
95-
</div>
122+
</>
96123
)
97124
}
98125
export default Sidebar
126+

0 commit comments

Comments
 (0)