22
33import Image from "next/image" ;
44import Link from "next/link" ;
5- import appIcon from "@/public/assets/icons/appIconTwo.svg" ;
65import { motion } from "framer-motion" ;
76import { useEffect , useState } from "react" ;
87import { useSession , signIn , signOut } from "@/utils/auth" ;
@@ -13,7 +12,7 @@ import {
1312} from "../workflow/sidebar/bottom-options-tile" ;
1413import { RAW_ICONS } from "@/lib/icons" ;
1514import { customToast } from "@/lib/custom-toast" ;
16- import classNames from "classnames " ;
15+ import SVGIcon from "@/lib/svg-icon " ;
1716
1817const optionsArr : {
1918 title : string ;
@@ -164,13 +163,13 @@ export default function Navbar() {
164163 < Link href = "/" >
165164 < Image
166165 className = "w-8"
167- src = { appIcon }
166+ src = "appIconTwo.svg"
168167 alt = ""
169168 width = { 200 }
170169 height = { 200 }
171170 />
172171 </ Link >
173- < div className = "hidden md:flex gap-x-5 z-10" >
172+ < div className = "hidden md:flex gap-x-4 lg:gap-x-5 xl:gap-x-6 z-10" >
174173 { navListArr . map ( ( elem , key ) => {
175174 return (
176175 < NavListElement
@@ -182,7 +181,19 @@ export default function Navbar() {
182181 ) ;
183182 } ) }
184183 </ div >
185- < div className = "hidden md:flex items-center md:relative " >
184+ < div className = "hidden md:flex items-center md:relative gap-x-[5px]" >
185+ < Link
186+ href = { "https://github.com/kartikver15gr8/zenorizon" }
187+ target = "_blank"
188+ className = "border border-[#313032] flex items-center gap-x-1 h-9 px-2 rounded-lg bg-black text-[13px] lg:text-[14px] cursor-pointer hover:border-[#69696ec3] transition-all duration-200"
189+ >
190+ < SVGIcon
191+ className = "flex w-3 lg:w-4"
192+ svgString = { RAW_ICONS . GitHubIcon }
193+ />
194+ < p > Star on GitHub</ p >
195+ < SVGIcon className = "flex w-3 lg:w-4" svgString = { RAW_ICONS . Star } />
196+ </ Link >
186197 { profileTabOpen && (
187198 < div
188199 className = { `absolute top-13 -right-2 w-44 h-fit bg-[rgba(0,0,0,0.1)] backdrop-blur-lg border border-[#414141] rounded-xl shadow-lg p-1 transition-all duration-300 ${
@@ -210,7 +221,7 @@ export default function Navbar() {
210221 pathname !== "/signup" && (
211222 < Link
212223 href = { "/signup" }
213- className = "border-2 flex items-center px-4 h-9 rounded-md text-black bg-white cursor-pointer border-[#625c5c ] hover:bg-[#343638 ] hover:text-white transition-all duration-300"
224+ className = "border-2 flex items-center px-4 h-9 rounded-lg text-black bg-white cursor-pointer border-[#313032 ] hover:bg-[#1e1e1f] hover:border-[1px ] hover:text-white transition-all duration-300"
214225 >
215226 Sign in
216227 </ Link >
@@ -247,41 +258,55 @@ export default function Navbar() {
247258 </ div >
248259
249260 { /* Phone Screen Nav Hamburger Tab */ }
250- < button
251- aria-label = "Toggle menu"
252- aria-expanded = { profileTabOpen }
253- onClick = { ( ) => {
254- setIsOpen ( ! isOpen ) ;
255- } }
256- className = "md:hidden flex flex-col justify-center items-center w-9 h-9 focus:outline-none group border border-[#959292] rounded-lg bg-[#38373771] cursor-pointer"
257- type = "button"
258- >
259- < span
260- className = { `
261+ < div className = "md:hidden flex gap-x-[5px]" >
262+ < Link
263+ href = { "https://github.com/kartikver15gr8/zenorizon" }
264+ target = "_blank"
265+ className = "border border-[#313032] flex items-center gap-x-1 h-9 px-2 rounded-lg bg-black text-[13px] lg:text-[14px] cursor-pointer"
266+ >
267+ < SVGIcon
268+ className = "flex w-3 lg:w-4"
269+ svgString = { RAW_ICONS . GitHubIcon }
270+ />
271+ < p > Star on GitHub</ p >
272+ < SVGIcon className = "flex w-3 lg:w-4" svgString = { RAW_ICONS . Star } />
273+ </ Link >
274+ < button
275+ aria-label = "Toggle menu"
276+ aria-expanded = { profileTabOpen }
277+ onClick = { ( ) => {
278+ setIsOpen ( ! isOpen ) ;
279+ } }
280+ className = "flex flex-col justify-center items-center w-9 h-9 focus:outline-none group border border-[#313032] rounded-lg bg-[#38373771] cursor-pointer"
281+ type = "button"
282+ >
283+ < span
284+ className = { `
261285 block h-0.5 w-6 bg-[#959292] rounded transition-all duration-300
262286 ${ isOpen ? "rotate-45 translate-y-2" : "" }
263287 ` }
264- />
265- < span
266- className = { `
288+ />
289+ < span
290+ className = { `
267291 block h-0.5 w-6 bg-[#959292] rounded transition-all duration-300 my-1
268292 ${ isOpen ? "opacity-0" : "" }
269293 ` }
270- />
271- < span
272- className = { `
294+ />
295+ < span
296+ className = { `
273297 block h-0.5 w-6 bg-[#959292] rounded transition-all duration-300
274298 ${ isOpen ? "-rotate-45 -translate-y-2" : "" }
275299 ` }
276- />
277- </ button >
300+ />
301+ </ button >
302+ </ div >
278303 </ div >
279304 </ div >
280305
281306 { isOpen && (
282307 < div className = "fixed mt-[70px] rounded px-4 w-full z-50" >
283308 < motion . div
284- className = " z-50 relative w-full border border-[#565555 ] bg-[#121212] shadow-lg rounded-lg"
309+ className = " z-50 relative w-full border border-[#313032 ] bg-[#121212] shadow-lg rounded-lg"
285310 initial = "closed"
286311 animate = { isOpen ? "open" : "closed" }
287312 variants = { wrapperVariants }
@@ -302,7 +327,7 @@ export default function Navbar() {
302327 < motion . div variants = { itemVariants } >
303328 { session ?. user . email ? (
304329 < div
305- className = "h-16 flex items-center hover:bg-[#3e3d3d ] transition-all duration-500 px-5 py-2 hover:rounded-md border-b border-[#565555] "
330+ className = "h-16 flex items-center hover:bg-[#3d3d3e80 ] transition-all duration-500 px-5 py-2 hover:rounded-md "
306331 onClick = { ( ) => {
307332 handleSignout ( ) ;
308333 setIsOpen ( ! isOpen ) ;
@@ -313,7 +338,7 @@ export default function Navbar() {
313338 ) : (
314339 < Link
315340 href = { session ?. user . email ? "" : "/signup" }
316- className = "h-16 flex items-center hover:bg-[#3e3d3d ] transition-all duration-500 px-5 py-2 hover:rounded-md border-b border-[#565555] "
341+ className = "h-16 flex items-center hover:bg-[#3d3d3e80 ] transition-all duration-500 px-5 py-2 hover:rounded-md "
317342 onClick = { ( ) => {
318343 setIsOpen ( ! isOpen ) ;
319344 } }
@@ -344,14 +369,14 @@ const NavListElement = ({
344369 return onClickHandler ? (
345370 < p
346371 onClick = { onClickHandler }
347- className = { `${ className } px-2 rounded hover:text-[#a8a8a8] transition-all duration-300 cursor-pointer` }
372+ className = { `${ className } text-[14px] lg:text-[16px] rounded hover:text-[#a8a8a8] transition-all duration-300 cursor-pointer` }
348373 >
349374 { title }
350375 </ p >
351376 ) : (
352377 < Link
353378 href = { redirectHref }
354- className = { `${ className } px-2 rounded hover:text-[#a8a8a8] transition-all duration-300 cursor-pointer` }
379+ className = { `${ className } text-[14px] lg:text-[16px] rounded hover:text-[#a8a8a8] transition-all duration-300 cursor-pointer` }
355380 >
356381 { title }
357382 </ Link >
@@ -374,7 +399,7 @@ const NavLink = ({
374399 < motion . div variants = { itemVariants } >
375400 { onClickHandler ? (
376401 < div
377- className = "h-16 flex items-center hover:bg-[#3e3d3d ] transition-all duration-500 px-5 py-2 hover:rounded-md border-b border-[#565555 ]"
402+ className = "h-16 flex items-center hover:bg-[#3d3d3e80 ] transition-all duration-500 px-5 py-2 hover:rounded-md border-b border-[#313032 ]"
378403 onClick = { ( ) => {
379404 onClickHandler ( ) ;
380405 setIsOpen ( ! isOpen ) ;
@@ -385,7 +410,7 @@ const NavLink = ({
385410 ) : (
386411 < Link
387412 href = { href }
388- className = "h-16 flex items-center hover:bg-[#3e3d3d ] transition-all duration-500 px-5 py-2 hover:rounded-md border-b border-[#565555 ]"
413+ className = "h-16 flex items-center hover:bg-[#3d3d3e80 ] transition-all duration-500 px-5 py-2 hover:rounded-md border-b border-[#313032 ]"
389414 onClick = { ( ) => {
390415 setIsOpen ( ! isOpen ) ;
391416 } }
0 commit comments