titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-13 20:10:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

header

Browse source
This commit is contained in:
rift 2023-12-10 21:19:24 -06:00
parent bb68711a48
commit 57c7cda58b
3 changed files with 67 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/assets/games.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="width: 23px">
<path style="fill: #ffffff00" stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 357 B

63
src/components/Header.tsx
View file

@ -1,6 +1,8 @@
import { useLocation } from "preact-iso"; import { useLocation } from "preact-iso";
import LinkSvg from "../assets/link.svg"; import LinkSvg from "../assets/link.svg";
import LogoSvg from "../assets/logo.svg"; import LogoSvg from "../assets/logo.svg";
import GamesSvg from '../assets/games.svg';
import { useState, useEffect } from "preact/hooks" import { useState, useEffect } from "preact/hooks"
export function Header() { export function Header() {
@ -10,10 +12,67 @@ export function Header() {
<div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between"> <div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between">
<div className="flex flex-row items-center w-1/2"> <div className="flex flex-row items-center w-1/2">
<img src="/logo.png" className="h-16 w-16"></img> <img src="/logo.png" className="h-16 w-16"></img>
<h1 className="font-roboto text-text-color text-4xl">nebula.</h1> <h1 className="font-roboto text-navbar-text-color text-4xl">nebula.</h1>
</div> </div>
<div className="w-1/2"> <div className="w-1/2">
<span className="">Games</span> <div className="flex flex-row justify-end items-center">
<div class="p-4 flex flex-row items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
style="width: 23px"
>
<path
style="fill: #ffffff00"
stroke-linecap="round"
stroke-linejoin="round"
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
/>
</svg>
<span className="text-text-color text-lg pl-1">Games</span>
</div>
<div class="p-4 flex flex-row items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
style="width: 23px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5"
/>
</svg>
<span className="text-text-color text-lg pl-1">Settings</span>
</div>
<div class="p-4 flex flex-row items-center">
<svg
style="width: 23px"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
style="fill: #ffffff00"
stroke-linecap="round"
stroke-linejoin="round"
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
/>
</svg>
<span className="text-text-color text-lg pl-1">Want more links?</span>
</div>
</div>
</div> </div>
</div> </div>
); );

5
tailwind.config.js
View file

@ -7,8 +7,9 @@ export default {
theme: { theme: {
colors: { colors: {
"primary": "var(--background-primary)", "primary": "var(--background-primary)",
"text-color": "var(--navbar-text-color)", "navbar-text-color": "var(--navbar-text-color)",
"navbar-color": "var(--navbar-color)" "navbar-color": "var(--navbar-color)",
"text-color": "var(--navbar-link-color)"
}, },
extend: {}, extend: {},
}, },