Skip to content

Commit ceb1c05

Browse files
GooseNightmaany
GooseNight
authored and
maany
committed
Enhancement: Enhance header navigation bar #412 
1 parent d138e3e commit ceb1c05

File tree

2 files changed

+170
-150
lines changed

2 files changed

+170
-150
lines changed

‎src/component-library/Pages/Layout/Layout.tsx

+127-135
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,127 @@ export const Layout = (
107107
)
108108
}
109109

110+
const NavBar: React.FC = () => {
111+
return (
112+
<nav className="bg-gray-800 p-0 m-0 w-max">
113+
<div className="container mx-0 w-max flex ">
114+
<ul className="flex space-x-5 md:flex-row flex-col">
115+
<li className="group relative self-center">
116+
<HeaderLinks
117+
href="/dashboard"
118+
className="w-max bg-neutral-800 text-text-100 px-2 py-2 hover:text-brand-500 text-left align-middle"
119+
>
120+
Dashboard
121+
</HeaderLinks>
122+
</li>
123+
<li className="group relative self-center">
124+
<HeaderLinks
125+
href="/did/list"
126+
className="w-max text-text-100 bg-neutral-800 px-2 py-2 hover:text-brand-500 text-left"
127+
>
128+
DIDs
129+
</HeaderLinks>
130+
</li>
131+
<li className="group relative self-center">
132+
<HeaderLinks
133+
href="/rse/list"
134+
className="w-max text-text-100 bg-neutral-800 px-2 py-2 hover:text-brand-500 text-center "
135+
>
136+
RSEs
137+
</HeaderLinks>
138+
</li>
139+
<li className="group relative">
140+
<div className="group-hover:block text-text-100 bg-neutral-800 focus:outline-none px-2 py-2">
141+
Rules
142+
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-700 mt-1 rounded shadow-lg z-10 p-1 ">
143+
<HeaderLinks
144+
href="/rule/create"
145+
className="w-max pt-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
146+
>
147+
Create Rule
148+
</HeaderLinks>
149+
<HeaderLinks
150+
href="/rule/list"
151+
className="pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
152+
>
153+
List Rules
154+
</HeaderLinks>
155+
</div>
156+
</div>
157+
</li>
158+
<li className="group relative">
159+
<div className="group-hover:block text-text-100 bg-neutral-800 focus:outline-none px-2 py-2">
160+
...
161+
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-700 mt-1 rounded shadow-lg z-10 p-1">
162+
<HeaderLinks
163+
href="/subscription/list"
164+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
165+
>
166+
Subscription
167+
</HeaderLinks>
168+
</div>
169+
</div>
170+
</li>
171+
</ul>
172+
</div>
173+
</nav>
174+
)
175+
}
176+
const SideNavBar: React.FC = () => {
177+
return (
178+
<nav className="bg-gray-800 p-0 m-0 w-max">
179+
<div className="container mx-0 w-max flex ">
180+
<ul className="flex space-x-5 md:flex-row flex-col">
181+
<li className="group relative">
182+
<div className="group-hover:block text-text-100 bg-neutral-800 focus:outline-none px-2 py-2">
183+
<HiMenu className="text-4xl" />
184+
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-700 mt-1 rounded shadow-lg z-10 p-1">
185+
<HeaderLinks
186+
href="/dashboard"
187+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
188+
>
189+
Dashboard
190+
</HeaderLinks>
191+
192+
<HeaderLinks
193+
href="/did/list"
194+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
195+
>
196+
DIDs
197+
</HeaderLinks>
198+
199+
<HeaderLinks
200+
href="/rse/list"
201+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
202+
>
203+
RSEs
204+
</HeaderLinks>
205+
<HeaderLinks
206+
href="/rule/create"
207+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
208+
>
209+
Create Rule
210+
</HeaderLinks>
211+
<HeaderLinks
212+
href="/rule/list"
213+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
214+
>
215+
List Rules
216+
</HeaderLinks>
217+
<HeaderLinks
218+
href="/subscription/list"
219+
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
220+
>
221+
Subscription
222+
</HeaderLinks>
223+
</div>
224+
</div>
225+
</li></ul>
226+
</div>
227+
</nav>
228+
)
229+
}
230+
110231
const accountMenuRef = useRef<HTMLDivElement>(null)
111232
const accountMenuButtonRef = useRef<HTMLButtonElement>(null)
112233
useEffect(() => {
@@ -151,21 +272,16 @@ export const Layout = (
151272
<span
152273
className="flex md:hidden"
153274
>
154-
<button
155-
className="text-text-100"
156-
onClick={() => { setIsHamburgerOpen(!isHamburgerOpen) }}
157-
>
158-
<HiMenu className="text-4xl" />
159-
</button>
275+
<SideNavBar></SideNavBar>
160276
</span>
161277

162278
<span className="flex flex-row space-x-2">
163-
<a className="bg-neutral-100 w-12 h-12 rounded" href={props.LVM.rucioProjectLink}>
279+
<a className="bg-neutral-100 w-12 h-12 rounded" href={"//"+props.LVM.rucioProjectLink}>
164280
<Image src="/logocropped.svg" alt="Rucio Logo" width={48} height={48}/>
165281
</a>
166-
<a className="bg-brand-500 w-12 h-12" href={props.LVM.experimentProjectLink} />
282+
<a className="bg-brand-500 w-12 h-12" href={"//"+props.LVM.experimentProjectLink} />
167283
</span>
168-
<span className="hidden md:visible md:flex space-x-12 items-center pl-2 pr-2">
284+
<span className="hidden md:visible md:flex space-x-16 items-center pl-2 pr-2">
169285
<span className="relative">
170286
<input
171287
className={twMerge(
@@ -184,43 +300,10 @@ export const Layout = (
184300
ref={searchMenuRef}
185301
/>
186302
</span>
187-
<HeaderLinks
188-
href="/did/list"
189-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-left"
190-
191-
>
192-
DIDs
193-
</HeaderLinks>
194-
<HeaderLinks
195-
href="/rse/list"
196-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-center"
197-
>
198-
RSEs
199-
</HeaderLinks>
200-
201-
<button
202-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-center"
203-
onClick={() => {
204-
setIsRulesDropDown(!isRulesDropDown)
205-
if (isMoreDropDown)
206-
{setIsMoreDropDown(!isMoreDropDown) }
207-
}}
208-
>
209-
Rules
210-
</button>
211-
<button
212-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-center"
213-
onClick={() => {
214-
setIsMoreDropDown(!isMoreDropDown)
215-
if(isRulesDropDown){
216-
setIsRulesDropDown(!isRulesDropDown)}
217-
}}
218-
>
219-
...
220-
</button>
303+
<NavBar></NavBar>
221304
</span>
222305

223-
<span className="flex space-x-2 items-end relative pl-2 pr-2">
306+
<span className="flex space-x-1 items-end relative pl-2 pr-2">
224307
<button
225308
className="text-text-100 hover:text-brand-500 flex items-center"
226309
onClick={() => setIsProfileOpen(!isProfileOpen)}
@@ -237,97 +320,6 @@ export const Layout = (
237320
/>
238321
</span>
239322
</nav>
240-
241-
<Collapsible showIf={isRulesDropDown} className="bg-gray-800">
242-
<nav className="w-full md:flex flex-col md:visible hidden items-start space-y-2 divide-y divide-neutral-600 border-t border-neutral-600">
243-
<HeaderLinks
244-
href="/rule/create"
245-
className="w-full pt-2 text-text-100 hover:text-brand-500 text-center"
246-
>
247-
Create Rule
248-
</HeaderLinks>
249-
<HeaderLinks
250-
href="/rule/list"
251-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-center"
252-
>
253-
List Rules
254-
</HeaderLinks>
255-
</nav>
256-
</Collapsible>
257-
<Collapsible showIf={isMoreDropDown} className="bg-gray-800 w-full">
258-
<nav className="w-full md:flex flex-col md:visible hidden items-start space-y-2 divide-y divide-neutral-600 border-t border-neutral-600">
259-
<HeaderLinks
260-
href="/subscription/list"
261-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-center"
262-
>
263-
Subscription
264-
</HeaderLinks>
265-
</nav>
266-
</Collapsible>
267-
268-
<Collapsible showIf={isHamburgerOpen}>
269-
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-neutral-600 border-t border-neutral-600 ">
270-
<HeaderLinks
271-
href="/did/list"
272-
className="w-full pt-2 text-text-100 hover:text-brand-500 text-left"
273-
>
274-
List DIDs
275-
</HeaderLinks>
276-
<HeaderLinks
277-
href="/rse/list"
278-
className="w-full pt-2 text-text-100 hover:text-brand-500 text-left"
279-
>
280-
List RSEs
281-
</HeaderLinks>
282-
283-
<button
284-
className="w-full pt-2 text-text-100 hover:text-brand-500 text-left"
285-
onClick={() => {
286-
setIsRulesDropDown(!isRulesDropDown)
287-
if (isMoreDropDown)
288-
{setIsMoreDropDown(!isMoreDropDown) }
289-
}}
290-
>
291-
Rules
292-
</button>
293-
<Collapsible showIf={isRulesDropDown} className='w-full'>
294-
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-neutral-600 border-t border-neutral-600 ">
295-
<HeaderLinks
296-
href="/rule/create"
297-
className="w-full pt-2 text-text-100 hover:text-brand-500 text-left"
298-
>
299-
Create Rule
300-
</HeaderLinks>
301-
<HeaderLinks
302-
href="/rule/list"
303-
className="w-full pt-2 text-text-100 hover:text-brand-500 text-left"
304-
>
305-
List Rules
306-
</HeaderLinks>
307-
</nav>
308-
</Collapsible>
309-
<button
310-
className="w-full pt-1 pb-1 text-text-100 hover:text-brand-500 text-left"
311-
onClick={() => {
312-
setIsMoreDropDown(!isMoreDropDown)
313-
if(isRulesDropDown){
314-
setIsRulesDropDown(!isRulesDropDown)}
315-
}}
316-
>
317-
...
318-
</button>
319-
<Collapsible showIf={isMoreDropDown} className="w-full">
320-
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-neutral-600 border-t border-neutral-600 ">
321-
<HeaderLinks
322-
href="/subscription/list"
323-
className="w-full pt-2 pb-2 text-text-100 hover:text-brand-500 text-left"
324-
>
325-
Subscription
326-
</HeaderLinks>
327-
</nav>
328-
</Collapsible>
329-
</nav>
330-
</Collapsible>
331323
</header>
332324
<main
333325
className={twMerge(

0 commit comments

Comments
 (0)