diff --git a/index.html b/index.html index 6ec8c78..a583265 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - + + rexnt - - -
+ + + +
- - + + + \ No newline at end of file diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx index 4afaf6c..e1e7d3f 100644 --- a/src/Components/Nav/Navbar.jsx +++ b/src/Components/Nav/Navbar.jsx @@ -2,363 +2,51 @@ import React, { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import { useTranslation } from "react-i18next"; import { Link, animateScroll as scroll } from "react-scroll"; -import { FcGlobe } from "react-icons/fc"; +import { FiSun, FiMoon, FiGlobe } from "react-icons/fi"; +import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md"; -/* ----------------- Icons (unchanged) ----------------- */ -const SunIcon = ({ className }) => ( - - - - - - - - - -); -const MoonIcon = ({ className }) => ( - - - -); - -/* ----------------- ThemeToggle styles (RESTORED EXACTLY AS ORIGINAL) ----------------- */ -/* kept exactly the same as your original ThemeToggle styles so its look didn't change */ const StyledWrapper = styled.div` - /* Base Styles */ - .switch { - display: inline-block; - width: 5.2em; - height: 2.6em; - position: relative; - font-size: 16px; - user-select: none; - margin: 0; - transform-origin: center; - } - - /* Hide default HTML checkbox */ - .switch input { - opacity: 0; - width: 0; - height: 0; - position: absolute; - } - - /* Slider */ - .slider { - position: absolute; + .theme-toggle-btn { + background: transparent; + border: none; + color: ${props => props.theme === 'dark' ? '#FFD700' : '#FF8C00'}; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(to right, #87ceeb, #e0f6ff); - border-radius: 50px; - transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); - box-shadow: - 0 4px 8px rgba(0, 0, 0, 0.1), - inset 0 -5px 10px rgba(0, 0, 0, 0.1); - overflow: hidden; - } - - /* Inner slider for additional styling */ - .slider-inner { - position: absolute; - top: 0.28em; - left: 0.28em; - height: 2.1em; - width: 2.1em; + padding: 0.5rem; border-radius: 50%; - background-color: #ffd700; - transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); - box-shadow: - 0 2px 4px rgba(0, 0, 0, 0.2), - inset 0 -2px 5px rgba(0, 0, 0, 0.2); - } - - /* Checked state */ - .switch input:checked + .slider { - background: linear-gradient(to right, #1a237e, #3949ab); - } - - .switch input:checked + .slider .slider-inner { - transform: translateX(2.6em); - background-color: #ffffff; - } - - /* Focus state */ - .switch input:focus + .slider { - outline: none; - box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5); - } - - /* Hover and active states */ - .switch:hover .slider { - background: linear-gradient(to right, #64b5f6, #e3f2fd); - } - - .switch input:checked:hover + .slider { - background: linear-gradient(to right, #283593, #5c6bc0); - } - - /* Animation for slider inner */ - @keyframes sunPulse { - 0%, - 100% { - box-shadow: - 0 0 0 0 rgba(255, 215, 0, 0.7), - 0 0 0 0 rgba(255, 215, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + font-size: 1.5rem; + + &:hover { + background: ${props => props.theme === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(255, 140, 0, 0.1)'}; + transform: scale(1.1); } - 50% { - box-shadow: - 0 0 20px 10px rgba(255, 215, 0, 0.7), - 0 0 40px 20px rgba(255, 215, 0, 0.4); - } - } - - @keyframes moonPhase { - 0%, - 100% { - box-shadow: - inset -10px -5px 0 0 #ddd, - 0 0 20px rgba(255, 255, 255, 0.5); - } - 50% { - box-shadow: - inset 0 0 0 0 #ddd, - 0 0 20px rgba(255, 255, 255, 0.5); - } - } - - .switch input:not(:checked) + .slider .slider-inner { - animation: sunPulse 3s infinite; - } - - .switch input:checked + .slider .slider-inner { - animation: moonPhase 5s infinite; - } - - /* Stars effect */ - @keyframes twinkle { - 0%, - 100% { - opacity: 0.2; - } - 50% { - opacity: 1; - } - } - - .slider::before, - .slider::after { - content: ""; - position: absolute; - width: 4px; - height: 4px; - background-color: #ffffff; - border-radius: 50%; - transition: all 0.6s ease; - opacity: 0; - } - - .slider::before { - top: 20%; - left: 30%; - } - - .slider::after { - bottom: 25%; - right: 25%; - } - - .switch input:checked + .slider::before, - .switch input:checked + .slider::after { - opacity: 1; - animation: twinkle 2s infinite; - } - - .switch input:checked + .slider::before { - animation-delay: 0.5s; - } - - /* 3D effect */ - .slider { - transform-style: preserve-3d; - perspective: 500px; - } - - .slider-inner { - transform: translateZ(5px); - } - - .switch input:checked + .slider .slider-inner { - transform: translateX(2.6em) translateZ(5px) rotateY(180deg); - } - - /* Cloud effect for day mode */ - .slider-inner::before, - .slider-inner::after { - content: ""; - position: absolute; - background-color: rgba(255, 255, 255, 0.8); - border-radius: 50%; - transition: all 0.6s ease; - } - - .slider-inner::before { - width: 1em; - height: 1em; - top: -0.5em; - left: -0.2em; - } - - .slider-inner::after { - width: 1.2em; - height: 1.2em; - bottom: -0.6em; - right: -0.3em; - } - - .switch input:checked + .slider .slider-inner::before, - .switch input:checked + .slider .slider-inner::after { - opacity: 0; - } - - /* Crater effect for night mode */ - .switch input:checked + .slider .slider-inner::before { - width: 0.6em; - height: 0.6em; - background-color: rgba(0, 0, 0, 0.2); - top: 0.3em; - left: 0.3em; - opacity: 1; - } - - .switch input:checked + .slider .slider-inner::after { - width: 0.4em; - height: 0.4em; - background-color: rgba(0, 0, 0, 0.15); - bottom: 0.5em; - right: 0.5em; - opacity: 1; - } - - /* Accessibility improvements */ - .switch input:focus + .slider { - outline: 2px solid #4a90e2; - outline-offset: 2px; - } - - /* Responsive adjustments */ - @media (max-width: 768px) { - .switch { - width: 4.6em; - height: 2.3em; - } - - .slider-inner { - height: 1.85em; - width: 1.85em; - top: 0.23em; - left: 0.23em; - } - - .switch input:checked + .slider .slider-inner { - transform: translateX(2.2em) translateZ(5px) rotateY(180deg); - } - } - - @media (max-width: 480px) { - .switch { - width: 3.8em; - height: 1.9em; - } - - .slider-inner { - height: 1.5em; - width: 1.5em; - top: 0.2em; - left: 0.2em; - } - - .switch input:checked + .slider .slider-inner { - transform: translateX(1.8em) translateZ(5px) rotateY(180deg); - } - } - - /* High contrast mode */ - @media (forced-colors: active) { - .slider { - background: Canvas; - border: 2px solid ButtonText; - } - - .switch input:checked + .slider { - background: Highlight; - } - - .slider-inner { - background-color: ButtonFace; - } - - .switch::before, - .switch::after { - color: ButtonText; - } - } - - /* Reduced motion preference */ - @media (prefers-reduced-motion: reduce) { - .switch, - .slider, - .slider-inner { - transition: none; - } - - .switch input:checked + .slider .slider-inner, - .switch input:not(:checked) + .slider .slider-inner, - .switch input:checked + .slider::before, - .switch input:checked + .slider::after { - animation: none; + + &:active { + transform: scale(0.95); } } `; -/* ----------------- ThemeToggle component (exactly as original) ----------------- */ const ThemeToggle = ({ currentTheme, toggleTheme }) => { const isDark = currentTheme === "dark"; return ( - -