Feat/add new dashboard UI

__tests__/integration/dashboard.spec.js

@@ -0,0 +1,45 @@
+describe('visiting /dashboard', () => {
+  before(() => {
+    cy.visit('/dashboard');
+  });
+
+  it('checks if url is pointing to dashboard route', () => {
+    cy.location('pathname').should('eq', '/dashboard');
+  });
+
+  it('checks if sidebar is rendered', () => {
+    cy.get('[data-testid="sidebar-notification"]').should('exist');
+  });
+
+  it('checks if breadcrumbs are rendered', () => {
+    cy.get('[data-testid="breadcrumbs"]').should('exist');
+
+    cy.get('[data-testid="breadcrumbs"]')
+      .find('a')
+      .eq(0)
+      .should('have.text', 'home');
+    cy.get('[data-testid="breadcrumbs"]').find('a').eq(0).click();
+    cy.location('pathname').should('eq', '/');
+
+    cy.go('back');
+
+    cy.get('[data-testid="breadcrumbs"]')
+      .find('a')
+      .eq(1)
+      .should('have.text', 'dashboard');
+  });
+
+  it('checks if wallets section is rendered', () => {
+    cy.get('[data-testid="wallets"]').should('exist');
+    cy.get('[data-testid="wallets"] h3').first().should('have.text', 'Wallets');
+  });
+
+  it('checks if rds transaction graph is visible', () => {
+    cy.get('h2').contains('RDS Transaction').should('exist');
+    cy.get('[data-testid="transaction-chart"]').should('exist');
+  });
+
+  it('checks if profile sidebar is rendered', () => {
+    cy.get('[data-testid="profile-sidebar"]').should('exist');
+  });
+});

