diff --git a/src/app/organisms/navigation/Navigation.jsx b/src/app/organisms/navigation/Navigation.jsx
index 24bd1bd2..d457321f 100644
--- a/src/app/organisms/navigation/Navigation.jsx
+++ b/src/app/organisms/navigation/Navigation.jsx
@@ -1,12 +1,14 @@
import React from 'react';
import './Navigation.scss';
+import { Sidebar1 } from './Sidebar1';
import SideBar from './SideBar';
import Drawer from './Drawer';
function Navigation() {
return (
+
diff --git a/src/app/organisms/navigation/Sidebar1.tsx b/src/app/organisms/navigation/Sidebar1.tsx
new file mode 100644
index 00000000..fa09c259
--- /dev/null
+++ b/src/app/organisms/navigation/Sidebar1.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { Icon, Icons, Badge, AvatarFallback, Text } from 'folds';
+
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarStackSeparator,
+ SidebarStack,
+ SidebarAvatar,
+} from '../../components/sidebar';
+
+export function Sidebar1() {
+ return (
+
+
+
+ }
+ />
+ } />
+
+
+
+ (
+
+ )}
+ avatarChildren={
+
+ B
+
+ }
+ />
+ (
+
+ 64
+
+ )}
+ avatarChildren={
+
+ C
+
+ }
+ />
+
+
+
+ }
+ />
+ }
+ />
+
+ >
+ }
+ sticky={
+ <>
+
+
+ }
+ />
+
+ A
+
+ }
+ />
+
+ >
+ }
+ />
+
+ );
+}
diff --git a/src/app/pages/App.jsx b/src/app/pages/App.jsx
index af7cc29b..2828d7be 100644
--- a/src/app/pages/App.jsx
+++ b/src/app/pages/App.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
+import { Provider } from 'jotai';
import { isAuthenticated } from '../../client/state/auth';
@@ -6,7 +7,11 @@ import Auth from '../templates/auth/Auth';
import Client from '../templates/client/Client';
function App() {
- return isAuthenticated() ? : ;
+ return (
+
+ {isAuthenticated() ? : }
+
+ );
}
export default App;
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index d9eac0aa..27c8870f 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -1,5 +1,6 @@
import { atom } from 'jotai';
+const STORAGE_KEY = 'settings';
export interface Settings {
themeIndex: number;
useSystemTheme: boolean;
@@ -27,13 +28,12 @@ const defaultSettings: Settings = {
};
export const getSettings = () => {
- const settings = localStorage.getItem('settings');
+ const settings = localStorage.getItem(STORAGE_KEY);
if (settings === null) return defaultSettings;
return JSON.parse(settings) as Settings;
};
export const setSettings = (settings: Settings) => {
- const STORAGE_KEY = 'settings';
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
};
diff --git a/src/index.jsx b/src/index.jsx
index da515f85..55cb534d 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,6 +2,9 @@
import React from 'react';
import ReactDom from 'react-dom';
import { enableMapSet } from 'immer';
+import '@fontsource/inter/variable.css';
+import 'folds/dist/style.css';
+import { lightTheme, configClass, config, varsClass } from 'folds';
enableMapSet();
@@ -12,6 +15,9 @@ import settings from './client/state/settings';
import App from './app/pages/App';
+document.body.classList.add(lightTheme, configClass, varsClass);
+document.body.style.fontFamily = config.font.Inter;
+
settings.applyTheme();
ReactDom.render(, document.getElementById('root'));