-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
245 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,192 @@ | ||
import { useEffect, useState } from "preact/hooks" | ||
|
||
function FeaturedLinks(props) { | ||
if (!props.links) return <></> | ||
return ( | ||
<> | ||
{props.links.map((link) => ( | ||
<a class="pr-5 hover:text-tblue" href={link.href}> | ||
{link.title} | ||
</a> | ||
))} | ||
</> | ||
) | ||
} | ||
|
||
function MenuIcon(props) { | ||
return ( | ||
<svg | ||
class="cursor-pointer text-gray-500 md:hidden" | ||
width="17" | ||
height="17" | ||
viewBox="0 0 24 24" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<g fill="none"> | ||
<path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" /> | ||
<path | ||
fill="#000000" | ||
d="M20 17.5a1.5 1.5 0 0 1 .144 2.993L20 20.5H4a1.5 1.5 0 0 1-.144-2.993L4 17.5h16Zm0-7a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 0 1 0-3h16Zm0-7a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 1 1 0-3h16Z" | ||
/> | ||
</g> | ||
</svg> | ||
) | ||
} | ||
|
||
function LoggedOutMenuIcons(props) { | ||
return ( | ||
<> | ||
<a | ||
class="inline py-3 pr-2 text-sm text-gray-500" | ||
href={props.links.login} | ||
> | ||
Login | ||
</a> | ||
<a class="btn btn-primary btn-sm" href={`${props.links.home}#signup`}> | ||
Start | ||
</a> | ||
<span class="drawer-content md:hidden"> | ||
<label | ||
for="nav-bar-drawer" | ||
aria-label="open sidebar" | ||
class="btn btn-square btn-ghost" | ||
> | ||
<MenuIcon /> | ||
</label> | ||
</span> | ||
</> | ||
) | ||
} | ||
|
||
function LoggedInMenuIcons(props) { | ||
return ( | ||
<label | ||
for="nav-bar-drawer" | ||
aria-label="open sidebar" | ||
class="btn btn-square btn-ghost rounded-full" | ||
> | ||
{props.avatar} | ||
</label> | ||
) | ||
} | ||
|
||
function LoggedInMenu({ user, links }) { | ||
return ( | ||
<> | ||
<ul class="menu"> | ||
<li> | ||
<a class="pr-5 hover:text-tblue" href={user.home}> | ||
My Home | ||
</a> | ||
</li> | ||
{links.account.map((link) => ( | ||
<li> | ||
<a | ||
class="pr-5 hover:text-tblue" | ||
href={link.href} | ||
target={link.target} | ||
> | ||
{link.title} | ||
</a> | ||
</li> | ||
))} | ||
<li> | ||
<a class="pr-5 text-tpinkTint hover:text-error" href={links.logout}> | ||
Logout | ||
</a> | ||
</li> | ||
</ul> | ||
</> | ||
) | ||
} | ||
|
||
function LoggedOutMenu({ links }) { | ||
return ( | ||
<> | ||
<ul class="menu"> | ||
<li> | ||
<a class="pr-5 hover:text-tblue" href={links.home}> | ||
Home | ||
</a> | ||
</li> | ||
{links.marketing.map((link) => ( | ||
<li> | ||
<a class="pr-5 hover:text-tblue" href={link.href}> | ||
{link.title} | ||
</a> | ||
</li> | ||
))} | ||
</ul> | ||
</> | ||
) | ||
} | ||
|
||
function NavBar(props) { | ||
const [links, setLinks] = useState({}) | ||
const [user, setUser] = useState({}) | ||
const [data, setData] = useState({}) | ||
const [loaded, setLoaded] = useState(false) | ||
useEffect(() => { | ||
const data = JSON.parse(document.getElementById(props.dataid).textContent) | ||
setData(data) | ||
setLinks(data.links) | ||
setUser(data.user) | ||
setLoaded(true) | ||
}, []) | ||
const homeLink = user.auth ? user.home : links.home | ||
const marketing = ( | ||
<> | ||
{links.marketing && | ||
links.marketing.map((link) => ( | ||
<a class="pr-5 hover:text-tblue" href={link.href}> | ||
{link.title} | ||
</a> | ||
))} | ||
</> | ||
) | ||
if (!loaded) { | ||
return <div></div> | ||
} | ||
|
||
const featuredLinks = user.auth ? [] : links.marketing | ||
|
||
return ( | ||
<div class="center drawer drawer-end mx-auto flex max-w-5xl flex-wrap items-center justify-between py-2 md:px-5 "> | ||
<input id="nav-bar-drawer" type="checkbox" class="drawer-toggle" /> | ||
<a | ||
class="title-font items-center font-medium text-gray-900" | ||
href={homeLink} | ||
> | ||
<img class="hidden sm:block" src={data.logo} width="100" alt="" /> | ||
<img class="sm:hidden" src={data.symbol} width="30" alt="" /> | ||
</a> | ||
<div class="hidden pt-2 md:block"> | ||
<FeaturedLinks links={featuredLinks} /> | ||
</div> | ||
<div class="flex items-center gap-2"> | ||
{!user.auth && <LoggedOutMenuIcons links={links} />} | ||
{user.auth && ( | ||
<LoggedInMenuIcons user={user} avatar={props.avatar} links={links} /> | ||
)} | ||
</div> | ||
<div class="drawer-side z-50"> | ||
<label | ||
for="nav-bar-drawer" | ||
aria-label="close sidebar" | ||
class="drawer-overlay" | ||
></label> | ||
<div class="min-h-full w-80 bg-tcreme p-4"> | ||
{user.auth ? ( | ||
<LoggedInMenu user={user} links={links} /> | ||
) : ( | ||
<LoggedOutMenu links={links} /> | ||
)} | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} | ||
|
||
NavBar.tagName = "t-navbar" | ||
|
||
export default NavBar |
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,79 +1,47 @@ | ||
{% load static %} | ||
{% load avatar %} | ||
<header class="text-gray-600 body-font px-5 border-b-[1px] border-gray-300 "> | ||
<div class="container mx-auto flex flex-wrap px-5 py-3 justify-between items-center max-w-5xl "> | ||
<a class="title-font font-medium items-center text-gray-900" | ||
{% if request.user.is_authenticated %} | ||
href="{% url 'users:redirect' %}"> | ||
{% else %} | ||
href="{% url 'pages:home' %}"> | ||
{% endif %} | ||
<img class="hidden sm:block" | ||
src="{% static 'images/totem-logo.png' %}" | ||
width="100" | ||
alt="" /> | ||
<img class="sm:hidden" | ||
src="{% static 'images/totem-symbol.png' %}" | ||
width="30" | ||
alt="" /> | ||
</a> | ||
<nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 justify-end flex-grow flex flex-wrap items-center text-base"> | ||
<div class="flex justify-center"> | ||
{% if request.user.is_authenticated %} | ||
<script id="navmenu-data" type="application/json"> | ||
[ | ||
{ | ||
"title": "My Home", "href": "{% url "users:redirect" %}" | ||
} | ||
] | ||
</script> | ||
{% else %} | ||
<script id="navmenu-data" type="application/json"> | ||
[ | ||
{ | ||
"title": "How it works", "href": "{% url "pages:how-it-works" %}" | ||
}, | ||
{ | ||
"title": "Why we made this", "href": "{% url "pages:about" %}" | ||
}, | ||
{ | ||
"title": "Team", "href": "{% url "pages:team" %}" | ||
} | ||
] | ||
</script> | ||
{% endif %} | ||
<t-navmenu dataid="navmenu-data" /> | ||
</div> | ||
<div class="w-0.5 bg-gray-200 h-5 mx-2 rounded"></div> | ||
{% if request.user.is_authenticated %} | ||
<t-dropdown class="pl-5"> | ||
<span slot="button"> | ||
<button class="flex items-center gap-1">{% avatar request.user size=50 %}</button> | ||
</span> | ||
<span slot='menu'> | ||
<div class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-md z-10"> | ||
<a href="{% url 'users:profile' %}" | ||
class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-sm hover:bg-gray-50 disabled:text-gray-500"> | ||
Profile | ||
</a> | ||
{% if request.user.is_staff %} | ||
<a href="{% url 'admin:index' %}" | ||
target="_blank" | ||
class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-sm hover:bg-gray-50 disabled:text-gray-500"> | ||
Admin | ||
</a> | ||
{% endif %} | ||
<a href="{% url 'account_logout' %}" | ||
class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-sm hover:bg-gray-50 disabled:text-gray-500"> | ||
<span class="text-tpink">Logout</span> | ||
</a> | ||
</div> | ||
</span> | ||
</t-dropdown> | ||
{% else %} | ||
<a href="{% url 'users:login' %}" class="mx-5 hover:text-tblue">Log In</a> | ||
<a href="{% url 'pages:home' %}#signup" class="btn btn-primary">Join</a> | ||
{% endif %} | ||
</nav> | ||
</div> | ||
<header class="text-gray-600 body-font md:px-5 min-h-[65px] px-2 border-b-[1px] border-gray-300 "> | ||
<script id="navbar-data" type="application/json"> | ||
{ | ||
"logo": "{% static 'images/totem-logo.png' %}", | ||
"symbol": "{% static 'images/totem-symbol.png' %}", | ||
"user": { | ||
"auth": {{ request.user.is_authenticated|yesno:"true,false" }}, | ||
"name": "{{ user.name }}", | ||
"home": "{% url "users:redirect" %}" | ||
}, | ||
"links": { | ||
"home": "{% url "pages:home" %}", | ||
"logout": "{% url "account_logout" %}", | ||
"login": "{% url "users:login" %}", | ||
"profile": "{% url "users:profile" %}", | ||
"marketing": [ | ||
{ | ||
"title": "How it works", "href": "{% url "pages:how-it-works" %}" | ||
}, | ||
{ | ||
"title": "Why we made Totem", "href": "{% url "pages:about" %}" | ||
}, | ||
{ | ||
"title": "Team", "href": "{% url "pages:team" %}" | ||
} | ||
], | ||
"account": [ | ||
{% if request.user.is_staff %} | ||
{ | ||
"title": "Admin", "target":"_blank", "href": "{% url "admin:index" %}" | ||
}, | ||
{% endif %} | ||
{ | ||
"title": "My Profile", "href": "{% url "users:profile" %}" | ||
} | ||
] | ||
} | ||
} | ||
</script> | ||
<t-navbar dataid="navbar-data"> | ||
{% if request.user.is_authenticated %} | ||
<span slot="avatar">{% avatar request.user size=40 %}</span> | ||
{% endif %} | ||
</t-navbar> | ||
</header> |