Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

<!-- Dashboard Wrapper -->
<div class="dashboard">
  <!-- Sidebar -->
  <aside class="sidebar scrollbar__style">
    <h2 class="sidebar__title">Sales<span>_Dashboard</span></h2>
    <div class="sidebar__profile">
      <img src="https://assets.codepen.io/1610873/aiony-haust-3TLl_97HNJo-unsplash.jpg" alt="Unplash - Aiony Haust" class="sidebar__profile__img" />
      <div class="sidebar__profile__data">
        <p class="sidebar__profile__data__name">Sarah J.</p>
        <i class="fa-solid fa-right-from-bracket sidebar__profile__data__icon"></i>
      </div>
    </div>
    <nav class="sidebarNav">
      <ul class="sidebarNav__list">
        <li class="sidebarNav__item">
          <a href="#" class="sidebarNav__link sidebarNav__link--active">
            <i class="sidebarNav__icon fa-solid fa-gear"></i>
            <span class="sidebarNav__text">SETTINGS</span>
            <span class="sidebarNav__switch" data-sidebar="settings">+</span>
          </a>
          <ul class="submenu" data-sidebar="settings">
            <li class="submenu__item">
              <a href="#" class="submenu__link">Profile</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Dashboard</a>
            </li>
          </ul>
          <div class="sidebarNav__divider"></div>
        </li>
        <li class="sidebarNav__item">
          <a href="#" class="sidebarNav__link sidebarNav__link--active">
            <i class="fa-solid fa-chart-column sidebarNav__icon"></i>
            <span class="sidebarNav__text">SALES</span>
            <span class="sidebarNav__switch" data-sidebar="sales">+</span>
          </a>
          <ul class="submenu" data-sidebar="sales">
            <li class="submenu__item">
              <a href="#" class="submenu__link">Leads</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Statistics</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Products</a>
            </li>
          </ul>
          <div class="sidebarNav__divider"></div>
        </li>
        <li class="sidebarNav__item">
          <a href="#" class="sidebarNav__link sidebarNav__link--active">
            <i class="fa-solid fa-user-group sidebarNav__icon sidebarNav__iconSizeCustomer"></i>
            <span class="sidebarNav__text">CUSTOMER</span>
            <span class="sidebarNav__switch" data-sidebar="customer">+</span>
          </a>
          <ul class="submenu closed-by-default" data-sidebar="customer">
            <li class="submenu__item">
              <a href="#" class="submenu__link">New Customer</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Highest Sales</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Region</a>
            </li>
          </ul>
          <div class="sidebarNav__divider"></div>
        </li>
        <li class="sidebarNav__item">
          <a href="#" class="sidebarNav__link sidebarNav__link--active">
            <i class="fa-solid fa-layer-group sidebarNav__icon sidebarNav__iconSizeChannels"></i>
            <span class="sidebarNav__text">CHANNEL</span>
            <span class="sidebarNav__switch" data-sidebar="channels">+</span>
          </a>
          <ul class="submenu closed-by-default" data-sidebar="channels">
            <li class="submenu__item">
              <a href="#" class="submenu__link">Field Sales</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Customer Hotline</a>
            </li>
            <li class="submenu__item">
              <a href="#" class="submenu__link">Online</a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="sidebar__button">
        <span>Download</span>
        <i class="fa-solid fa-download"></i>
      </div>
    </nav>
  </aside>
  <!-- Dashboard Content -->
  <main class="dashboard__content">
    <h3 class="dashboard__content__title">Sales Dashboard Sumary</h3>
    <div class="dashboard__grid">
      <!-- ROW ONE -->
      <label class="dashboard__grid__selectLabel grid__stagger" id="statistic-time">
        Auto range:
        <select class="dashboard__grid__selectLabel__select" name="time">
          <option value="month">Month</option>
          <option value="year">Year</option>
          <option value="allTime">All</option>
        </select>
      </label>
      <label class="dashboard__grid__selectLabel grid__stagger" id="statistic-region">
        Region:
        <select class="dashboard__grid__selectLabel__select" name="region" style="margin-top: 10px">
          <option value="usa">USA</option>
          <option value="emea">EMEA</option>
          <option value="allRegions">All regions</option>
        </select>
      </label>
      <label class="dashboard__grid__selectLabel grid__stagger" id="statistic-channel">Sales channel:
        <select class="dashboard__grid__selectLabel__select" name="channel">
          <option value="allChannel">All Channels</option>
          <option value="field">Field Sales</option>
          <option value="web">Online</option>
          <option value="hotline">Customer Hotline</option>
        </select>
      </label>
      <div class="sales__data grid__stagger" id="salesData">
        <div class="sales__data__profit">
          <span class="sales__data__profit__icon">
            <i class="fa-solid fa-coins"></i>
          </span><span class="sales__data__profit__text">Profit</span><span class="sales__data__profit__result">+ 7%</span>
        </div>
        <div class="sales__data__margin">
          <span class="sales__data__margin__icon"><i class="fa-solid fa-percent"></i></span><span class="sales__data__margin__text">Margin</span><span class="sales__data__margin__result">+ 14%</span>
        </div>
      </div>

      <!-- ROW TWO SALES FIGURES, MESSAGE -->
      <div class="dashboard__grid__salesFigures card-purple grid__stagger" id="totalCustomer">
        <h5 class="dashboard__grid__salesFigures__title">Total Sales</h5>
        <p class="dashboard__grid__salesFigures__salesValues"><span class="animatedCount">91.528 </span>$</p>
        <p class="dashboard__grid__salesFigures__winOrLoose">14%<i class="fa-solid fa-thumbs-up"></i></p>
        <p class="dashboard__grid__salesFigures__period">vs previous 30 days days</p>
      </div>
      <div class="dashboard__grid__salesFigures card-blue grid__stagger" id="orders">
        <h5 class="dashboard__grid__salesFigures__title">Orders per Month</h5>
        <p class="dashboard__grid__salesFigures__salesValues"><span class="animatedCount">136</span></p>
        <p class="dashboard__grid__salesFigures__winOrLoose">7% <i class="fa-solid fa-thumbs-down"></i></p>
        <p class="dashboard__grid__salesFigures__period">vs previous 30 days days</p>
      </div>
      <div class="dashboard__grid__salesFigures card-purple grid__stagger" id="salesVolume">
        <h5 class="dashboard__grid__salesFigures__title">Average Contract</h5>
        <p class="dashboard__grid__salesFigures__salesValues">673</p>
        <p class="dashboard__grid__salesFigures__winOrLoose">12% <i class="fa-solid fa-thumbs-up"></i></p>
        <p class="dashboard__grid__salesFigures__period">vs previous 30 days days</p>
      </div>
      <div class="dashboard__grid__salesFigures card-blue grid__stagger" id="increase">
        <h5 class="dashboard__grid__salesFigures__title">Growth Rate</h5>
        <p class="dashboard__grid__salesFigures__salesValues dashboard__grid__salesFigures__growth"><span class="animatedCount">12%</span></p>
      </div>
      <div class="message__center grid__stagger" id="messageBox">
        <h3 class="message__center__title">Messages:</h3>
        <div class="message__center__container scrollbar__style">
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/Agnes.jpg" alt="Unsplash - Christina @ wocintechchat.com" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Agnes (Customer Support)</span>
              <span class="message__center__message__timeDate">Today 18:17 am</span>
              <span class="message__center__message__text">Please call Jonathan James from Fluid back. He has an urgent query regarding his order</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
          <div class="message__center__line"></div>
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/Jonny.jpg" alt="Unsplash - Ransford Quaye" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Jonny (Sales Support)</span>
              <span class="message__center__message__timeDate">Today 15:33 pm</span>
              <span class="message__center__message__text">The order from Dubidor Inc. is awaiting approval. Please check the details again and call back</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
          <div class="message__center__line"></div>
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/Amy.jpg" alt="Unsplash - Joel Mott" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Amy (Field Sales)</span>
              <span class="message__center__message__timeDate">Today 16:23 pm</span>
              <span class="message__center__message__text">The customer Rohmeyer would like an appointment with both of us. Please call back</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
          <div class="message__center__line"></div>
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/Julia.jpg" alt="Unsplash - Jake Nackos" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Julia (Field Sales)</span>
              <span class="message__center__message__timeDate">Yesterday 10:37 am</span>
              <span class="message__center__message__text">The customer Amsora received its advertising subsidy in July. I sent him the payment receipt</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
          <div class="message__center__line"></div>
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/Jason.jpg" alt="Unsplash - Albert Dera" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Jason (Customer Support)</span>
              <span class="message__center__message__timeDate">Yesterday 08:03 am</span>
              <span class="message__center__message__text">
                The customer Appencell has canceled the appointment for August. He asks to call back to set a new appointment</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
          <div class="message__center__line"></div>
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/Luna.jpg" alt="Unsplash - Christopher Campbell" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Luna (Field Sales)</span>
              <span class="message__center__message__timeDate">14.11 - 14:49 pm</span>
              <span class="message__center__message__text">Hi Julia, haven't heard from you in a long time. If you have time and feel like it, let's have lunch later?</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
          <div class="message__center__line"></div>
          <div class="message__center__wrapper">
            <img src="https://assets.codepen.io/1610873/christopher.jpg" alt="Unsplash - Radu Florin" class="message__center__img">
            <p class="message__center__message">
              <span class="message__center__message__from">Christopher (Accounting)</span>
              <span class="message__center__message__timeDate">07.11 - 11:15 am</span>
              <span class="message__center__message__text">
                I have a question about Novatil Invest and the discount granted for the two invoices from December</span>
            </p>
            <button class="message__center__message__question">Reply</button>
            <button class="message__center__message__done">Done</button>
          </div>
        </div>
      </div>

      <!-- ROW THREE CHARTS-->
      <div id="data-chartOne" class="grid__stagger">
        <h3>Sales figures by month:</h3>
        <canvas id="line-chart"></canvas>
      </div>
      <div id="data-chartTwo" class="grid__stagger">
        <h3>Product categories:</h3>
        <canvas id="doughnut"></canvas>
      </div>
      <div id="data-chartThree" class="grid__stagger">
        <h3>Product categories:</h3>
        <canvas id="polar-area-chart"></canvas>
      </div>
    </div>
    <div class="addMoreChartsBtn">
      <i class="fa-solid fa-circle-plus"></i>
    </div>
  </main>
