Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 16:24:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(Design): navigation rail redisign

Browse source
This commit is contained in:
Kentai Radiquum 2024-05-11 07:00:29 +05:00
parent 94f11d5dbd
commit 6bd46e8437
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 34 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/app/App.jsx
View file

@ -56,31 +56,33 @@ export const App = (props) => {
return ( return (
<body> <body>
<div> <div style={{ display: "flex", "flex-direction": "row" }}>
<NavigationRail <div style={{ "padding-inline-start": "0" }}>
colorPicker={colorPicker} <NavigationRail
settingsPopup={settingsPopup}
setColorPicker={setColorPicker}
setSettingsPopup={setSettingsPopup}
/>
{colorPicker && (
<ColorPicker
mode={mode}
theme={theme}
colorPicker={colorPicker} colorPicker={colorPicker}
setColorPicker={setColorPicker}
/>
)}
{settingsPopup && (
<Settings
settingsPopup={settingsPopup} settingsPopup={settingsPopup}
setColorPicker={setColorPicker}
setSettingsPopup={setSettingsPopup} setSettingsPopup={setSettingsPopup}
/> />
)} {colorPicker && (
<ColorPicker
mode={mode}
theme={theme}
colorPicker={colorPicker}
setColorPicker={setColorPicker}
/>
)}
{settingsPopup && (
<Settings
settingsPopup={settingsPopup}
setSettingsPopup={setSettingsPopup}
/>
)}
</div>
<main className="responsive padding" style={{ overflow: "hidden" }}>
{props.children}
</main>
</div> </div>
<main className="responsive padding" style={{ overflow: "hidden" }}>
{props.children}
</main>
</body> </body>
); );
}; };

13
frontend/app/components/NavigationRail/NavigationRail.jsx
View file

@ -42,7 +42,18 @@ export const NavigationRail = (props) => {
]; ];
return ( return (
<nav className="left"> <nav
className="left border round margin"
style={{
"inline-size": "unset",
position: "sticky",
top: "1rem",
left: "0",
"min-height": "calc(100vh - (var(---margin) * 2))",
"background-color": "var(--surface)",
"padding-block": "1rem",
}}
>
{userStore.isAuth && userStore.user ? ( {userStore.isAuth && userStore.user ? (
<Link className="circle transparent " href="/profile"> <Link className="circle transparent " href="/profile">
<Image <Image