-
-
-
TensorFlow
-
-
-
-
-
- {
- routes.map(route => (
-
{
- goToRoute(route.path);
- }}
- >
-
- { route.title }
-
- ))
- }
-
-
- {
- bottomRoutes.map(route => (
-
{
- goToRoute(route.path);
- }}
- >
-
- { route.title }
-
- ))
- }
-
+ return (
+
+
+
+ setIsCollapsed((prev) => !prev)}
+ />
+
+
+ {TOP_ROUTES?.map((route) => (
+ goToRoute(route.path)}
+ theme={localTheme}
+ isActive={currentPath === route.path}
+ collapsed={isCollapsed}
+ />
+ ))}
+
- );
+
+
+
+ {BOTTOM_ROUTES.map((route) => (
+ goToRoute(route.path)}
+ theme={localTheme}
+ collapsed={isCollapsed}
+ />
+ ))}
+
+
+
+
+ );
};
Sidebar.propTypes = {
- color: PropTypes.string,
+ color: PropTypes.string,
};
+const SidebarContainer = styled.div`
+ width: ${({ $collapsed }) => ($collapsed ? "38px" : "260px")};
+ background: ${({ theme }) => theme.sidebarBackground};
+ color: ${({ theme }) => theme.textDefault};
+ padding: 0px 24px;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ transition: width 0.3s ease, background 0.3s, color 0.3s;
+ position: relative;
+`;
+
+const SidebarContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+`;
+
+const RouteSection = styled.div`
+ margin-top: 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
+const BottomSection = styled.div`
+ padding-bottom: 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
export default Sidebar;
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..8a4f74a
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { useTheme } from "../theme/ThemeContext";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+
+const ToggleButton = styled.button`
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ top: 20px;
+ background: ${({ theme }) => theme.buttonBackground};
+ color: ${({ theme }) => theme.textDefault};
+ border: none;
+ border-radius: 6px;
+ padding: 10px 20px;
+ font-size: 1rem;
+ cursor: pointer;
+ margin: 0 auto;
+ display: block;
+ transition: background 0.3s, color 0.3s;
+ &:hover {
+ background: ${({ theme }) => theme.buttonBackgroundActive};
+ color: ${({ theme }) => theme.textHover};
+ }
+`;
+
+const ThemeToggle = () => {
+ const { themeName, toggleTheme, theme } = useTheme();
+ return (
+
+
+
+ );
+};
+
+export default ThemeToggle;
diff --git a/src/constants/sidebarRoutes.js b/src/constants/sidebarRoutes.js
new file mode 100644
index 0000000..caaadf1
--- /dev/null
+++ b/src/constants/sidebarRoutes.js
@@ -0,0 +1,13 @@
+export const TOP_ROUTES = [
+ { title: "Home", icon: "fas-solid fa-house", path: "/" },
+ { title: "Sales", icon: "chart-line", path: "/sales" },
+ { title: "Costs", icon: "chart-column", path: "/costs" },
+ { title: "Payments", icon: "wallet", path: "/payments" },
+ { title: "Finances", icon: "chart-pie", path: "/finances" },
+ { title: "Messages", icon: "envelope", path: "/messages" },
+];
+
+export const BOTTOM_ROUTES = [
+ { title: "Settings", icon: "sliders", path: "/settings" },
+ { title: "Support", icon: "phone-volume", path: "/support" },
+];
diff --git a/src/index.scss b/src/index.scss
index 01632cd..e5c5f40 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,25 +1,25 @@
:root {
- // dark
- --color-sidebar-background-dark-default: #202127;
- --color-sidebar-background-dark-hover: #2D2E34;
- --color-sidebar-background-dark-active: #393A3F;
- --color-text-dark-default: #f0f2ff;
- --color-text-dark-hover: #f0f2ff;
- --color-text-dark-active: #f0f2ff;
- --color-text-logo-dark-default: #3B82F6;
- --color-button-background-dark-default: #202127;
- --color-button-background-dark-active: #4B5966;
+ // dark
+ --color-sidebar-background-dark-default: #202127;
+ --color-sidebar-background-dark-hover: #2d2e34;
+ --color-sidebar-background-dark-active: #393a3f;
+ --color-text-dark-default: #f0f2ff;
+ --color-text-dark-hover: #f0f2ff;
+ --color-text-dark-active: #f0f2ff;
+ --color-text-logo-dark-default: #3b82f6;
+ --color-button-background-dark-default: #202127;
+ --color-button-background-dark-active: #4b5966;
- // light
- --color-sidebar-background-light-default: #fff;
- --color-sidebar-background-light-hover: #f0f2ff;
- --color-sidebar-background-light-active: #f0f2ff;
- --color-text-light-default: #97a5b9;
- --color-text-light-hover: #091b31;
- --color-text-light-active: #0000b5;
- --color-text-logo-light-default: #0000b5;
- --color-button-background-light-default: #fff;
- --color-button-background-light-active: #e2e8f0;
+ // light
+ --color-sidebar-background-light-default: #fff;
+ --color-sidebar-background-light-hover: #f0f2ff;
+ --color-sidebar-background-light-active: #f0f2ff;
+ --color-text-light-default: #97a5b9;
+ --color-text-light-hover: #091b31;
+ --color-text-light-active: #0000b5;
+ --color-text-logo-light-default: #0000b5;
+ --color-button-background-light-default: #fff;
+ --color-button-background-light-active: #e2e8f0;
}
html {
@@ -29,3 +29,7 @@ html {
background-color: #e2e8f0;
color: rgba(255, 255, 255, 0.87);
}
+
+body {
+ margin: 0px;
+}
diff --git a/src/theme/ThemeContext.jsx b/src/theme/ThemeContext.jsx
new file mode 100644
index 0000000..726b826
--- /dev/null
+++ b/src/theme/ThemeContext.jsx
@@ -0,0 +1,39 @@
+import { createContext, useContext, useState, useMemo } from "react";
+import { lightTheme, darkTheme } from "./theme";
+import PropTypes from "prop-types";
+import { getLocalStorage, setLocalStorage } from "../utils/localStorage";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+ const getDefaultTheme = () => {
+ const stored = getLocalStorage("themeName");
+ if (stored) return stored;
+ if (
+ window.matchMedia &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ ) {
+ return "dark";
+ }
+ return "light";
+ };
+ const [themeName, setThemeName] = useState(getDefaultTheme);
+ const theme = useMemo(
+ () => (themeName === "light" ? lightTheme : darkTheme),
+ [themeName]
+ );
+ const toggleTheme = () => {
+ const otherTheme = themeName === "light" ? "dark" : "light";
+ setThemeName(otherTheme);
+ setLocalStorage("themeName", otherTheme);
+ };
+ return (
+
+ {children}
+
+ );
+};
+ThemeProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+export const useTheme = () => useContext(ThemeContext);
diff --git a/src/theme/theme.js b/src/theme/theme.js
new file mode 100644
index 0000000..072b64c
--- /dev/null
+++ b/src/theme/theme.js
@@ -0,0 +1,23 @@
+export const lightTheme = {
+ sidebarBackground: "#fff",
+ sidebarBackgroundHover: "#f0f2ff",
+ sidebarBackgroundActive: "#f0f2ff",
+ textDefault: "#97a5b9",
+ textHover: "#091b31",
+ textActive: "#0000b5",
+ logoText: "#0000b5",
+ buttonBackground: "#fff",
+ buttonBackgroundActive: "#e2e8f0",
+};
+
+export const darkTheme = {
+ sidebarBackground: "#202127",
+ sidebarBackgroundHover: "#2D2E34",
+ sidebarBackgroundActive: "#393A3F",
+ textDefault: "#f0f2ff",
+ textHover: "#f0f2ff",
+ textActive: "#f0f2ff",
+ logoText: "#3B82F6",
+ buttonBackground: "#202127",
+ buttonBackgroundActive: "#4B5966",
+};
diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
new file mode 100644
index 0000000..a747a1d
--- /dev/null
+++ b/src/utils/localStorage.js
@@ -0,0 +1,18 @@
+export const getLocalStorage = (key, defaultValue) => {
+ if (typeof window === "undefined") return defaultValue;
+ try {
+ const stored = window.localStorage.getItem(key);
+ return stored !== null ? JSON.parse(stored) : defaultValue;
+ } catch {
+ return defaultValue;
+ }
+};
+
+export const setLocalStorage = (key, value) => {
+ if (typeof window === "undefined") return;
+ try {
+ window.localStorage.setItem(key, JSON.stringify(value));
+ } catch (error) {
+ console.error("Failed to save to localStorage:", error);
+ }
+};