</div>
!

CSS 

              
                :root {
  /* Font families */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Roboto", sans-serif;

  /* Colors */
  --dark-bg: #111525;
  --dark-secondary: #161b2e;
  --card-bg: #1d2238;
  --light-purple: #8a7fa4;
  --turquoise: #44d7b6;
  --pink: #f56ee1;
  --white: #ffffff;
}

/* Global rules */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--dark-bg);
  color: var(--white);
  font-family: var(--font-secondary);

  h2,
  h3,
  h5 {
    font-family: var(--font-primary);
  }
}

// GSAP Stagger Animation
.grid__stagger {
  opacity: 0;
}

// Scrollbar styling
.scrollbar__style {
  &::-webkit-scrollbar {
    width: 5px;
    background-color: #f9a7fa1d;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #f56ee1;
    border-radius: 5px;

    &:hover {
      background-color: darken(#f56ee1, 10%);
    }
  }
}

// Sidebar - Title, Button
.sidebar {
  background: var(--dark-secondary);
  left: 0;
  top: 0;
  height: 100vh;
  min-width: 200px;
  padding: 1rem;
  overflow-y: scroll;
  position: fixed;

  &__profile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2rem 0;

    &__img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    &__data {
      display: flex;
      gap: 10px;
      margin-top: 7px;
      font-size: 0.9rem;
      text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);

      &__icon {
        color: var(--light-purple);
        font-size: 0.8rem;
        line-height: 1rem;
        cursor: pointer;
      }
    }
  }

  &__title {
    font-size: 1.7rem;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);

    span {
      font-size: 0.6rem;
      color: var(--light-purple);
      font-style: italic;
    }
  }

  &__button {
    width: 100%;
    border-radius: 20px;
    background-image: linear-gradient(to right, darken(#f56ee1, 5%), #ae6ef5);
    border: none;
    padding: 0.5rem;
    text-align: left;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    position: relative;
    margin-top: 30px;
    background-size: 200%;
    transition: all 0.3s;

    &:hover {
      background-size: 100%;
      transition: all 0.3s;
      scale: 1.02;
    }

    &:active {
      transform: translatey(2px);
    }

    span {
      padding-left: 8px;
    }

    i {
      position: absolute;
      right: 15px;
    }
  }
}

// Sidebar Navigation
.sidebarNav {
  &__list {
    list-style: none;
  }

  &__item {
    margin-top: 2rem;
    list-style-type: none;
  }

  &__link {
    color: var(--white);
    text-decoration: none;
    position: relative;
    display: block;
  }

  &__text,
  &__icon {
    color: var(--pink);
    cursor: pointer;
  }

  &__icon {
    font-size: 1.3rem;
    margin-right: 5px;
  }

  &__iconSizeCustomer {
    font-size: 1.1rem;
  }

  &__iconSizeChannels {
    font-size: 1.2rem;
  }

  &__text {
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  }

  &__switch {
    position: absolute;
    right: 0;
    top: 1px;
    color: var(--light-purple);
  }

  &__divider {
    margin-top: 20px;
    width: 100%;
    height: 1px;
    background: var(--light-purple);
    opacity: 0.3;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  }
}

// Sidebar Submenu
.submenu {
  list-style: none;
  margin: 0.7rem 0;

  &__item {
    position: relative;
    padding: 0.8rem;
    font-size: 0.8rem;
    transition: transform 0.3s;

    // Pseudo-element for the gradient background
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(to right, #f56ee1, #ae6ef5);
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 10px;
      pointer-events: none;
    }

    &:active {
      transform: translatey(2px);
      transition: transform 0.3s;
    }

    &:hover {
      color: #000;

      &::after {
        opacity: 1;
      }
    }
  }

  &__link {
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
}

/***********
SIDEBAR END
************/

/***********
DASHBOARD
************/
.dashboard {
  display: flex;
  
  &__content {
    height: 100vh;
    margin-left: 270px;

    &__title {
      padding: 1.5rem 0;
      text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
    }
  }
}

// Dashboard Grid
.dashboard__grid {
  display: grid;
  grid-template-areas:
    "dateRange region channel salesData"
    "totalCustomer orders salesVolume increase"
    "messageBox messageBox productCategories productCategories"
    "salesFigure salesFigure salesChart salesChart";
  grid-template-columns: repeat(4, 260px);
  align-items: center;
  padding-bottom: 50px;
  gap: 20px;

  // Arrange Row 1
  #statistic-time {
    grid-area: dateRange;
  }

  #statistic-region {
    grid-area: region;
  }

  #statistic-channel {
    grid-area: channel;
  }

  #customerInfo {
    grid-area: newCustomers;
  }

  #salesData {
    grid-area: salesData;
  }

  // Arrange Row 2
  #totalCustomer {
    grid-area: totalCustomer;
  }

  #orders {
    grid-area: orders;
  }

  #salesVolume {
    grid-area: salesVolume;
  }

  #increase {
    grid-area: increase;
  }

  // Arange Row 3
  #data-chartOne,
  #data-chartTwo,
  #data-chartThree {
    padding: 1rem 1.5rem 1rem 1.5rem;
    background: var(--card-bg);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    height: 350px;

    h3 {
      font-weight: 600;
      font-size: 1rem;
    }
  }

  #messageBox {
    grid-area: messageBox;
  }

  #data-chartOne {
    grid-area: salesFigure;

    #line-chart {
      padding: 1rem;
      margin-top: 10px;
    }
  }

  #data-chartTwo {
    grid-area: productCategories;

    #doughnut {
      margin: 10px 0 0 20px;
    }
  }

  #data-chartThree {
    grid-area: salesChart;

    #polar-area-chart {
      margin-top: 10px;
      padding: 1rem;
    }
  }
}

