basic routes and nav redesign

visoftsolutions · Oct 19, 2023 · ed19179 · ed19179
1 parent 30e960c
commit ed19179
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 29 deletions.
diff --git 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
@@ -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>
   );
 });
diff --git a/src/routes/account/index.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",
+    },
+  ],
+};