dropdown

client/src/components/navigation/Dropdown/dropdown.scss

+@use 'styles/settings.scss'as s;
+
+.dropdown-container {
+    position: relative;
+    cursor: pointer;
+    padding-bottom: 5px;
+
+    &.open {
+        .dropdown {
+            opacity: 1;
+            transform: translateY(100%);
+            visibility: visible;
+        }
+    }
+
+    .dropdown {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transform: translateY(75%);
+        background: s.$white;
+        z-index: 2000;
+        max-width: 200px;
+        border-radius: 5px;
+        box-shadow: 0 0 5px rgba(s.$black, 0.05);
+        visibility: hidden;
+        opacity: 0;
+
+
+        .dropdown-item {
+            padding: 10px 20px;
+            display: block;
+            color: s.$body-color;
+            border-radius: 5px;
+
+            &:hover {
+                box-shadow: 0 0 10px rgba(s.$black, 0.1);
+            }
+        }
+    }
+}
\ No newline at end of file

client/src/components/navigation/Dropdown/index.tsx

+import { ReactNode, useState } from 'react';
+import { Link } from 'react-router-dom';
+import './dropdown.scss';
+
+interface DropDownItem {
+    label: string;
+    route: string;
+}
+
+interface Props {
+    children: ReactNode;
+    items: DropDownItem[]
+}
+
+export default function Dropdown({ children, items }: Props) {
+    const [isOpen, setOpen] = useState(false);
+    return (
+        <div className={'dropdown-container' + (isOpen ? ' open' : '')} onClick={() => setOpen(state => !state)}>
+            {children}
+            <div className="dropdown">
+                {
+                    items.map((item) => (
+                        <Link className="dropdown-item" to={item.route}>
+                            {item.label}
+                        </Link>
+                    ))
+                }
+            </div>
+        </div>
+    );
+}
\ No newline at end of file

client/src/components/navigation/Tabs/tabs.scss

@@ -5,6 +5,7 @@
     justify-content: space-between;
     background: rgba(s.$white, 0.25);
     border-radius: 15px;
+    margin-top: 30px;
     position: relative;
 
     .tab {

client/src/components/ui/DetailBox/detail-box.scss

@@ -34,11 +34,8 @@
             }
 
             @include mx.breakpoint(medium) {
-                width: 64px;
-                height: 64px;
-
                 .icon {
-                    font-size: 32px;
+                    font-size: 28px;
                 }
             }
         }

client/src/pages/Teams/TeamsStats/index.tsx

+import Dropdown from 'components/navigation/Dropdown';
 import './teams-stats.scss';
 
 export default function TeamsStats() {
     return (
         <section className="teams-stats-section">
             <div className="content-container">
+                <Dropdown items={[{ label: "Last month", route: "lastmonth" }]}>
+                    <div className="filter-label">
+                        <span className="material-icons icon">
+                            expand_more
+                        </span>
+                        Last week
+                        </div>
+                </Dropdown>
                 test
             </div>
         </section>