Skip to content

Commit

Permalink
New navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
blopker committed Oct 14, 2023
1 parent 3eb2d66 commit 9a5eefc
Show file tree
Hide file tree
Showing 7 changed files with 245 additions and 142 deletions.
4 changes: 2 additions & 2 deletions assets/js/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import register from "./register"
import Button from "./button"
import Card from "./card"
import Dropdown from "./dropdown"
import NavMenu from "./navmenu"
import NavBar from "./navbar"
import PromptSearch from "./promptSearch"

var components = [Button, Dropdown, PromptSearch, NavMenu, Card]
var components = [Button, Dropdown, PromptSearch, Card, NavBar]

export default function () {
window.h = h
Expand Down
192 changes: 192 additions & 0 deletions assets/js/components/navbar.js
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
57 changes: 0 additions & 57 deletions assets/js/components/navmenu.js

This file was deleted.

2 changes: 1 addition & 1 deletion totem/static/css/styles.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions totem/static/js/app.min.js

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions totem/static/js/app.min.js.map

Large diffs are not rendered by default.

120 changes: 44 additions & 76 deletions totem/templates/header.html
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>

0 comments on commit 9a5eefc

Please sign in to comment.