Skip to content

Commit 372c807

Browse files
sanjaypinnasanjaypinna
committed
update header UI as per hi-fi designs
1 parent 103fcb4 commit 372c807

File tree

3 files changed

+127
-98
lines changed

3 files changed

+127
-98
lines changed

‎app/[locale]/(user)/layout.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
'use client';
22

3-
import React from 'react';
4-
import Image from 'next/image';
5-
import Link from 'next/link';
63
import { notFound, usePathname } from 'next/navigation';
7-
import { Icon, Text } from 'opub-ui';
4+
import React from 'react';
85

9-
import { Icons } from '@/components/icons';
106
import MainFooter from '../dashboard/components/main-footer';
117
import { MainNav } from '../dashboard/components/main-nav';
128

@@ -25,12 +21,7 @@ export default function Layout({ children }: UserLayoutProps) {
2521

2622
return (
2723
<div className="flex h-full grow flex-col">
28-
<header
29-
className="relative z-2 px-4 py-3 shadow-elementTopNav"
30-
style={{
31-
backgroundColor: 'var( --background-alpha-medium)',
32-
}}
33-
>
24+
<header className="relative z-2 p-6 lg:px-10 lg:py-6 shadow-elementTopNav bg-primaryBlue">
3425
<MainNav hideSearch={hideSearch} />
3526
</header>
3627
<>{children}</>

‎app/[locale]/dashboard/components/main-nav.tsx‎

Lines changed: 66 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,21 @@
11
'use client';
22

33
import React from 'react';
4+
import Image from 'next/image';
45
import Link from 'next/link';
56
import { useMetaKeyPress } from '@/hooks/use-meta-key-press';
67
import { Session } from 'next-auth';
78
import { signIn, signOut, useSession } from 'next-auth/react';
89
import {
910
Avatar,
1011
Button,
11-
CommandDialog,
12-
CommandEmpty,
13-
CommandGroup,
14-
CommandInput,
15-
CommandItem,
16-
CommandList,
1712
Divider,
18-
Icon,
1913
IconButton,
2014
Popover,
21-
SearchInput,
2215
Spinner,
2316
Text,
2417
} from 'opub-ui';
2518

26-
import { Icons } from '@/components/icons';
2719
import Sidebar from './sidebar';
2820

2921
const profileLinks = [
@@ -55,25 +47,54 @@ export function MainNav({ hideSearch = false }) {
5547
return <LogginOutPage />;
5648
}
5749

50+
const Navigation = [
51+
{
52+
title: 'All Data',
53+
href: '/datasets',
54+
},
55+
{
56+
title: 'Sectors',
57+
href: '/categories',
58+
},
59+
{
60+
title: 'Use Cases',
61+
href: '#',
62+
},
63+
{
64+
title: 'Publishers',
65+
href: '#',
66+
},
67+
{
68+
title: 'Tools',
69+
href: '#',
70+
},
71+
];
72+
5873
return (
5974
<nav>
6075
<div className="flex items-center justify-between gap-4">
61-
<div className="flex gap-1">
76+
<div className="flex items-center gap-1">
6277
<div className="lg:hidden">
63-
<Sidebar />
78+
<Sidebar
79+
data={Navigation}
80+
session={session}
81+
status={status}
82+
keycloakSessionLogOut={keycloakSessionLogOut}
83+
signIn={signIn}
84+
/>
6485
</div>
6586
<Link href="/">
6687
<div className="flex items-center gap-2">
67-
<Icon source={Icons.logo} size={24} color="success" />
68-
<Text variant="headingLg" className="text-surfaceDefault" as="h1">
88+
<Image src={'/logo.png'} width={38} height={38} alt="logo" />
89+
<Text variant="headingXl" className="text-surfaceDefault" as="h1">
6990
CivicDataSpace
7091
</Text>
7192
</div>
7293
</Link>
7394
</div>
7495

75-
<div className="flex items-center gap-4">
76-
{!hideSearch && (
96+
<div className="flex items-center gap-8">
97+
{/* {!hideSearch && (
7798
<SearchInput
7899
placeholder="Search"
79100
name="Search"
@@ -113,35 +134,26 @@ export function MainNav({ hideSearch = false }) {
113134
}
114135
/>
115136
)}
116-
<div className="hidden min-w-[102px] lg:block">
117-
<Link href={'/datasets'}>
118-
<Text
119-
variant="headingSm"
120-
as="h1"
121-
className=" text-surfaceDefault"
122-
>
123-
Dataset Listing
124-
</Text>
125-
</Link>
126-
</div>
127-
128-
<div className="hidden min-w-[102px] lg:block">
129-
<Link href={'/categories'}>
130-
<Text
131-
variant="headingSm"
132-
as="h1"
133-
className=" text-surfaceDefault"
134-
>
135-
Categories
136-
</Text>
137-
</Link>
137+
*/}
138+
<div className="flex items-center gap-5">
139+
{Navigation.map((item, index) => (
140+
<div className="hidden lg:block" key={index}>
141+
<Link href={item.href}>
142+
<Text
143+
variant="headingMd"
144+
as="h1"
145+
className="uppercase text-surfaceDefault"
146+
>
147+
{item.title}
148+
</Text>
149+
</Link>
150+
</div>
151+
))}
138152
</div>
139-
140153
{status === 'loading' ? (
141-
<div className="min-w-[112px]" />
154+
<Spinner />
142155
) : (
143-
<div className="flex min-w-[112px] shrink-0 items-center justify-end gap-4">
144-
<Icon source={Icons.notification} color="onBgDefault" />
156+
<div className=" hidden lg:block">
145157
{session?.user ? (
146158
<ProfileContent
147159
session={session}
@@ -150,12 +162,16 @@ export function MainNav({ hideSearch = false }) {
150162
) : (
151163
<Button
152164
onClick={() => {
153-
console.log(process.env.NEXTAUTH_URL,process.env.NEXT_PUBLIC_NEXTAUTH_URL)
165+
console.log(
166+
process.env.NEXTAUTH_URL,
167+
process.env.NEXT_PUBLIC_NEXTAUTH_URL
168+
);
154169
signIn('keycloak');
155170
}}
156171
kind="secondary"
172+
variant="success"
157173
>
158-
Log In
174+
<Text variant="headingMd">LOGIN / SIGN UP</Text>
159175
</Button>
160176
)}
161177
</div>
@@ -166,7 +182,7 @@ export function MainNav({ hideSearch = false }) {
166182
);
167183
}
168184

169-
const ProfileContent = ({
185+
export const ProfileContent = ({
170186
session,
171187
keycloakSessionLogOut,
172188
}: {
@@ -186,7 +202,7 @@ const ProfileContent = ({
186202
<Button
187203
kind="tertiary"
188204
size="slim"
189-
className="rounded-full hover:no-underline"
205+
className="rounded-full hover:no-underline"
190206
>
191207
<Avatar
192208
showInitials
@@ -241,19 +257,11 @@ const ProfileContent = ({
241257

242258
const LogginOutPage = () => {
243259
return (
244-
<div className="h-screen w-screen overflow-hidden">
245-
<Link href="/">
246-
<div className="flex items-center gap-2 pt-[6px]">
247-
<Icon source={Icons.logo} size={24} color="success" />
248-
<Text variant="headingLg" as="h1">
249-
OPub
250-
</Text>
251-
</div>
252-
</Link>
253-
<div className="flex h-full w-full flex-col items-center justify-center gap-1">
254-
<Spinner />
255-
<Text variant="headingLg">Logging out</Text>
256-
</div>
260+
<div className=" flex items-center justify-end gap-4">
261+
<Spinner color="surface" />
262+
<Text variant="headingLg" color="onBgDefault">
263+
Logging out...
264+
</Text>
257265
</div>
258266
);
259267
};

‎app/[locale]/dashboard/components/sidebar.tsx‎

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,80 @@
11
import React, { useState } from 'react';
22
import Link from 'next/link';
3-
import { Button, Icon, Sheet, Text } from 'opub-ui';
3+
import { Button, Icon, Sheet, Spinner, Text } from 'opub-ui';
44

55
import { Icons } from '@/components/icons';
6+
import { ProfileContent } from './main-nav';
67

7-
const Sidebar = () => {
8+
interface SidebarProps {
9+
data: { href: string; title: string }[];
10+
session: any;
11+
keycloakSessionLogOut: any;
12+
signIn: any;
13+
status: any;
14+
}
15+
16+
const Sidebar: React.FC<SidebarProps> = ({
17+
data,
18+
session,
19+
keycloakSessionLogOut,
20+
signIn,
21+
status,
22+
}) => {
823
const [open, setOpen] = useState(false);
924

10-
const data = [
11-
{
12-
label: 'Home',
13-
href: '/',
14-
},
15-
{
16-
label: 'Dataset Listing',
17-
href: '/datasets',
18-
},
19-
];
2025
return (
2126
<>
2227
<Sheet open={open} onOpenChange={setOpen}>
2328
<Sheet.Trigger>
2429
<Button kind="tertiary" onClick={() => setOpen(true)}>
25-
<Icon source={Icons.menu} />
30+
<Icon source={Icons.menu} color="onBgDefault" />
2631
</Button>
2732
</Sheet.Trigger>
2833
<Sheet.Content className={'p-4'}>
29-
<div className="mb-2 flex justify-between">
34+
<div className=" flex flex-row justify-between">
3035
<div>
31-
<Text variant="headingMd" as="h1" className="px-1">
32-
CivicDataSpace
33-
</Text>
36+
{data.map((item, index) => (
37+
<div key={index} className="mb-1 px-1 py-2 ">
38+
<Link href={item.href} onClick={() => setOpen(false)}>
39+
<Text variant="headingSm" as="h1" color={'highlight'}>
40+
{item.title}
41+
</Text>
42+
</Link>
43+
</div>
44+
))}
45+
{status === 'loading' ? (
46+
<Spinner />
47+
) : (
48+
<div>
49+
{session?.user ? (
50+
<ProfileContent
51+
session={session}
52+
keycloakSessionLogOut={keycloakSessionLogOut}
53+
/>
54+
) : (
55+
<Button
56+
onClick={() => {
57+
console.log(
58+
process.env.NEXTAUTH_URL,
59+
process.env.NEXT_PUBLIC_NEXTAUTH_URL
60+
);
61+
signIn('keycloak');
62+
}}
63+
kind="secondary"
64+
variant="success"
65+
>
66+
<Text variant="headingMd">LOGIN / SIGN UP</Text>
67+
</Button>
68+
)}
69+
</div>
70+
)}
3471
</div>
35-
<Button onClick={() => setOpen(false)} kind="tertiary">
36-
<Icon source={Icons.cross} size={24} color="default" />
37-
</Button>
38-
</div>
39-
{data.map((item, index) => (
40-
<div key={index} className="mb-1 px-1 py-2 ">
41-
<Link href={item.href} onClick={() => setOpen(false)}>
42-
<Text variant="headingSm" as="h1" color={'highlight'}>
43-
{item.label}
44-
</Text>
45-
</Link>
72+
<div className="mb-2 flex h-fit w-fit justify-end">
73+
<Button onClick={() => setOpen(false)} kind="tertiary">
74+
<Icon source={Icons.cross} size={24} color="default" />
75+
</Button>
4676
</div>
47-
))}
77+
</div>
4878
</Sheet.Content>
4979
</Sheet>
5080
</>

0 commit comments

Comments
 (0)