WIP
This commit is contained in:
parent
837d03a93b
commit
b08125f68e
5 changed files with 131 additions and 4 deletions
|
@ -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>
|
||||
|
|
114
src/app/organisms/navigation/Sidebar1.tsx
Normal file
114
src/app/organisms/navigation/Sidebar1.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
};
|
||||
|
||||
|
|
|
@ -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'));
|
||||
|
|
Loading…
Reference in a new issue