// Row 1 Select Fields
.dashboard__grid__selectLabel {
  font-size: 0.8rem;
  height: 80px;
  color: var(--pink);
  background: var(--card-bg);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
  padding: 1rem 1.2rem;
  border-radius: 15px;
  border: none;

  &__select {
    margin: 10px 0;
    width: 90%;
    background: transparent;
    color: var(--white);
    border: none;
  }
}

// Row 1 Sales Data
.sales__data {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: bold;

  &__profit,
  &__margin {
    position: relative;
    background: var(--card-bg);
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 0.8rem;
    align-items: center;
    border-radius: 15px;
    height: 35px;

    &__icon {
      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.8rem;
    }

    &__result {
      padding: 0.3rem 0.5rem;
      border-radius: 5px;
      font-size: 0.65rem;
      position: absolute;
      right: 30px;
    }
  }

  &__profit {
    margin-bottom: 10px;

    &__icon {
      background: linear-gradient(135deg, #9c27b0, #e040fb);
    }

    &__result {
      background: darken(#a79aff, 10%);
    }
  }

  &__margin {
    &__icon {
      background: linear-gradient(135deg, #03a9f4, #00bcd4);
    }

    &__result {
      background: darken(#44d7b6, 10%);
    }
  }
}

// Row 2 Sales Figures
.dashboard__grid__salesFigures {
  position: relative;
  height: 170px;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  font-weight: bold;

  &__salesValues {
    font-family: var(--font-primary);
    text-align: center;
    font-size: 2.5rem;
    border-radius: 10px;
    letter-spacing: 1px;
    margin-top: 20px;
  }

  &__growth {
    font-size: 4rem;
    margin-top: 8px;
  }

  &__winOrLoose {
    text-align: center;
    font-size: 0.7rem;

    i {
      padding-left: 3px;
    }
  }

  &__period {
    margin-top: 20px;
    font-weight: 400;
    font-size: 0.55rem;
  }
}

// Row 2 Card Colors
.card-purple {
  background: linear-gradient(135deg, #9c27b0, #e040fb);
  color: white;
}

.card-blue {
  background: linear-gradient(135deg, #03a9f4, #00bcd4);
  color: white;
}

// Message Center
.message__center {
  background: var(--card-bg);
  height: 350px;
  border-radius: 15px;
  padding: 1rem 1.5rem 1rem 1.5rem;

  &__line {
    height: 0.5px;
    width: 95%;
    background: var(--pink);
    margin: auto;
    opacity: 0.4;
  }

  &__title {
    font-weight: 600;
    font-size: 1rem;
  }

  &__img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }

  &__container {
    overflow-y: scroll;
    height: 250px;
    margin: 20px auto;
  }

  &__wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem;
  }

  &__message {
    font-size: 0.7rem;

    &__from {
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 3px;
      display: inline-block;
      color: var(--pink);
    }

    &__text {
      display: block;
      width: 90%;
    }

    &__question,
    &__done {
      border-radius: 15px;
      border: none;
      padding: 0.5rem;
      color: white;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 0.6rem;
    }

    &__question {
      background: darken(#a79aff, 10%);
    }

    &__done {
      background: darken(#44d7b6, 10%);
    }

    &__timeDate {
      font-size: 0.6rem;
      font-style: italic;
      opacity: 0.6;
    }
  }
}

// More Charts Button
.addMoreChartsBtn {
  text-align: center;
  display: block;
  opacity: 1;
  margin-top: 20px;
  padding-bottom: 50px;

  &:active {
    transform: translateY(2px);
  }

  i {
    background: linear-gradient(135deg, #9c27b0, #e040fb);
    font-size: 3rem;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;

    &:hover {
      transform: rotate(90deg);
    }
  }
}

// Media Querys
@media (min-width: 1750px) {
  .dashboard__grid {
    grid-template-areas:
      "dateRange region channel salesData salesFigure"
      "totalCustomer orders salesVolume increase salesFigure"
      "messageBox messageBox productCategories productCategories salesChart";
    justify-content: center;
    grid-template-columns: repeat(4, 250px);
    margin-top: 30px;
    padding: 0;

    // Charts
    .message__center,
    #data-chartOne,
    #data-chartTwo,
    #data-chartThree {
      height: 280px;
    }

    #data-chartOne,
    #data-chartThree {
      width: 400px;
    }

    #data-chartOne {
      #line-chart {
        padding: 0;
        margin-top: 0.5rem;
      }
    }

    #data-chartTwo {
      #doughnut {
        margin-top: -10px;
        transform: scale(0.85);
      }
    }

    #data-chartThree {
      margin: 0;

      #polar-area-chart {
        padding: 0;
        margin-top: 1rem;
      }
    }
  }

  // Message
  .message__center__container {
    height: 185px;
  }

  .addMoreChartsBtn {
    margin-top: 40px;
  }
}

