1+ import Image from "next/image" ;
2+ import { useRouter } from "next/router" ;
3+ import { useState } from "react" ;
4+ import { SvgDiscord , SvgGithub } from "../../src/components/Icons" ;
5+
6+ const logo = '/images/brand/logo.svg'
7+
8+ const Navbar = ( ) => {
9+
10+ return (
11+ < div className = "border-b border-black shadow-xl shadow-black" >
12+ < div className = "hidden lg:block w-screen" >
13+ < DesktopNavbar />
14+ </ div >
15+ < div className = "lg:hidden w-screen" >
16+ < MobileNavbar />
17+ </ div >
18+ </ div >
19+ ) ;
20+ }
21+
22+ const MobileNavbar = ( ) => {
23+
24+ const [ open , setOpen ] = useState ( false ) ;
25+
26+ const toggleOpen = ( ) => {
27+ setOpen ( ! open ) ;
28+ }
29+
30+ return (
31+ < >
32+ < div className = "bg-gray-900 w-screen h-14 md:pl-10 flex flex-row" >
33+ < NavbarBrandButton />
34+ < div className = "flex-grow" > </ div >
35+ < MobileNavOpenButton open = { open } toggleOpen = { toggleOpen } />
36+ </ div >
37+ { open && < MobileNavbarItems /> }
38+ </ >
39+ ) ;
40+ }
41+
42+ const MobileNavOpenButton = ( { open, toggleOpen } : { open : boolean , toggleOpen : ( ) => void } ) => {
43+ return (
44+ < div className = "mt-5 mr-2 md:mr-10 group" onClick = { toggleOpen } >
45+ < div className = { ( open ? "translate-y-1 -rotate-45 group-hover:bg-red-500" : "-translate-y-2 group-hover:bg-gray-500" ) + " rounded-full h-1 w-8 bg-white transition-all" } > </ div >
46+ < div className = { ( open ? "opacity-0 group-hover:bg-red-500" : "opacity-100 group-hover:bg-gray-500" ) + " rounded-full h-1 w-8 bg-white transition-all" } > </ div >
47+ < div className = { ( open ? "-translate-y-1 rotate-45 group-hover:bg-red-500" : "translate-y-2 group-hover:bg-gray-500" ) + " rounded-full h-1 w-8 bg-white transition-all" } > </ div >
48+ </ div >
49+ ) ;
50+ }
51+
52+ const DesktopNavbar = ( ) => {
53+
54+ return (
55+ < div className = "bg-gray-900 w-screen h-14 flex flex-row z-50" >
56+ < div className = "relative w-1/4" >
57+ < div className = "absolute right-0 w-72" >
58+ < NavbarBrandButton />
59+ </ div >
60+ </ div >
61+ < div className = "lg:w-1/2 px-16 object-right flex flex-row-reverse" >
62+ < NavbarButton name = "STUDIO" route = "/" />
63+ < NavbarButton name = "DOCS" route = "/studio" />
64+ </ div >
65+ < div className = "lg:w-1/4 lg:mr-10 pt-3 flex flex-row bg-gray-900 pb-4 lg:pb-0" >
66+ < div className = "lg:hidden flex-grow" > </ div >
67+ < NavbarIconButton icon = { < SvgDiscord className = "h-6 w-6 text-center" /> } route = "https://discord.gg/6mygAnq" />
68+ < NavbarIconButton icon = { < SvgGithub className = "h-6 w-6 text-center" /> } route = "https://github.com/Dumb-Code" />
69+ < div className = "lg:hidden flex-grow" > </ div >
70+ </ div >
71+ </ div >
72+ ) ;
73+ }
74+
75+ const NavbarBrandButton = ( ) => {
76+
77+ const router = useRouter ( ) ;
78+ const takeHome = ( e : { preventDefault : ( ) => void ; } ) => {
79+ e . preventDefault ( ) ;
80+ router . push ( "/" ) ;
81+ }
82+
83+ return (
84+ < div className = "bg-gray-900 px-4 text-white text-xs capitalize hover:bg-gray-700 h-full font-semibold flex flex-row cursor-pointer"
85+ onClick = { takeHome } >
86+ < div className = "mt-4 mr-2 h-6 w-6 relative bg-gray-300" >
87+ < Image alt = "logo" src = { logo } layout = "fill" />
88+ </ div >
89+ < p className = "pt-5" > DUMBCODE STUDIO DOCS</ p >
90+ </ div >
91+ ) ;
92+ }
93+
94+ const MobileNavbarItems = ( ) => {
95+ return (
96+ < div className = "w-full lg:flex lg:flex-row lg:bg-gray-900 bg-gray-800 relative top-0 z-50" >
97+ < div className = "lg:flex-grow" >
98+ < NavbarButton name = "STUDIO" route = "/" />
99+ < NavbarButton name = "DOCS" route = "/studio" />
100+ </ div >
101+ < div className = "lg:pr-4 lg:mr-10 pt-3 flex flex-row bg-gray-900 pb-4 lg:pb-0" >
102+ < div className = "lg:hidden flex-grow" > </ div >
103+ < NavbarIconButton icon = { < SvgDiscord className = "h-6 w-6 text-center" /> } route = "https://discord.gg/6mygAnq" />
104+ < NavbarIconButton icon = { < SvgGithub className = "h-6 w-6 text-center" /> } route = "https://github.com/Dumb-Code" />
105+ < div className = "lg:hidden flex-grow" > </ div >
106+ </ div >
107+ </ div >
108+ ) ;
109+ }
110+
111+ const NavbarButton = ( { name, route } : { name : string , route : string } ) => {
112+
113+ const router = useRouter ( ) ;
114+ const handleClick = ( e : { preventDefault : ( ) => void ; } ) => {
115+ e . preventDefault ( ) ;
116+ router . push ( route ) ;
117+ }
118+
119+ return (
120+ < button className = "bg-gray-900 px-4 text-white text-xs capitalize hover:bg-gray-700 lg:h-full font-semibold transition-colors lg:w-auto w-full h-10"
121+ onClick = { handleClick } >
122+ { name }
123+ </ button >
124+ ) ;
125+ }
126+
127+ const NavbarIconButton = ( { icon, route } : { icon : JSX . Element , route : string } ) => {
128+
129+ return (
130+ < a target = "_blank" rel = "noreferrer" href = { route } className = "bg-gray-900 pl-1 pt-1 text-white text-xs capitalize hover:bg-gray-700 h-8 w-8 rounded-full font-semibold transition-all mx-1 hover:scale-110" >
131+ { icon }
132+ </ a >
133+ ) ;
134+ }
135+
136+ export default Navbar ;
0 commit comments