components/Sidebar/index.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import styles from './sidebar.module.css';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import sidebarMenuOptions from 'constants/sidebarMenuOptions';
+
+const Sidebar = () => {
+  const [mobileToggle, setMobileToggle] = useState(false);
+  const router = useRouter();
+  const navigateTo = (url) => router.push(url);
+
+  const basePath = router.pathname;
+  const pagePath = router.pathname.split('/')[1];
+
+  const addActiveOptionClass = (optionURL) =>
+    pagePath === optionURL || (basePath === '/' && '/' === optionURL)
+      ? ' ' + styles.option_active
+      : '';
+
+  return (
+    <div className={styles.wrapper} data-testid="sidebar-notification">
+      <div
+        className={
+          styles.mobileToggle +
+          ` ${mobileToggle ? styles['mobileToggle--active'] : ''}`
+        }
+        onClick={() => setMobileToggle((prev) => !prev)}
+      >
+        <h3>Menu</h3>
+        <Image src="/assets/MenuArrow.svg" width={25} height={25} />
+      </div>
+
+      <aside className={styles.sidebar}>
+        <span className={styles.heading}>
+          <Image src={'/assets/Real-Dev-Squad1x.png'} width={50} height={50} />
+          <h3>RealDevSquad</h3>
+        </span>
+        <div className={styles.options}>
+          {sidebarMenuOptions.map((option, index) => {
+            const optionPath = option.urlPath;
+            return (
+              <span
+                key={index}
+                // this code below insure even if we are in nested path like currency-exchange/**/
+                //even then the link is active
+                className={styles.option + addActiveOptionClass(optionPath)}
+                onClick={() => navigateTo(optionPath)}
+              >
+                <Image
+                  src={option.iconPath}
+                  className={styles.option_image}
+                  width={25}
+                  height={25}
+                />
+                <p>{option.name}</p>
+                <span className={styles.option_bar}></span>
+              </span>
+            );
+          })}
+        </div>
+
+        <div className={styles.buttonWrapper}>
+          {router.pathname !== '/currency-exchange' && (
+            <button className={styles.button}>
+              <Image src="/assets/InfoSquare.svg" width={25} height={25} />
+              Trade Now
+            </button>
+          )}
+          <button className={styles.button}>
+            <Image src="/assets/InfoSquare.svg" width={25} height={25} />
+            Guide
+          </button>
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+export default Sidebar;

components/Sidebar/sidebar.module.css

@@ -0,0 +1,155 @@
+.wrapper {
+  font: 700 16px 'DM Sans', sans-serif;
+  margin-bottom: 25px;
+  width: 20vw;
+  height: max-content;
+  margin-right: auto;
+}
+
+.sidebar {
+  height: calc(100vh - 78px);
+  overflow-y: scroll;
+  background-color: #f8f7ff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 0.5px;
+}
+.sidebar::-webkit-scrollbar-thumb {
+  visibility: hidden;
+}
+
+.sidebar > * {
+  padding: 1.6rem;
+  width: 100%;
+}
+
+.heading {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+}
+
+.options{
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.option {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 6px 9px;
+  gap: 10px;
+  color: #a5a2b8;
+  cursor: pointer;
+}
+
+.option:hover {
+  color: #352e5bd0;
+}
+
+.option_image {
+  position: static;
+  color: #352e5b;
+}
+
+.option_active {
+  color: #352e5b;
+}
+
+.option_bar {
+  width: 3px;
+  aspect-ratio: 1/6;
+  background-color: #9381ff;
+  border-radius: 1px 0px 0px 1px;
+  right: -1.2rem;
+  position: absolute;
+  display: none;
+}
+
+.option_active .option_bar {
+  display: block;
+}
+
+.buttonWrapper {
+  width: 100%;
+  margin-top: auto;
+}
+
+.button {
+  width: 100%;
+  background-color: #041187;
+  height: 4rem;
+  border-radius: 8px;
+  border: none;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  font: 500 16px 'DM Sans', sans-serif;
+  margin-top: 1rem;
+}
+
+.mobileToggle{
+  display: none;
+}
+
+/* Responsive CSS */
+@media screen and (max-width: 970px) {
+  .wrapper{
+    width: 100vw;
+  }
+
+  .mobileToggle{
+    display: flex;
+    justify-content: space-between;
+    padding: 1.6rem;
+    background-color: #1D1283;
+    color: white;
+  }
+
+  .mobileToggle img{
+    transform: rotateZ(180deg);
+    transition: all 300ms ease-in;
+  }
+
+  .mobileToggle--active img{
+    transform: rotateZ(0deg);
+  }
+
+  .sidebar{
+    height: 0px;
+    transition: all 300ms ease-in;
+  }
+
+  .mobileToggle--active ~ .sidebar{
+    height: max-content;
+    margin-top: 0rem;
+    animation: MobileMenuAnimation 300ms forwards ;
+  }
+
+  .buttonWrapper{
+    margin-top: 1rem;
+  }
+}
+
+
+
+/* custom animations */
+@keyframes MobileMenuAnimation{
+  0%{
+    margin-top: -5rem;
+  }
+  100%{
+    margin-top: 0rem;
+  }
+}

components/breadcrumbs/breadcrumb.js

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import styles from './breadcrumbs.module.css';
+
+const Breadcrumb = ({ link, index, links }) => {
+  return (
+    <div className={styles.links} data-testid="breadcrumbs">
+      <Link key={link} href={`/${link !== 'home' ? link : ''}`}>
+        {link}
+      </Link>
+      <span>
+        {index !== links.length - 1 && <>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</>}
+      </span>
+    </div>
+  );
+};
+
+export default Breadcrumb;

components/breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,6 @@
+.links {
+  color: #a5a2b8;
+  text-transform: capitalize;
+  display: inline;
+  user-select: none;
+}

components/breadcrumbs/index.js

@@ -0,0 +1,15 @@
+import Breadcrumb from './breadcrumb';
+
+const Breadcrumbs = ({ links }) => {
+  return (
+    <div>
+      {links.map((link, index) => {
+        return (
+          <Breadcrumb key={link} index={index} link={link} links={links} />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Breadcrumbs;

components/chart-actions/chartActions.module.css

@@ -0,0 +1,42 @@
+.chart_actions {
+  background-color: #f8f7ff;
+  padding: 0.8rem 1rem;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  margin-top: 1rem;
+  display: flex;
+  gap: 2rem;
+}
+
+.button {
+  padding: 0.4rem 0.4rem;
+  color: white;
+  background-color: #2196f3;
+  border-radius: 4px;
+}
+
+.sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.month_select {
+  height: 100%;
+  padding: 0 0.4rem;
+  color: white;
+  background-color: #2196f3;
+  border-radius: 4px;
+}
+
+@media (min-width: 600px) {
+  .month_select,
+  .button {
+    padding: 0.4rem 0.9rem;
+  }
+}