WIP

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 (
     <div className="navigation">
+      <Sidebar1 />
       <SideBar />
       <Drawer />
     </div>

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 (
+    <Sidebar>
+      <SidebarContent
+        scrollable={
+          <>
+            <SidebarStack>
+              <SidebarAvatar
+                active
+                outlined
+                tooltip="Home"
+                avatarChildren={<Icon src={Icons.Home} filled />}
+              />
+              <SidebarAvatar outlined tooltip="People" avatarChildren={<Icon src={Icons.User} />} />
+            </SidebarStack>
+            <SidebarStackSeparator />
+            <SidebarStack>
+              <SidebarAvatar
+                tooltip="Space A"
+                notificationBadge={(badgeClassName) => (
+                  <Badge
+                    className={badgeClassName}
+                    size="200"
+                    variant="Secondary"
+                    fill="Solid"
+                    radii="Pill"
+                  />
+                )}
+                avatarChildren={
+                  <AvatarFallback
+                    style={{
+                      backgroundColor: 'red',
+                      color: 'white',
+                    }}
+                  >
+                    <Text size="T500">B</Text>
+                  </AvatarFallback>
+                }
+              />
+              <SidebarAvatar
+                tooltip="Space B"
+                hasCount
+                notificationBadge={(badgeClassName) => (
+                  <Badge className={badgeClassName} radii="Pill" fill="Solid" variant="Secondary">
+                    <Text size="L400">64</Text>
+                  </Badge>
+                )}
+                avatarChildren={
+                  <AvatarFallback
+                    style={{
+                      backgroundColor: 'green',
+                      color: 'white',
+                    }}
+                  >
+                    <Text size="T500">C</Text>
+                  </AvatarFallback>
+                }
+              />
+            </SidebarStack>
+            <SidebarStackSeparator />
+            <SidebarStack>
+              <SidebarAvatar
+                outlined
+                tooltip="Explore Community"
+                avatarChildren={<Icon src={Icons.Explore} />}
+              />
+              <SidebarAvatar
+                outlined
+                tooltip="Create Space"
+                avatarChildren={<Icon src={Icons.Plus} />}
+              />
+            </SidebarStack>
+          </>
+        }
+        sticky={
+          <>
+            <SidebarStackSeparator />
+            <SidebarStack>
+              <SidebarAvatar
+                outlined
+                tooltip="Search"
+                avatarChildren={<Icon src={Icons.Search} />}
+              />
+              <SidebarAvatar
+                tooltip="User Settings"
+                avatarChildren={
+                  <AvatarFallback
+                    style={{
+                      backgroundColor: 'blue',
+                      color: 'white',
+                    }}
+                  >
+                    <Text size="T500">A</Text>
+                  </AvatarFallback>
+                }
+              />
+            </SidebarStack>
+          </>
+        }
+      />
+    </Sidebar>
+  );
+}

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() ? <Client /> : <Auth />;
+  return (
+    <StrictMode>
+      <Provider>{isAuthenticated() ? <Client /> : <Auth />}</Provider>
+    </StrictMode>
+  );
 }
 
 export default App;

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));
 };
 

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(<App />, document.getElementById('root'));