Skip to content
This repository has been archived by the owner on Jan 7, 2025. It is now read-only.

Commit

Permalink
Update AppBar.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
C committed Jan 30, 2023
1 parent e28e5f2 commit d3fa482
Showing 1 changed file with 44 additions and 50 deletions.
94 changes: 44 additions & 50 deletions src/components/AppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ export const AppBar: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>

{/* NavBar / Header */}
<div className="navbar flex h-20 flex-row md:mb-2 shadow-lg bg-black text-neutral-content border-b border-zinc-600">
<div className="navbar flex h-20 flex-row md:mb-2 shadow-lg bg-black text-neutral-content border-b border-zinc-600 bg-opacity-66">
<div className="navbar-start align-items-center">
<div className="hidden sm:inline w-22 h-22 md:p-2 ml-10">
<svg width="105%" height="24" viewBox="0 0 646 96" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -49,60 +48,55 @@ export const AppBar: React.FC = () => {
</div>

{/* Nav Links */}


{/* Wallet & Settings */}
<div className="navbar-end">
<div className="hidden md:inline-flex align-items-center">
<Link href="/">
<span className="btn-ghost btn-sm rounded-btn rounded-btn text-lg font-medium sm:text-xl">Home</span>
</Link>
<Link href="/basics">
<span className="btn-ghost btn-sm rounded-btn text-lg font-medium sm:text-xl">Basics</span>
</Link>
<WalletMultiButtonDynamic className="btn-ghost btn-sm rounded-btn text-lg mr-6 " />
</div>
<label
htmlFor="my-drawer"
className="btn btn-ghost items-center justify-between md:hidden"
onClick={() => setIsOpen(!isOpen)}
>
<div className="HAMBURGER-ICON space-y-2.5 ml-5">
<div className={`h-0.5 w-8 bg-purple-600 ${isOpen ? 'hidden' : ''}`} />
<div className={`h-0.5 w-8 bg-purple-600 ${isOpen ? 'hidden' : ''}`} />
<div className={`h-0.5 w-8 bg-purple-600 ${isOpen ? 'hidden' : ''}`} />
</div>
<div className={`absolute block h-0.5 w-8 animate-pulse bg-purple-600 ${isOpen ? "" : "hidden"}`}
style={{ transform: "rotate(45deg)" }}>
</div>
<div className={`absolute block h-0.5 w-8 animate-pulse bg-purple-600 ${isOpen ? "" : "hidden"}`}
style={{ transform: "rotate(135deg)" }}>
</div>

</label>
<div>
<span className="absolute block h-0.5 w-12 bg-zinc-600 rotate-90 right-12"></span>
<Link href="/">
<span className="text-lg font-medium sm:text-xl mr-6">Home</span>
</Link>
<Link href="/basics">
<span className="text-lg font-medium sm:text-xl mr-4">Basics</span>
</Link>
<WalletMultiButtonDynamic className="btn-ghost btn-sm rounded-btn text-lg mr-6 " />
</div>
<label
htmlFor="my-drawer"
className="btn btn-ghost items-center justify-between md:hidden"
onClick={() => setIsOpen(!isOpen)}>
<div className="HAMBURGER-ICON space-y-2.5 ml-5">
<div className={`h-0.5 w-8 bg-purple-600 ${isOpen ? 'hidden' : ''}`} />
<div className={`h-0.5 w-8 bg-purple-600 ${isOpen ? 'hidden' : ''}`} />
<div className={`h-0.5 w-8 bg-purple-600 ${isOpen ? 'hidden' : ''}`} />
</div>
<div className="dropdown dropdown-end">
<div tabIndex={0} className="btn btn-square btn-ghost text-right mr-4">
<svg className="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<div className={`absolute block h-0.5 w-8 animate-pulse bg-purple-600 ${isOpen ? "" : "hidden"}`}
style={{ transform: "rotate(45deg)" }}>
</div>
<ul tabIndex={0} className="p-2 shadow menu dropdown-content bg-base-100 rounded-box sm:w-52">
<li>
<div className="form-control">
<label className="cursor-pointer label">
<a>Autoconnect</a>
<input type="checkbox" checked={autoConnect} onChange={(e) => setAutoConnect(e.target.checked)} className="toggle" />
</label>

<NetworkSwitcher />
</div>
</li>
</ul>
<div className={`absolute block h-0.5 w-8 animate-pulse bg-purple-600 ${isOpen ? "" : "hidden"}`}
style={{ transform: "rotate(135deg)" }}>
</div>
</label>
<div>
<span className="absolute block h-0.5 w-12 bg-zinc-600 rotate-90 right-12"></span>
</div>
<div className="dropdown dropdown-end">
<div tabIndex={0} className="btn btn-square btn-ghost text-right mr-4">
<svg className="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<ul tabIndex={0} className="p-2 shadow menu dropdown-content bg-base-100 rounded-box sm:w-52">
<li>
<div className="form-control bg-opacity-100">
<label className="cursor-pointer label">
<a>Autoconnect</a>
<input type="checkbox" checked={autoConnect} onChange={(e) => setAutoConnect(e.target.checked)} className="toggle" />
</label>
<NetworkSwitcher />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit d3fa482

Please sign in to comment.