@media (max-width: 1380px) {
  .dashboard {
    &__grid {
      grid-template-areas:
        "dateRange region"
        "channel salesData"
        "totalCustomer orders"
        "salesVolume increase"
        "messageBox messageBox"
        "productCategories productCategories"
        "salesFigure salesFigure"
        "salesChart salesChart";
      grid-template-columns: repeat(2, 350px);
      //justify-content: center;

      #data-chartOne,
      #data-chartTwo,
      #data-chartThree {
        height: 410px;
      }

      .message__center__container {
        width: 90%;
      }
    }
  }
}

@media (min-width: 320px) and (max-width: 950px) {
  .dashboard__grid {
    grid-template-columns: repeat(2, 250px);
  }
}
!

JS 

              
                // Store sidebar timelines
let sidebarTimelines = {};

document.addEventListener("DOMContentLoaded", () => {
/*******************
SIDEBAR ANIMATIONS
*******************/
  // Select all sidebar navigation switches for interaction
  const toggleSubmenu = document.querySelectorAll(".sidebarNav__switch");
  // Iterate over each submenu switch to set up individual animations
  toggleSubmenu.forEach((submenuSwitch) => {
    // Retrieve the unique identifier for each submenu
    const menuValue = submenuSwitch.getAttribute("data-sidebar");
    // Select the corresponding submenu DOM element
    const submenuWrapper = document.querySelector(
      `.submenu[data-sidebar='${menuValue}']`
    );

    // Initialize with closed state for certain tabs
    const shouldBeClosedByDefault = submenuWrapper.classList.contains(
      "closed-by-default"
    );

    // Initialize GSAP timeline for each submenu, starting in a paused state
    sidebarTimelines[menuValue] = gsap.timeline({ paused: true });

    // Check if the submenu should be closed initially
    if (shouldBeClosedByDefault) {
      // Configure animation: start closed (hidden) and animate to open (visible)
      sidebarTimelines[menuValue]
        .fromTo(submenuWrapper, { autoAlpha: 0, height: 0 }, { height: "auto" })
        .to(submenuWrapper, { autoAlpha: 1, ease: "slow(0.7,0.7,false)" });
    } else {
      // Configure animation: start open (visible) and animate to closed (hidden)
      sidebarTimelines[menuValue]
        .fromTo(
          submenuWrapper,
          { autoAlpha: 1 },
          { autoAlpha: 0, ease: "slow(0.7,0.7,false)" }
        )
        .to(submenuWrapper, { height: 0 });
    }

    // Add click event listener to each submenu switch
    submenuSwitch.addEventListener("click", (e) => {
      e.preventDefault();
      toggleSidebarAnimation(menuValue);
    });
  });

  // Function to toggle the animation of a given submenu
  function toggleSidebarAnimation(menuValue) {
    const tl = sidebarTimelines[menuValue];

    // Play or reverse based on the current progress
    if (tl.progress() === 1) {
      tl.reverse();
    } else {
      tl.play();
    }
  }

/*******************
SIDEBAR ANIMATIONS END
*******************/

/*******************
Dahboard Stagger animation
*******************/
  gsap.fromTo(
    ".grid__stagger",
    { y: 10, opacity: 0 },
    { y: 0, opacity: 1, stagger: 0.1, duration: 0.8, ease: "power1.in" }
  );
  gsap.fromTo(
    ".addMoreChartsBtn",
    { autoAlpha: 0 },
    { autoAlpha: 1, delay: 2.5, duration: 0.5, ease: "power1.in" }
  );


/*******************
Chart.js
*******************/

  // Chart One
  const ctx = document.getElementById("line-chart").getContext("2d");
  const myLineChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [
        {
          label: "Current period",
          backgroundColor: "rgb(68, 215, 182)",
          borderColor: "#44d7b6",
          data: [70, 100, 130, 120, 180, 100],
          fill: false,
          borderWidth: 2
        },
        {
          label: "Previous year",
          backgroundColor: "rgb(77, 91, 158)",
          borderColor: "#4d5b9e",
          data: [50, 140, 50, 220, 160, 180],
          fill: false,
          borderWidth: 2
        }
      ]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        legend: {
          labels: {
            padding: 20,
            usePontstyle: true
          }
        }
      }
    }
  });

  // Chart Two
  const ctx2 = document.getElementById("doughnut").getContext("2d");
  const myDoughnutChart = new Chart(ctx2, {
    type: "doughnut",
    data: {
      labels: ["Advertising", "Market Research", "Strategy", "Consulting"],
      datasets: [
        {
          label: "My second dataset",
          backgroundColor: [
            "rgba(245, 110, 225, .3)",
            "rgba(68, 215, 182, .5)",
            "rgba(77, 91, 158, .5)",
            "rgb(75, 192, 192)"
          ],
          data: [12, 19, 3, 5]
        }
      ]
    },
    options: {
      responsive: true,
      mainAspectRatio: true,
      aspectRatio: 2,
      layout: {
        padding: {
          top: -100
        }
      },
      plugins: {
        datalabels: {
          color: "#fff",
          textAlign: "center",
          font: {
            weight: "bold",
            family: 'Poppins", sans-serif'
          }
        },
        legend: {
          labels: {
            color: "#fff",
            font: {
              size: 12,
            }
          },
          position: "left",
          display: true
        },
        title: {
          display: false
        },
        tooltip: {
          enable: true
        }
      }
    }
  });

  // Use Function to update the Doughnut Font Size
  updateFontSize(myDoughnutChart);

  // Add event listener to react to size updates
  window.addEventListener("resize", () => {
    updateFontSize(myDoughnutChart);
  });

  // Chart Three
  const ctx3 = document.getElementById("polar-area-chart").getContext("2d");

  const myPolarAreaChart = new Chart(ctx3, {
    type: "bar",
    data: {
      labels: ["Advertising", "Research", "Strategy", "Consulting"],
      datasets: [
        {
          label: "Current Period",
          backgroundColor: "#44d7b6",
          borderColor: "#161b2e",
          borderWidth: 1,
          data: [50, 100, 150, 200]
        },
        {
          label: "Previuos year",
          backgroundColor: "#6c5dd3",
          borderColor: "#4d5b9e",
          borderWidth: 1,
          data: [80, 120, 120, 160]
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        legend: {
          labels: {
            size: 16,
            color: "#a4a4a4"
          }
        }
      }
    }
  });
});

// Update function for Chart2 for bigger Screens
function updateFontSize(ctx) {
  const setFontSize = window.innerWidth > 1450 ? 18 : 16;

  ctx.options.plugins.legend.labels.font.size = setFontSize;
  ctx.update();
}
!
999px

Console