Skip to content

Commit 151d446

Browse files
fezcodefezcode
committed
feat: sidebar colors.
1 parent 829ecf8 commit 151d446

File tree

5 files changed

+53
-8
lines changed

5 files changed

+53
-8
lines changed

‎src/components/Layout.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Layout = ({
2727
}) => {
2828
const [isSidebarOpen, setIsSidebarOpen] = useState(window.innerWidth > 768);
2929
const { isPaletteOpen, setIsPaletteOpen } = useCommandPalette();
30-
const { isGarden, isAutumn, isRain } = useVisualSettings();
30+
const { isGarden, isAutumn, isRain, sidebarColor } = useVisualSettings();
3131
const location = useLocation();
3232

3333
useEffect(() => {
@@ -79,6 +79,7 @@ const Layout = ({
7979
toggleSidebar={toggleSidebar}
8080
toggleModal={toggleModal}
8181
setIsPaletteOpen={setIsPaletteOpen} // Pass setIsPaletteOpen to Sidebar
82+
sidebarColor={sidebarColor} // Pass sidebarColor to Sidebar
8283
/>{' '}
8384
<div
8485
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen ? 'md:ml-64' : 'md:ml-0'}`}

‎src/components/Sidebar.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,9 @@ import { version } from '../version';
4141
import usePersistentState from '../hooks/usePersistentState';
4242
import { KEY_SIDEBAR_STATE } from '../utils/LocalStorageManager';
4343
import { useAchievements } from '../context/AchievementContext';
44+
import colors from '../config/colors';
4445

45-
const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
46+
const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen, sidebarColor }) => {
4647
const [sidebarState, setSidebarState] = usePersistentState(
4748
KEY_SIDEBAR_STATE,
4849
{
@@ -55,6 +56,13 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
5556
},
5657
);
5758

59+
const getSidebarBackgroundColor = () => {
60+
if (sidebarColor && colors[sidebarColor]) {
61+
return colors[sidebarColor];
62+
}
63+
return 'rgba(0, 0, 0, 0.3)'; // Default or fallback color
64+
};
65+
5866
const { unlockAchievement } = useAchievements();
5967
const scrollRef = useRef(null);
6068
const [showScrollGradient, setShowScrollGradient] = useState({
@@ -153,7 +161,8 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
153161
animate={isOpen ? 'open' : 'closed'}
154162
variants={variants}
155163
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
156-
className={`fixed top-0 left-0 h-screen bg-black/30 backdrop-blur-sm text-white w-64 z-40 flex flex-col border-r border-gray-700/50 font-arvo`}
164+
className={`fixed top-0 left-0 h-screen text-white w-64 z-40 flex flex-col border-r border-gray-700/50 font-arvo backdrop-blur-lg`}
165+
style={{ backgroundColor: getSidebarBackgroundColor() }}
157166
>
158167
{isOpen && (
159168
<div className="p-4 flex justify-between items-center">

‎src/config/colors.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ module.exports = {
3737
'sidebar-highlight-light': '#FFB6C1', // Duplicated from article-light
3838
'sidebar-highlight-alpha-10': 'rgba(250, 128, 114, 0.1)', // Duplicated from article-alpha-10
3939
'sidebar-highlight-alpha-50': 'rgba(250, 128, 114, 0.5)', // Duplicated from article-alpha-50
40+
'salmon-light': 'rgba(250, 128, 114, 0.05)',
41+
'salmon-medium': 'rgba(250, 128, 114, 0.1)',
42+
'blue-transparent': 'rgba(100, 149, 237, 0.1)',
43+
'green-transparent': 'rgba(60, 179, 113, 0.1)',
44+
'purple-transparent': 'rgba(147, 112, 219, 0.1)', // MediumPurple with transparency
45+
'cyan-transparent': 'rgba(0, 255, 255, 0.1)', // Cyan with transparency
4046
'title-hover': '#fdd4a6', // orange-200
4147
'markdown-title-color': '#fed7aa', // orange-200
4248
'markdown-hx-color': '#ffedd5', // orange-100

‎src/context/VisualSettingsContext.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,8 @@ export const VisualSettingsProvider = ({ children }) => {
4242
const [isGarden, setIsGarden] = usePersistentState('is-garden', false);
4343
const [isAutumn, setIsAutumn] = usePersistentState('is-autumn', false);
4444
const [isRain, setIsRain] = usePersistentState('is-rain', false);
45-
const [blogPostViewMode, setBlogPostViewMode] = usePersistentState(
46-
'blog-post-view-mode',
47-
'standard',
48-
);
45+
const [blogPostViewMode, setBlogPostViewMode] = usePersistentState('blog-post-view-mode','standard');
46+
const [sidebarColor, setSidebarColor] = usePersistentState('sidebar-color','default');
4947

5048
// Chaos Theory Achievement Tracker
5149
useEffect(() => {
@@ -81,6 +79,7 @@ export const VisualSettingsProvider = ({ children }) => {
8179
isAutumn,
8280
isRain,
8381
blogPostViewMode,
82+
sidebarColor, // Added sidebarColor
8483
unlockAchievement,
8584
]);
8685

@@ -277,6 +276,8 @@ export const VisualSettingsProvider = ({ children }) => {
277276
toggleRain,
278277
blogPostViewMode,
279278
setBlogPostViewMode,
279+
sidebarColor,
280+
setSidebarColor,
280281
}}
281282
>
282283
{children}

‎src/pages/SettingsPage.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ const SettingsPage = () => {
112112
toggleRain,
113113
blogPostViewMode,
114114
setBlogPostViewMode,
115+
sidebarColor,
116+
setSidebarColor,
115117
} = useVisualSettings();
116118

117119
const { addToast } = useToast();
@@ -506,7 +508,6 @@ const SettingsPage = () => {
506508
Reset Sidebar
507509
</button>
508510
</div>
509-
510511
<div className="bg-gray-800/30 rounded-xl p-6 border border-white/5 flex flex-col justify-between">
511512
<div>
512513
<div className="flex items-center gap-2 mb-3 text-rose-500">
@@ -526,6 +527,33 @@ const SettingsPage = () => {
526527
Reset App States
527528
</button>
528529
</div>
530+
531+
<div className="bg-gray-800/30 rounded-xl p-6 border border-white/5 flex flex-col justify-between">
532+
<div>
533+
<div className="flex items-center gap-2 mb-3 text-rose-500">
534+
<Sidebar size={20} weight="duotone" />
535+
<h3 className="font-medium text-white">Sidebar Color</h3>
536+
</div>
537+
<p className="text-sm text-gray-400 mb-6">
538+
Choose a custom background color for the sidebar.
539+
</p>
540+
</div>
541+
<CustomDropdown
542+
label="Select Sidebar Color"
543+
options={[
544+
{ label: 'Default', value: 'default' },
545+
{ label: 'Salmon Light', value: 'salmon-light' },
546+
{ label: 'Salmon Medium', value: 'salmon-medium' },
547+
{ label: 'Blue Transparent', value: 'blue-transparent' },
548+
{ label: 'Green Transparent', value: 'green-transparent' },
549+
{ label: 'Purple Transparent', value: 'purple-transparent' },
550+
{ label: 'Cyan Transparent', value: 'cyan-transparent' },
551+
]}
552+
value={sidebarColor}
553+
onChange={setSidebarColor}
554+
icon={Sidebar}
555+
/>
556+
</div>
529557
</div>
530558
</Section>
531559

0 commit comments

Comments
 (0)