|
| 1 | +import React from "react"; |
| 2 | +import { useState } from "react"; |
| 3 | + |
| 4 | +import './style.css' |
| 5 | + |
| 6 | +const App = () => { |
| 7 | + |
| 8 | + const [showNavContent, setShowNavContent] = useState(true) |
| 9 | + |
| 10 | + const switchBtn = () => { |
| 11 | + setShowNavContent(showNavContent => !showNavContent) |
| 12 | + } |
| 13 | + |
| 14 | + const navLeftList = [ |
| 15 | + { |
| 16 | + label: <img alt="Logo" src="https://static.apiseven.com/202108/1648866052600-a71c5469-f81c-4b52-8c20-76eef2987dfc.png" width='120px' height='auto' loading="lazy" class="chakra-image css-1s16w59"></img>, |
| 17 | + href: '/' |
| 18 | + }, |
| 19 | + { |
| 20 | + label: 'Blog', |
| 21 | + href: 'https://api7.ai/blog', |
| 22 | + }, |
| 23 | + { |
| 24 | + label: 'About Us', |
| 25 | + href: 'https://api7.ai/about' |
| 26 | + } |
| 27 | + ] |
| 28 | + const navRightList = [ |
| 29 | + { |
| 30 | + label: 'Star', |
| 31 | + href: 'https://github.com/api7/contributor-graph' |
| 32 | + } |
| 33 | + ] |
| 34 | + |
| 35 | + return ( |
| 36 | + <div |
| 37 | + style={{ |
| 38 | + width: '100%', |
| 39 | + marginBottom: '40px', |
| 40 | + }} |
| 41 | + > |
| 42 | + <div |
| 43 | + className="main" |
| 44 | + style={{ |
| 45 | + width: '100%', |
| 46 | + height: '3.5rem', |
| 47 | + backgroundColor: 'RGB(54,54,54)', |
| 48 | + display: 'flex', |
| 49 | + justifyContent: 'center', |
| 50 | + }} |
| 51 | + > |
| 52 | + <div |
| 53 | + className="navcontent" |
| 54 | + style={{ |
| 55 | + width: '65%', |
| 56 | + height: '100%', |
| 57 | + display: "flex", |
| 58 | + justifyContent: "space-between", |
| 59 | + alignItems: 'center', |
| 60 | + }} |
| 61 | + > |
| 62 | + <div |
| 63 | + style={{ |
| 64 | + display: "flex", |
| 65 | + height: '100%', |
| 66 | + alignItems: 'center', |
| 67 | + }} |
| 68 | + > |
| 69 | + { |
| 70 | + navLeftList.map((item) => { |
| 71 | + return ( |
| 72 | + <a |
| 73 | + className="leftcontent" |
| 74 | + href={item.href} |
| 75 | + key={item.label} |
| 76 | + > |
| 77 | + {item.label} |
| 78 | + </a> |
| 79 | + ) |
| 80 | + }) |
| 81 | + } |
| 82 | + </div> |
| 83 | + <div class='rightnav'> |
| 84 | + <svg color="RGB(245,245,245)" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1.3em" width="1.3em" xmlns="http://www.w3.org/2000/svg"><path width='1.8em' height='1.8em' d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> |
| 85 | + { |
| 86 | + navRightList.map((item) => { |
| 87 | + return ( |
| 88 | + <a |
| 89 | + className="rightcontent" |
| 90 | + href={item.href} |
| 91 | + key={item.label} |
| 92 | + style={{ |
| 93 | + height: '100%', |
| 94 | + display: "flex", |
| 95 | + alignItems: 'center', |
| 96 | + textDecoration: 'none', |
| 97 | + color: 'RGB(245,245,245)', |
| 98 | + padding: '0 0.75em', |
| 99 | + fontSize: '16px', |
| 100 | + fontWeight: '600', |
| 101 | + marginLeft: '5px' |
| 102 | + }} |
| 103 | + > |
| 104 | + {item.label} |
| 105 | + </a> |
| 106 | + ) |
| 107 | + }) |
| 108 | + } |
| 109 | + </div> |
| 110 | + <div |
| 111 | + className="switchbtn" |
| 112 | + onClick={switchBtn} |
| 113 | + > |
| 114 | + <span className={showNavContent ? "navMobile" : 'navDesktop'}></span> |
| 115 | + <span className={showNavContent ? "navMobile" : 'navDesktoprotate'}></span> |
| 116 | + <span className={showNavContent ? "navMobile" : ''}></span> |
| 117 | + </div> |
| 118 | + </div> |
| 119 | + </div> |
| 120 | + <div |
| 121 | + className={showNavContent ? 'closebox' : 'openbox'} |
| 122 | + > |
| 123 | + { |
| 124 | + navRightList.map((item) => { |
| 125 | + return ( |
| 126 | + <a |
| 127 | + key={item.label} |
| 128 | + style={{ |
| 129 | + fontWeight: '600', |
| 130 | + height: '3rem', |
| 131 | + display: 'flex', |
| 132 | + alignItems: 'center', |
| 133 | + padding: '0 0.75rem', |
| 134 | + textDecoration: 'none', |
| 135 | + color: '#363636', |
| 136 | + }} |
| 137 | + href={item.href}>{item.label} |
| 138 | + </a> |
| 139 | + ) |
| 140 | + }) |
| 141 | + } |
| 142 | + </div> |
| 143 | + </div> |
| 144 | + ) |
| 145 | +} |
| 146 | + |
| 147 | +export default App |
0 commit comments