From ed19179d7653de5768495cf50dc1b53290fae196 Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Thu, 19 Oct 2023 19:43:41 +0200 Subject: [PATCH] basic routes and nav redesign --- src/components/sidenav/sidenav.css.ts | 8 ++-- src/components/sidenav/sidenav.tsx | 67 +++++++++++++++++---------- src/routes/account/index.tsx | 16 +++++++ src/routes/business/index.tsx | 16 +++++++ src/routes/exchange/index.tsx | 16 +++++++ src/routes/people/index.tsx | 16 +++++++ src/routes/transfer/index.tsx | 16 +++++++ src/routes/wallet/index.tsx | 16 +++++++ 8 files changed, 142 insertions(+), 29 deletions(-) create mode 100644 src/routes/account/index.tsx create mode 100644 src/routes/business/index.tsx create mode 100644 src/routes/exchange/index.tsx create mode 100644 src/routes/people/index.tsx create mode 100644 src/routes/transfer/index.tsx create mode 100644 src/routes/wallet/index.tsx diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts index e72f5d9..7b5e866 100644 --- a/src/components/sidenav/sidenav.css.ts +++ b/src/components/sidenav/sidenav.css.ts @@ -2,19 +2,17 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; import { mediaQuery } from "~/breakpoint.css"; const mobile: ComplexStyleRule = { - gridTemplateColumns: "repeat( auto-fit, minmax(60px, 1fr) )", - gridTemplateRows: "none", + flexFlow: "row wrap", }; const desktop: ComplexStyleRule = { - gridTemplateColumns: "none", - gridTemplateRows: "repeat(6, 1fr)", + flexFlow: "column", }; export const sidenav = style([ mobile, { - display: "grid", + display: "flex", gap: "2px", justifyItems: "center", justifyContent: "center", diff --git a/src/components/sidenav/sidenav.tsx b/src/components/sidenav/sidenav.tsx index a43b497..c1ea2ab 100644 --- a/src/components/sidenav/sidenav.tsx +++ b/src/components/sidenav/sidenav.tsx @@ -8,34 +8,53 @@ import ChartSvg from "~/media/icons/dark_theme/chart.svg?jsx"; import WalletSvg from "~/media/icons/dark_theme/wallet.svg?jsx"; import PeopleSvg from "~/media/icons/dark_theme/people.svg?jsx"; import SettingsSvg from "~/media/icons/dark_theme/settings.svg?jsx"; +import BusinessSvg from "~/media/icons/dark_theme/business.svg?jsx"; export const SideNav = component$(() => { return (
- - - {/*
Home
*/} - - - - {/*
Home
*/} - - - - {/*
Home
*/} - - - - {/*
Home
*/} - - - - {/*
Home
*/} - - - - {/*
Home
*/} - + + + + {/*
Home
*/} + + + + + + {/*
Home
*/} + + + + + + {/*
Home
*/} + + + + + + {/*
Home
*/} + + + + + + {/*
Home
*/} + + + + + + {/*
Home
*/} + + + + + + {/*
Home
*/} + +
); }); diff --git a/src/routes/account/index.tsx b/src/routes/account/index.tsx new file mode 100644 index 0000000..8889a67 --- /dev/null +++ b/src/routes/account/index.tsx @@ -0,0 +1,16 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return <>; +}); + +export const head: DocumentHead = { + title: "KSOX-account", + meta: [ + { + name: "description", + content: "Account control panel", + }, + ], +}; diff --git a/src/routes/business/index.tsx b/src/routes/business/index.tsx new file mode 100644 index 0000000..71b1d0a --- /dev/null +++ b/src/routes/business/index.tsx @@ -0,0 +1,16 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return <>; +}); + +export const head: DocumentHead = { + title: "KSOX-business", + meta: [ + { + name: "description", + content: "Crypto business platform", + }, + ], +}; diff --git a/src/routes/exchange/index.tsx b/src/routes/exchange/index.tsx new file mode 100644 index 0000000..f6547dc --- /dev/null +++ b/src/routes/exchange/index.tsx @@ -0,0 +1,16 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return <>; +}); + +export const head: DocumentHead = { + title: "KSOX-exchange", + meta: [ + { + name: "description", + content: "Exchange crypto", + }, + ], +}; diff --git a/src/routes/people/index.tsx b/src/routes/people/index.tsx new file mode 100644 index 0000000..715fa7f --- /dev/null +++ b/src/routes/people/index.tsx @@ -0,0 +1,16 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return <>; +}); + +export const head: DocumentHead = { + title: "KSOX-people", + meta: [ + { + name: "description", + content: "Find people manage friends", + }, + ], +}; diff --git a/src/routes/transfer/index.tsx b/src/routes/transfer/index.tsx new file mode 100644 index 0000000..5a29847 --- /dev/null +++ b/src/routes/transfer/index.tsx @@ -0,0 +1,16 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return <>; +}); + +export const head: DocumentHead = { + title: "KSOX-transfer", + meta: [ + { + name: "description", + content: "Transfer crypto", + }, + ], +}; diff --git a/src/routes/wallet/index.tsx b/src/routes/wallet/index.tsx new file mode 100644 index 0000000..311c81b --- /dev/null +++ b/src/routes/wallet/index.tsx @@ -0,0 +1,16 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return <>; +}); + +export const head: DocumentHead = { + title: "KSOX-wallet", + meta: [ + { + name: "description", + content: "Crypto wallet", + }, + ], +};