side menu navigation
This commit is contained in:
Victor Oliva
@@ -20,6 +20,8 @@ import chopsticksLogoDark from "./icons/chopsticks_dark.svg"
|
||||
import chopsticksLogoLight from "./icons/chopsticks_light.svg"
|
||||
import enumSvg from "./icons/enum.svg"
|
||||
import focusSvg from "./icons/focus.svg"
|
||||
import githubLightSvg from "./icons/github_light.svg"
|
||||
import githubDarkSvg from "./icons/github_dark.svg"
|
||||
import switchBinarySvg from "./icons/switch_binary.svg"
|
||||
|
||||
type CustomIconProps = Omit<Props, "ref" | "src"> & { size?: number }
|
||||
@@ -62,6 +64,7 @@ export const Enum = customIcon(enumSvg)
|
||||
export const BinaryEdit = customIcon(binarySvg)
|
||||
export const SwitchBinary = customIcon(switchBinarySvg)
|
||||
export const Chopsticks = themeIcon(chopsticksLogoLight, chopsticksLogoDark)
|
||||
export const GithubIcon = themeIcon(githubLightSvg, githubDarkSvg)
|
||||
|
||||
export const Spinner = (props: LucideProps) => (
|
||||
<LoaderCircle
|
||||
|
||||
Executable
+10
@@ -0,0 +1,10 @@
|
||||
<svg width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_730_27136)">
|
||||
<path d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_730_27136">
|
||||
<rect width="98" height="96" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Executable
+10
@@ -0,0 +1,10 @@
|
||||
<svg width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_730_27126)">
|
||||
<path d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_730_27126">
|
||||
<rect width="98" height="96" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
+72
-21
@@ -1,19 +1,22 @@
|
||||
import SliderToggle from "@/components/Toggle"
|
||||
import { GithubIcon } from "@/components/Icons"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet"
|
||||
import { Link, useNavigate } from "@/hashParams"
|
||||
import { changeTheme, useTheme } from "@/ThemeProvider"
|
||||
import {
|
||||
Blocks,
|
||||
Code2,
|
||||
Database,
|
||||
FileCode2,
|
||||
FileText,
|
||||
BookOpenText,
|
||||
Cable,
|
||||
DatabaseSearch,
|
||||
GitGraph,
|
||||
Menu,
|
||||
RadioTower,
|
||||
MoonStar,
|
||||
Search,
|
||||
Send,
|
||||
Wallet,
|
||||
ServerCog,
|
||||
SquareEqual,
|
||||
SquareFunction,
|
||||
UserRound,
|
||||
} from "lucide-react"
|
||||
import { FC, FormEvent, PropsWithChildren, useState } from "react"
|
||||
import { useLocation } from "react-router-dom"
|
||||
@@ -23,29 +26,74 @@ import { NetworkSwitcher } from "./Network/Network"
|
||||
type NavigationItem = {
|
||||
path: string
|
||||
label: string
|
||||
icon: FC<{ size?: number; className?: string }>
|
||||
icon: IconComponent
|
||||
}
|
||||
type IconComponent = FC<{ size?: number; className?: string }>
|
||||
|
||||
const navigationGroups: Array<{
|
||||
label: string
|
||||
items: NavigationItem[]
|
||||
}> = [
|
||||
{
|
||||
label: "Tools",
|
||||
label: "Dev Tools",
|
||||
items: [
|
||||
{ path: "/explorer", label: "Explorer", icon: Blocks },
|
||||
{ path: "/storage", label: "Storage", icon: Database },
|
||||
{ path: "/extrinsics", label: "Extrinsics", icon: Send },
|
||||
{ path: "/runtimeCalls", label: "Runtime Calls", icon: Code2 },
|
||||
{ path: "/viewFns", label: "View Functions", icon: FileCode2 },
|
||||
{ path: "/constants", label: "Constants", icon: FileText },
|
||||
{ path: "/metadata", label: "Metadata", icon: Blocks },
|
||||
{ path: "/rpcCalls", label: "RPC Calls", icon: RadioTower },
|
||||
{
|
||||
path: "/explorer",
|
||||
label: "Explorer",
|
||||
// Alts GitFork, GitBranch
|
||||
icon: GitGraph,
|
||||
},
|
||||
{
|
||||
path: "/storage",
|
||||
label: "Storage",
|
||||
icon: DatabaseSearch,
|
||||
},
|
||||
{
|
||||
path: "/extrinsics",
|
||||
label: "Extrinsics",
|
||||
icon: Send,
|
||||
},
|
||||
{
|
||||
path: "/runtimeCalls",
|
||||
label: "Runtime Calls",
|
||||
// Alt SquareTerminal
|
||||
icon: ServerCog,
|
||||
},
|
||||
{
|
||||
path: "/viewFns",
|
||||
label: "View Functions",
|
||||
icon: SquareFunction,
|
||||
},
|
||||
{
|
||||
path: "/constants",
|
||||
label: "Constants",
|
||||
// Alt Braces
|
||||
icon: SquareEqual,
|
||||
},
|
||||
{
|
||||
path: "/metadata",
|
||||
label: "Metadata",
|
||||
// Alt Boxes
|
||||
icon: BookOpenText,
|
||||
},
|
||||
{
|
||||
path: "/rpcCalls",
|
||||
label: "RPC Calls",
|
||||
// Alt RadioTower
|
||||
icon: Cable,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Utils",
|
||||
items: [{ path: "/accounts", label: "Accounts", icon: Wallet }],
|
||||
label: "Utilities",
|
||||
items: [
|
||||
{
|
||||
path: "/accounts",
|
||||
label: "Accounts",
|
||||
// Alt Wallet
|
||||
icon: UserRound,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -127,7 +175,7 @@ const SidebarContent: FC<{ mobile?: boolean; onNavigate?: () => void }> = ({
|
||||
rel="noreferrer"
|
||||
className="mt-2 flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<FileCode2 size={16} />
|
||||
<GithubIcon size={16} />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -248,7 +296,10 @@ const ThemeToggle = () => {
|
||||
|
||||
return (
|
||||
<label className="flex items-center justify-between rounded-md px-3 py-2 text-sm text-muted-foreground">
|
||||
<span>Dark mode</span>
|
||||
<span className="flex items-center gap-3">
|
||||
<MoonStar size={16} className="shrink-0" />
|
||||
<span>Dark mode</span>
|
||||
</span>
|
||||
<SliderToggle
|
||||
isToggled={theme === "dark"}
|
||||
toggle={() => changeTheme(theme === "dark" ? "light" : "dark")}
|
||||
|
||||
Reference in New Issue
Block a user