info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-14 21:27:59 +02:00
Code Issues Releases Wiki Activity

Add icons in the mobile sidebar menu

Browse Source
This commit is contained in:
Kamran Ahmed
2023-05-26 17:31:10 +01:00
parent 718c582a8c
commit c72658938f
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/AccountSidebar.astro
View File

@@ -41,7 +41,7 @@ const sidebarLinks = [
<div class='relative mb-5 block border-b p-4 shadow-inner md:hidden'> <div class='relative mb-5 block border-b p-4 shadow-inner md:hidden'>
<button <button
class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center font-medium text-gray-900' class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-gray-900 text-sm font-medium'
id='settings-menu' id='settings-menu'
> >
{activePageTitle} {activePageTitle}
@@ -56,11 +56,12 @@ const sidebarLinks = [
<li> <li>
<a <a
href={sidebarLink.href} href={sidebarLink.href}
class={`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${ class={`flex items-center w-full rounded px-3 py-1.5 text-slate-900 hover:bg-slate-200 text-sm ${
activePageId === sidebarLink.id ? 'bg-slate-100' : '' activePageId === sidebarLink.id ? 'bg-slate-100' : ''
}`} }`}
> >
{sidebarLink.title} <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-2`} />
{sidebarLink.title}
</a> </a>
</li> </li>
)) ))
@@ -82,7 +83,7 @@ const sidebarLinks = [
activePageId === sidebarLink.id ? 'text-black border-r-black bg-gray-100' : 'text-gray-500 hover:border-r-gray-300' activePageId === sidebarLink.id ? 'text-black border-r-black bg-gray-100' : 'text-gray-500 hover:border-r-gray-300'
}`} }`}
> >
<AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-0`} /> <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-0`} />
{sidebarLink.title} {sidebarLink.title}
</a> </a>
</li> </li>