mirror of
https://github.com/orangecoding/fredy.git
synced 2026-06-16 12:31:07 +00:00
feat: Fredy UI redesign
* New design :)
This commit is contained in:
Christian Kellner
committed by
GitHub
GitHub
parent
c78472bd19
commit
f30ec4645c
@@ -1,11 +1,218 @@
|
||||
@import '../../tokens.less';
|
||||
|
||||
.navigate {
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: @color-surface;
|
||||
border-right: 1px solid @color-border;
|
||||
transition: @transition-sidebar;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-bottom: 12px;
|
||||
padding: 20px 16px 16px;
|
||||
min-height: 64px;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
transition: width @transition-fast, opacity @transition-fast;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 1rem 8px 10px !important;
|
||||
margin-top: auto;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid @color-border;
|
||||
|
||||
&--collapsed {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 8px 10px !important;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logout-btn {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(251,113,133,0.25);
|
||||
background: rgba(251,113,133,0.06);
|
||||
color: #fb7185;
|
||||
border-radius: @radius-btn;
|
||||
cursor: pointer;
|
||||
font-size: @text-sm;
|
||||
font-weight: 500;
|
||||
font-family: @font-ui;
|
||||
transition: background @transition-fast, border-color @transition-fast;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,113,133,0.12);
|
||||
border-color: rgba(251,113,133,0.4);
|
||||
}
|
||||
|
||||
&--icon-only {
|
||||
flex: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: @radius-btn;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,113,133,0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: @color-faint;
|
||||
cursor: pointer;
|
||||
border-radius: @radius-btn;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: @color-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Semi Nav overrides
|
||||
.semi-navigation {
|
||||
background: @color-surface !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item {
|
||||
border-radius: @radius-btn !important;
|
||||
color: @color-muted !important;
|
||||
transition: background @transition-fast, color @transition-fast !important;
|
||||
margin: 2px 8px !important;
|
||||
|
||||
&:hover {
|
||||
color: @color-text !important;
|
||||
}
|
||||
|
||||
&.semi-navigation-item-selected,
|
||||
&[aria-selected="true"] {
|
||||
background: rgba(224,74,56,0.12) !important;
|
||||
border: 1px solid rgba(224,74,56,0.25) !important;
|
||||
color: @color-text !important;
|
||||
|
||||
.semi-navigation-item-icon {
|
||||
color: @color-accent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.semi-navigation-sub-title {
|
||||
color: @color-muted !important;
|
||||
}
|
||||
|
||||
// Collapsed state — icons perfectly centered
|
||||
.semi-navigation-collapsed {
|
||||
// Text span is display:block and takes up flex space — must be removed so justify-content:center works
|
||||
.semi-navigation-item-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item,
|
||||
.semi-navigation-sub-title {
|
||||
margin: 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 36px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item-inner,
|
||||
.semi-navigation-sub-title-inner {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
// Semi adds margin-right to icons for text spacing — remove it when collapsed
|
||||
.semi-navigation-item-icon,
|
||||
.semi-navigation-sub-title-icon {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Semi Nav.Footer — full width, no extra padding (our BEM class controls it)
|
||||
.semi-navigation-footer {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
// Collapsed submenu popup — actual class used by Semi UI is .semi-navigation-popover
|
||||
.semi-navigation-popover {
|
||||
background: @color-elevated !important;
|
||||
border: 1px solid @color-border !important;
|
||||
border-radius: @radius-card !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
|
||||
overflow: hidden !important;
|
||||
|
||||
.semi-navigation-item {
|
||||
margin: 2px 6px !important;
|
||||
color: @color-muted !important;
|
||||
border: none !important;
|
||||
border-radius: @radius-btn !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.06) !important;
|
||||
color: @color-text !important;
|
||||
}
|
||||
|
||||
&.semi-navigation-item-selected,
|
||||
&.semi-dropdown-item-active {
|
||||
background: rgba(224,74,56,0.10) !important;
|
||||
border: none !important;
|
||||
color: @color-text !important;
|
||||
|
||||
.semi-navigation-item-icon {
|
||||
color: @color-accent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, Nav } from '@douyinfe/semi-ui-19';
|
||||
import { Nav } from '@douyinfe/semi-ui-19';
|
||||
import { IconStar, IconSetting, IconTerminal, IconHistogram, IconSidebar } from '@douyinfe/semi-icons';
|
||||
import logoWhite from '../../assets/logo_white.png';
|
||||
import heart from '../../assets/heart.png';
|
||||
@@ -65,20 +65,32 @@ export default function Navigation({ isAdmin }) {
|
||||
return '/' + split[0];
|
||||
}
|
||||
|
||||
const sidebarWidth = collapsed ? '60px' : '220px';
|
||||
|
||||
return (
|
||||
<Nav
|
||||
style={{ height: '100%', maxWidth: collapsed ? '60px' : '240px' }}
|
||||
style={{ height: '100%', width: sidebarWidth, minWidth: sidebarWidth, maxWidth: sidebarWidth }}
|
||||
items={items}
|
||||
isCollapsed={collapsed}
|
||||
selectedKeys={[parsePathName(location.pathname)]}
|
||||
onSelect={(key) => {
|
||||
navigate(key.itemKey);
|
||||
}}
|
||||
header={<img src={collapsed ? heart : logoWhite} width={collapsed ? '30' : '120'} alt="Fredy Logo" />}
|
||||
header={
|
||||
<div className="navigate__header">
|
||||
<img src={collapsed ? heart : logoWhite} width={collapsed ? 30 : 160} alt="Fredy Logo" />
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
<Nav.Footer className="navigate__footer">
|
||||
<Nav.Footer className={`navigate__footer${collapsed ? ' navigate__footer--collapsed' : ''}`}>
|
||||
<Logout text={!collapsed} />
|
||||
<Button icon={<IconSidebar />} onClick={() => setCollapsed(!collapsed)} />
|
||||
<button
|
||||
className="navigate__toggle-btn"
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
<IconSidebar size="default" />
|
||||
</button>
|
||||
</Nav.Footer>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user