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
1 parent
cca88d8
commit ee06d3f
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
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
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,39 @@ | ||
| import { AlertTriangle, X, type IconNode } from 'lucide' | ||
| import { For } from 'solid-js' | ||
| import { Dynamic } from 'solid-js/web' | ||
|
|
||
| export const LucideIcon = ({ | ||
| icon, | ||
| strokeWidth, | ||
| size, | ||
| }: { | ||
| icon: IconNode | ||
| } & LucideProps) => { | ||
| const [, attrs, children] = icon | ||
| const svgProps = { | ||
| 'stroke-width': strokeWidth ?? attrs.strokeWidth ?? 2, | ||
| } | ||
| return ( | ||
| <svg | ||
| {...{ ...attrs, ...svgProps }} | ||
| style={{ width: `${size ?? 24}px`, height: `${size ?? 24}px` }} | ||
| > | ||
| <For each={children}> | ||
| {([elementName, attrs]) => ( | ||
| <Dynamic component={elementName} {...attrs} /> | ||
| )} | ||
| </For> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export type LucideProps = { | ||
| size?: number | ||
| strokeWidth?: number | ||
| } | ||
|
|
||
| export const Warning = (props: LucideProps) => ( | ||
| <LucideIcon icon={AlertTriangle} {...props} /> | ||
| ) | ||
|
|
||
| export const Close = (props: LucideProps) => <LucideIcon icon={X} {...props} /> | ||
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 |
|---|---|---|
| @@ -1,10 +1,53 @@ | ||
| import './Sidebar.css' | ||
| import { createSignal, Show, onCleanup, type ParentProps } from 'solid-js' | ||
| import { Close, Warning } from './LucideIcon.js' | ||
|
|
||
| export const Sidebar = () => { | ||
| const [location, setLocation] = createSignal( | ||
| window.location.hash.slice(1) || 'home', | ||
| ) | ||
|
|
||
| const locationHandler = () => setLocation(window.location.hash.slice(1)) | ||
| window.addEventListener('hashchange', locationHandler) | ||
|
|
||
| onCleanup(() => window.removeEventListener('hashchange', locationHandler)) | ||
|
|
||
| return ( | ||
| <> | ||
| <SidebarNav /> | ||
| <Show when={location() === 'warning'}> | ||
| <SidebarContent class="warning"> | ||
| <header> | ||
| <h1>Under construction!</h1> | ||
| <a href="#"> | ||
| <Close /> | ||
| </a> | ||
| </header> | ||
|
|
||
| <div style={{ padding: '1rem' }}> | ||
| <p> | ||
| This website is under construction and not intended for production | ||
| use. | ||
| </p> | ||
| </div> | ||
| </SidebarContent> | ||
| </Show> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const SidebarContent = (props: ParentProps<{ class?: string }>) => ( | ||
| <aside class={`sidebar ${props.class ?? ''}`}>{props.children}</aside> | ||
| ) | ||
|
|
||
| const SidebarNav = () => ( | ||
| <nav class="sidebar"> | ||
| <a href="#" class="button white"> | ||
| <img src="/assets/logo.svg" class="logo" alt="hello.nrfcloud.com logo" /> | ||
| </a> | ||
| <hr /> | ||
| <a class="button warning" href="#warning"> | ||
| <Warning strokeWidth={2} size={32} /> | ||
| </a> | ||
| </nav> | ||
| ) | ||