harivansh-afk/React-Portfolio
1
0
Fork 0
mirror of https://github.com/harivansh-afk/React-Portfolio.git synced 2026-04-17 06:04:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: icon updates

Browse source
This commit is contained in:
Harivansh Rathi 2025-01-04 05:33:03 +05:30
parent 4c96c4e162
commit 6d30b34115
4 changed files with 43 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/themetoggle/index.js
View file

@ -1,6 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { WiMoonAltWaningCrescent4 } from "react-icons/wi"; import { RiSunLine, RiMoonClearLine } from "react-icons/ri";
const Themetoggle = () => { const Themetoggle = () => {
const [theme, settheme] = useState(localStorage.getItem("theme") || "dark"); const [theme, settheme] = useState(localStorage.getItem("theme") || "dark");
@ -9,11 +8,11 @@ const Themetoggle = () => {
}; };
useEffect(() => { useEffect(() => {
document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme ); localStorage.setItem('theme', theme);
}, [theme]); }, [theme]);
return ( return (
<div className="nav_ac" onClick={themetoggle}> <div className="nav_ac" onClick={themetoggle}>
<WiMoonAltWaningCrescent4 /> {theme === "dark" ? <RiSunLine /> : <RiMoonClearLine />}
</div> </div>
); );
}; };

29
src/components/themetoggle/style.css
View file

@ -1,15 +1,22 @@
.theme_toggler { .theme_toggler {
background: var(--primary-color); z-index: 999999999;
z-index: 999999999; left: 20px;
left: 10px; display: flex;
background: var(--primary-color); height: 70px;
display: flex; align-items: center;
height: 50px; padding: 10px;
align-items: center; background: transparent;
padding-left: 10px; cursor: pointer;
} }
.theme_toggler svg { .theme_toggler svg,
width: 2em; .nav_ac svg {
height: 2em; width: 2em;
height: 2em;
color: var(--text-color-2);
transition: color 0.3s ease;
}
.theme_toggler:hover svg {
color: var(--text-color-3);
} }

11
src/header/index.js
View file

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import "./style.css"; import "./style.css";
import { VscGrabber, VscClose } from "react-icons/vsc"; import { RiMenuLine, RiCloseLine } from "react-icons/ri";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { logotext ,socialprofils } from "../content_option"; import { logotext ,socialprofils } from "../content_option";
import Themetoggle from "../components/themetoggle"; import Themetoggle from "../components/themetoggle";
@ -18,15 +18,14 @@ const Headermain = () => {
<> <>
<header className="fixed-top site__header"> <header className="fixed-top site__header">
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
<Link className="navbar-brand nav_ac" to="/"> <Link className="navbar-brand nav_ac" to="/">
{logotext} {logotext}
</Link> </Link>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<Themetoggle /> <Themetoggle />
<button className="menu__button nav_ac" onClick={handleToggle}> <button className="menu__button nav_ac" onClick={handleToggle}>
{!isActive ? <VscClose /> : <VscGrabber />} {!isActive ? <RiCloseLine /> : <RiMenuLine />}
</button> </button>
</div> </div>
</div> </div>

25
src/header/style.css
View file

@ -1,17 +1,21 @@
.site__header { .site__header {
top: 10px; top: 20px;
padding-left: 10px; padding-left: 20px;
padding-right: 10px; padding-right: 20px;
} }
.menu__button { .menu__button {
color: var(--text-color); color: var(--text-color);
padding: 10px;
background: transparent;
border: none;
} }
.menu__button:focus, .menu__button:focus,
.menu__button:hover { .menu__button:hover {
color: var(--text-color); color: var(--text-color-3);
box-shadow: unset; box-shadow: unset;
background: transparent;
} }
.menu__button svg { .menu__button svg {
@ -19,18 +23,23 @@
height: 2em; height: 2em;
fill: var(--text-color-2); fill: var(--text-color-2);
color: var(--text-color-2); color: var(--text-color-2);
transition: color 0.3s ease;
}
.menu__button:hover svg {
color: var(--text-color-3);
fill: var(--text-color-3);
} }
.nav_ac { .nav_ac {
padding: 5px 15px; padding: 10px 25px;
margin: 0; margin: 0;
border: unset; border: unset;
background: var(--primary-color); font-size: 1.5rem;
font-size: 1.25rem;
font-family: Marcellus; font-family: Marcellus;
color: var(--text-color-2); color: var(--text-color-2);
line-height: 2; line-height: 2;
height: 50px; height: 70px;
font-weight: bold; font-weight: bold;
z-index: 1000; z-index: 1000;
} }