basic routes and nav redesign

package.json

@@ -28,25 +28,25 @@
     "clean": "rm -rf dist node_modules server tmp"
   },
   "devDependencies": {
-    "@builder.io/qwik": "^1.2.13",
-    "@builder.io/qwik-city": "^1.2.13",
+    "@builder.io/qwik": "^1.2.14",
+    "@builder.io/qwik-city": "^1.2.14",
     "@dnlup/fastify-traps": "^3.0.0",
     "@fastify/compress": "^6.4.0",
     "@fastify/static": "^6.11.2",
-    "@types/eslint": "8.44.4",
-    "@types/node": "^20.8.6",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@types/eslint": "8.44.6",
+    "@types/node": "^20.8.7",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
     "@vanilla-extract/css": "^1.13.0",
-    "eslint": "8.51.0",
-    "eslint-plugin-qwik": "^1.2.13",
-    "fastify": "^4.24.1",
+    "eslint": "8.52.0",
+    "eslint-plugin-qwik": "^1.2.14",
+    "fastify": "^4.24.3",
     "fastify-plugin": "^4.5.1",
     "prettier": "3.0.3",
     "styled-vanilla-extract": "^0.5.7",
     "typescript": "5.2.2",
-    "undici": "5.26.3",
-    "vite": "4.4.11",
+    "undici": "5.26.4",
+    "vite": "4.5.0",
     "vite-tsconfig-paths": "4.2.1"
   },
   "dependencies": {

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",

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 (
     <div class={sidenav}>
-      <IconButton>
-        <HomeSvg style={{ height: "24px" }} q:slot="icon"></HomeSvg>
-        {/* <div q:slot="text">Home</div> */}
-      </IconButton>
-      <IconButton>
-        <TransferSvg q:slot="icon"></TransferSvg>
-        {/* <div q:slot="text">Home</div> */}
-      </IconButton>
-      <IconButton>
-        <ChartSvg q:slot="icon"></ChartSvg>
-        {/* <div q:slot="text">Home</div> */}
-      </IconButton>
-      <IconButton>
-        <WalletSvg q:slot="icon"></WalletSvg>
-        {/* <div q:slot="text">Home</div> */}
-      </IconButton>
-      <IconButton>
-        <PeopleSvg q:slot="icon"></PeopleSvg>
-        {/* <div q:slot="text">Home</div> */}
-      </IconButton>
-      <IconButton>
-        <SettingsSvg q:slot="icon"></SettingsSvg>
-        {/* <div q:slot="text">Home</div> */}
-      </IconButton>
+      <a href="/">
+        <IconButton>
+          <HomeSvg style={{ height: "24px" }} q:slot="icon"></HomeSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
+      <a href="/transfer">
+        <IconButton>
+          <TransferSvg q:slot="icon"></TransferSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
+      <a href="/exchange">
+        <IconButton>
+          <ChartSvg q:slot="icon"></ChartSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
+      <a href="/wallet">
+        <IconButton>
+          <WalletSvg q:slot="icon"></WalletSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
+      <a href="/business">
+        <IconButton>
+          <BusinessSvg q:slot="icon"></BusinessSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
+      <a href="/people">
+        <IconButton>
+          <PeopleSvg q:slot="icon"></PeopleSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
+      <a href="/account">
+        <IconButton>
+          <SettingsSvg q:slot="icon"></SettingsSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+      </a>
     </div>
   );
 });

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",
+    },
+  ],
+};

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",
+    },
+  ],
+};

src/routes/exchange/[market]/index.css.ts

@@ -0,0 +1,33 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+const background = style({
+  backgroundColor: vars.color.background,
+});
+
+export const mainBuySell = style({
+  height: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr 300px",
+  gap: "1px",
+});
+
+export const buySell = style([background, {}]);
+
+export const mainPosition = style({
+  display: "grid",
+  gridTemplateRows: "1fr 350px",
+  gap: "1px",
+});
+
+export const position = style([background, {}]);
+
+export const chartOrderbook = style({
+  display: "grid",
+  gridTemplateColumns: "1fr 350px",
+  gap: "1px",
+});
+
+export const chart = style([background, {}]);
+
+export const orderbook = style([background, {}]);

src/routes/exchange/[market]/index.tsx

@@ -0,0 +1,48 @@
+import { component$ } from "@builder.io/qwik";
+import { type RequestHandler, routeLoader$ } from "@builder.io/qwik-city";
+import { parseMarket } from "./parseMarket";
+import {
+  buySell,
+  chart,
+  chartOrderbook,
+  mainBuySell,
+  mainPosition,
+  orderbook,
+  position,
+} from "./index.css";
+
+export const onRequest: RequestHandler = ({ params, redirect, sharedMap }) => {
+  try {
+    const market = parseMarket(params.market);
+    sharedMap.set("quoteAsset", market.quoteAsset);
+    sharedMap.set("baseAsset", market.baseAsset);
+  } catch (error) {
+    redirect(300, "/");
+  }
+};
+
+export const useMarket = routeLoader$(({ sharedMap }) => {
+  return {
+    quoteAsset: sharedMap.get("quoteAsset") as string,
+    baseAsset: sharedMap.get("baseAsset") as string,
+  };
+});
+
+export default component$(() => {
+  const { quoteAsset, baseAsset } = useMarket().value;
+  console.log(quoteAsset);
+  console.log(baseAsset);
+
+  return (
+    <div class={mainBuySell}>
+      <div class={mainPosition}>
+        <div class={chartOrderbook}>
+          <div class={chart}></div>
+          <div class={orderbook}></div>
+        </div>
+        <div class={position}></div>
+      </div>
+      <div class={buySell}></div>
+    </div>
+  );
+});

src/routes/exchange/[market]/parseMarket.ts

@@ -0,0 +1,12 @@
+export const parseMarket = (market: string) => {
+  const regex = /^(\w+)-(\w+)$/;
+  const match = market.match(regex);
+  if (match) {
+    return {
+      quoteAsset: match[1].toUpperCase(),
+      baseAsset: match[2].toUpperCase(),
+    };
+  } else {
+    throw new Error("Cound not parse market");
+  }
+};

src/routes/exchange/index.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+const background = style({
+  backgroundColor: vars.color.background,
+});
+
+export const index = style([
+  background,
+  {
+    height: "100%",
+  },
+]);

src/routes/exchange/index.tsx

@@ -0,0 +1,17 @@
+import { component$ } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
+import { index } from "./index.css";
+
+export default component$(() => {
+  return <div class={index}></div>;
+});
+
+export const head: DocumentHead = {
+  title: "KSOX-exchange",
+  meta: [
+    {
+      name: "description",
+      content: "Exchange crypto",
+    },
+  ],
+};

src/routes/exchange/layout.tsx

@@ -0,0 +1,9 @@
+import { component$, Slot } from "@builder.io/qwik";
+
+export default component$(() => {
+  return (
+    <>
+      <Slot />
+    </>
+  );
+});

src/routes/main.css.ts

@@ -19,7 +19,7 @@ const desktop: ComplexStyleRule = {
 export const main = style([
   mobile,
   {
-    backgroundColor: vars.color.background,
+    backgroundColor: vars.color.backgroundHighlight,
     "@media": {
       [mediaQuery.desktop]: desktop,
     },

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",
+    },
+  ],
+};

src/routes/transfer/[id]/index.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+import { background } from "../layout.css";
+
+export const conversation = style({
+  display: "grid",
+  gridTemplateRows: "1fr 100px",
+  gap: "1px",
+});
+
+export const chat = style([background, {}]);
+
+export const message = style([background, {}]);