Skip to content

Commit

Permalink
feat: dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mikadows
Mikadows committed Mar 31, 2022
1 parent 234e5c7 commit 89d26f5
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 66 deletions.
113 changes: 83 additions & 30 deletions src/components/Page/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,111 @@
import React from 'react';
import useDarkMode from 'use-dark-mode';

const Header: React.FC = () => {
const darkMode = useDarkMode(false);

const toggleDarkMode = () => {
const root = window.document.documentElement;
if (darkMode.value) {
root.classList.remove('dark');
root.classList.add('light');
} else {
root.classList.remove('light');
root.classList.add('dark');
}

darkMode.toggle();
};

return (
<>
<nav className="bg-white border-b border-gray-200 fixed z-30 w-full">
<nav className="bg-white dark:bg-gray-800 border-b border-gray-200 fixed z-30 w-full">
<div className="px-3 py-3 lg:px-5 lg:pl-3">
<div className="flex items-center justify-between">
<div className="flex items-center justify-start">
<button
id="toggleSidebarMobile"
aria-expanded="true"
aria-controls="sidebar"
className="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"
id="toggleSidebarMobile"
aria-expanded="true"
aria-controls="sidebar"
className="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"
>
<svg
id="toggleSidebarMobileHamburger"
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
id="toggleSidebarMobileHamburger"
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
<svg
id="toggleSidebarMobileClose"
className="w-6 h-6 hidden"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
id="toggleSidebarMobileClose"
className="w-6 h-6 hidden"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
<div
className="text-xl font-bold flex items-center lg:ml-2.5"
>
<div className="text-xl font-bold flex items-center lg:ml-2.5">
<img
src="https://demo.themesberg.com/windster/images/logo.svg"
className="h-6 mr-2"
alt="Windster Logo"
src="https://demo.themesberg.com/windster/images/logo.svg"
className="h-6 mr-2"
alt="Windster Logo"
/>
<span className="self-center whitespace-nowrap">
FI-Sweets | Admin
</span>
<span className="dark:text-white self-center whitespace-nowrap">
FI-Sweets | Admin
</span>
</div>
</div>
<button
onClick={() => {
toggleDarkMode();
}}
className="bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 dark:hover:text-white hover:text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">Dark mode</span>
{!darkMode.value ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
)}
</button>
</div>
</div>
</nav>
Expand Down
50 changes: 14 additions & 36 deletions src/components/Page/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,18 @@ import React from 'react';
const Sidebar: React.FC = () => {
return (
<>
<div className="flex overflow-hidden bg-white ">
<div className="flex overflow-hidden dark:bg-gray-800 bg-white ">
<aside
id="sidebar"
className="fixed hidden pt-10 z-20 h-full top-0 left-0 flex lg:flex flex-shrink-0 flex-col w-64 transition-width duration-75"
aria-label="Sidebar"
>
<div className="relative flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white pt-0">
<div className="relative flex-1 flex flex-col min-h-0 border-r border-gray-200 dark:bg-gray-800 bg-white pt-0">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div className="flex-1 px-3 bg-white divide-y space-y-1">
<div className="flex-1 px-3 dark:bg-gray-800 bg-white divide-y space-y-1">
<ul className="space-y-2 pb-2">
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group"
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 dark:hover:bg-indigo-500 group">
<svg
className="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -30,9 +28,7 @@ const Sidebar: React.FC = () => {
</div>
</li>
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group "
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 dark:hover:bg-indigo-500 group ">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -50,9 +46,7 @@ const Sidebar: React.FC = () => {
</div>
</li>
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group "
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 dark:hover:bg-indigo-500 group ">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -71,9 +65,7 @@ const Sidebar: React.FC = () => {
</div>
</li>
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group "
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 dark:hover:bg-indigo-500 group ">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -92,9 +84,7 @@ const Sidebar: React.FC = () => {
</div>
</li>
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group "
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 dark:hover:bg-indigo-500 group ">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -113,9 +103,7 @@ const Sidebar: React.FC = () => {
</div>
</li>
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group "
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 dark:hover:bg-indigo-500 group ">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -134,9 +122,7 @@ const Sidebar: React.FC = () => {
</div>
</li>
<li>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group "
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 dark:hover:bg-indigo-500 group ">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -156,9 +142,7 @@ const Sidebar: React.FC = () => {
</li>
</ul>
<div className="space-y-2 pt-2">
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2"
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center dark:hover:bg-indigo-500 p-2">
<svg
className="w-5 h-5 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
aria-hidden="true"
Expand All @@ -176,9 +160,7 @@ const Sidebar: React.FC = () => {
</svg>
<span className="ml-4">Upgrade to Pro</span>
</div>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2"
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center dark:hover:bg-indigo-500 p-2">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -194,9 +176,7 @@ const Sidebar: React.FC = () => {
</svg>
<span className="ml-3">Documentation</span>
</div>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2"
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center dark:hover:bg-indigo-500 p-2">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand All @@ -207,9 +187,7 @@ const Sidebar: React.FC = () => {
</svg>
<span className="ml-3">Components</span>
</div>
<div
className="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2"
>
<div className="text-base text-gray-900 dark:text-white font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center dark:hover:bg-indigo-500 p-2">
<svg
className="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor"
Expand Down

0 comments on commit 89d26f5

Please sign in to comment.