Skip to content

Commit

Permalink
begin sidenav redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@chalabi2
chalabi2 committed Sep 5, 2024
1 parent 715096a commit 417c454
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 87 deletions.
142 changes: 71 additions & 71 deletions components/react/sideNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,102 +107,102 @@ export default function SideNav() {
</div>
);

const NavDrawer: React.FC<{ Icon: React.ElementType; href: string }> = ({ Icon, href }) => {
const NavDrawer: React.FC<{ Icon: React.ElementType; href: string; label: string }> = ({
Icon,
href,
label,
}) => {
const { pathname } = useRouter();
const isActive = pathname === href;

return (
<li>
<li className="w-full mb-2">
<Link href={href} legacyBehavior>
<div className="flex flex-row cursor-pointer hover:text-primary justify-start gap-4 items-center transition-all duration-300 ease-in-out">
<Icon className="w-8 h-8" />
<span className="text-2xl">{href.slice(0, 12)}</span>
</div>
<a
className={`flex items-center p-3 rounded-lg transition-all duration-300 ease-in-out text-gray-500 ${isActive ? 'bg-primary text-white' : 'hover:bg-base-200'}`}
>
<Icon className="w-8 h-8 mr-6" />
<span className="text-xl ">{label}</span>
</a>
</Link>
</li>
);
};

const SideDrawer: React.FC = () => (
<div
id="secondary-sidenav"
className="overflow-y-auto relative py-5 px-3 w-64 h-full bg-base-300 border-primary border-r-primary border-r transition-transform duration-300 ease-in-out"
>
<div className="flex flex-row gap-4 items-center ">
<img src={'/logo.svg'} alt="logo" width={42} height={42} />
<span className="text-2xl leadin-tight text-balance ">Alberto</span>
<div className="flex flex-col h-full bg-base-300 w-64 p-4">
<div className="flex flex-row gap-2 justify-start ml-2 mt-2 items-center mb-12 space-x-2">
<Image src={'/logo.svg'} alt="logo" width={48} height={48} />
<p className="text-2xl font-bold">Alberto</p>
</div>

<div className="divider divider-horizon"></div>
<ul className="space-y-6 mt-4">
<NavDrawer href="bank" Icon={PiCoinsThin} />
<NavDrawer href="groups" Icon={PiUsersFourThin} />
<NavDrawer href="admins" Icon={PiChalkboardTeacherThin} />
<NavDrawer href="factory" Icon={PiFactoryThin} />
{/* <NavDrawer label="Governance" /> */}
<ul className="flex-grow mt-8 p-1">
<NavDrawer Icon={PiCoinsThin} href="/bank" label="Bank" />
<NavDrawer Icon={PiUsersFourThin} href="/groups" label="Groups" />
<NavDrawer Icon={PiChalkboardTeacherThin} href="/admins" label="Admins" />
<NavDrawer Icon={PiFactoryThin} href="/factory" label="Factory" />
</ul>
<div className="divider divider-horizontal"></div>
<ul className="pt-5 mt-5 space-y-2 ">
<div className="mx-auto w-full justify-center items-center h-full">
<WalletSection chainName="manifest" />
<div className="mt-auto">
<div className="flex items-center justify-between mb-4">
<label className="swap swap-rotate">
<input
type="checkbox"
className="theme-controller hidden"
value="light"
checked={isdark}
onChange={() => {
setIsdark(!isdark);
toggleTheme();
}}
/>
<div className="swap-on bg-base-100 rounded-full p-2">
<PiMoonThin className="w-6 h-6" />
</div>
<div className="swap-off bg-base-100 rounded-full p-2">
<PiSunThin className="w-6 h-6" />
</div>
</label>
</div>
</ul>
<div className="flex absolute right-2 bottom-7 z-20 justify-end w-full ">
<button
id="show-secondary-sidenav-button"
aria-controls="secondary-sidenav"
type="button"
onClick={toggleDrawer}
className="inline-flex p-2 rounded-full cursor-pointer border border-primary hover:bg-primary focus:ring-4 focus:ring-secondary "
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<ul className="pt-5 mt-5 space-y-2 ">
<div className="mx-auto w-full justify-center items-center h-full">
<WalletSection chainName="manifest" />
</div>
</ul>
</div>

<button
onClick={toggleDrawer}
className="absolute top-1/2 transform -translate-y-1/2 -right-4 p-2 rounded-full bg-base-200 hover:bg-primary transition-all duration-300 ease-in-out"
>
<svg
className={`w-5 h-5 transition-all duration-300 ${isDrawerVisible ? '' : 'rotate-180'}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
</div>
);

return (
<>
<aside
id="sidebar-double"
className={`hidden md:flex fixed top-0 left-0 h-full z-40`}
className="hidden md:flex fixed top-0 left-0 h-full z-40"
aria-label="Sidebar"
>
<button
id="hide-secondary-sidenav-button"
aria-controls="secondary-sidenav"
type="button"
onClick={toggleDrawer}
className="inline-flex absolute bottom-7 left-28 p-2 cursor-pointer border border-primary rounded-full hover:bg-primary focus:ring-4 focus:ring-secondary z-99 "
>
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clipRule="evenodd"
></path>
</svg>
</button>
<SideNav />
</aside>
<aside
id="sidebar-double"
className={`flex z-40 fixed top-0 h-full transform ${
className={`flex z-40 fixed top-0 left-0 h-full transform ${
isDrawerVisible ? 'translate-x-0' : '-translate-x-full'
} transition-transform duration-300 ease-in-out`}
aria-label="Sidebar"
Expand Down
53 changes: 38 additions & 15 deletions components/wallet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { MouseEventHandler, useMemo } from 'react';

import { ArrowPathIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
import { PiWalletThin } from 'react-icons/pi';
import { PiGearSixThin, PiWalletThin } from 'react-icons/pi';
import { useChain } from '@cosmos-kit/react';
import { WalletStatus } from 'cosmos-kit';
import Image from 'next/image';

const buttons = {
Disconnected: {
Expand Down Expand Up @@ -60,12 +61,12 @@ export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
openView();
};

const _renderConnectButton = useMemo(() => {
const _renderWalletContent = useMemo(() => {
if (status === WalletStatus.Connecting) {
return (
<button className="rounded-lg w-full bg-purple-damp hover:bg-purple-damp/75 inline-flex justify-center items-center py-1.5 font-medium cursor-wait text-dark-bg-800 dark:text-light-bg-100 text-sm">
<button className="btn w-full border-0 btn-gradient animate-pulse text-white">
<svg
className="w-4 h-4 text-dark-bg-800 dark:text-light-bg-100 animate-spin mr-2"
className="w-5 h-5 mr-3 animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -84,32 +85,54 @@ export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Loading...
Connecting...
</button>
);
}

let onClick;
if (status === WalletStatus.Disconnected || status === WalletStatus.Rejected)
onClick = onClickConnect;
else onClick = onClickOpenView;

const buttonData = buttons[status];
const onClick =
status === WalletStatus.Disconnected || status === WalletStatus.Rejected ? connect : openView;

return (
<button
className="btn btn-primary sm:btn-md md:btn-lg w-full md:w-auto mx-auto"
className="btn w-full transition-all border-0 duration-300 ease-in-out text-white btn-gradient"
onClick={onClick}
>
<buttonData.icon className="w-5 h-5 mr-2" />
{buttonData.title}
</button>
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [status, connect, openView]);
}, [status, connect, openView, username, address]);

return (
<div className="w-full ">
<div className="w-full ">{_renderConnectButton}</div>
<div className="w-full transition-all duration-300 ease-in-out relative">
{status === WalletStatus.Connected ? (
<div className="bg-[rgba(0,0,0,0.4)] rounded-lg p-4 transition-all duration-300 ease-in-out relative">
<div className="absolute bottom-0 right-4 pointer-events-none z-0">
<Image
src="/flower.svg"
alt="Decorative flower"
width={280}
height={280}
className="opacity-50 w-full h-full object-cover"
/>
</div>
<div className="relative z-10">
<p className="font-medium text-center mb-2">{username || 'Connected User'}</p>
<div className="bg-base-300 rounded-full py-2 px-4 text-center mb-4">
<p className="text-xs text-gray-500 break-all">
{address
? `${address.slice(0, 20)}...${address.slice(-4)}`
: 'Address not available'}
</p>
</div>
{_renderWalletContent}
</div>
</div>
) : (
<div className="flex p-4 justify-center items-center">{_renderWalletContent}</div>
)}
</div>
);
};
Expand Down
9 changes: 9 additions & 0 deletions public/flower.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ module.exports = {
accent: '#30DB5B',
'accent-content': '#161616',
neutral: '#FFFFFF',
'button-gradient': 'linear-gradient(to right, #A087FF, #380CC5)',
'neutral-content': '#161616',
'base-100': '#FFFFFF',
'base-200': '#F0F0FF',
Expand All @@ -100,6 +101,7 @@ module.exports = {
'secondary-content': '#FFFFFF',
accent: '#30DB5B',
'accent-content': '#FFFFFF',
'button-gradient': 'linear-gradient(to right, #A087FF, #380CC5)',
neutral: '#1D192D',
'neutral-content': '#FFFFFF',
'background-color': '#0E0A1F',
Expand All @@ -121,5 +123,16 @@ module.exports = {
require('@tailwindcss/forms'),
require('tailwind-scrollbar-hide'),
require('daisyui'),
function ({ addUtilities }) {
const newUtilities = {
'.btn-gradient': {
backgroundImage: 'linear-gradient(to right, #A087FF, #380CC5)',
'&:hover': {
backgroundImage: 'linear-gradient(to right, #8B6EFF, #2F0AA3)',
},
},
};
addUtilities(newUtilities, ['responsive', 'hover']);
},
],
};

0 comments on commit 417c454

Please sign in to comment.