style(sidebar): tweaks for launch scan button

prowler-cloud · Feb 24, 2025 · d657f80 · d657f80
1 parent 877a351
commit d657f80
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 34 deletions.
diff --git a/ui/components/ui/sidebar-new/collapse-menu-button.tsx b/ui/components/ui/sidebar-new/collapse-menu-button.tsx
@@ -33,6 +33,7 @@ type Submenu = {
   href: string;
   label: string;
   active?: boolean;
+  icon: LucideIcon;
 };
 
 interface CollapseMenuButtonProps {
@@ -73,7 +74,7 @@ export function CollapseMenuButton({
       >
         <Button
           variant={isSubmenuActive ? "secondary" : "ghost"}
-          className="mb-1 h-10 w-full justify-start"
+          className="mb-1 h-7 w-full justify-start"
         >
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center">
@@ -108,21 +109,25 @@ export function CollapseMenuButton({
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden">
-        {submenus.map(({ href, label, active }, index) => (
+        {submenus.map(({ href, label, active, icon: SubIcon }, index) => (
           <Button
             key={index}
             variant={
               (active === undefined && pathname === href) || active
                 ? "secondary"
                 : "ghost"
             }
-            className="ml-4 h-9 w-full justify-start"
+            className="ml-4 h-8 w-full justify-start"
             asChild
           >
-            <Link href={href}>
+            <Link href={href} className="flex items-center">
+              <div className="mr-4 h-full border-l border-default-200"></div>
+              <span className="mr-2">
+                <SubIcon size={16} />
+              </span>
               <p
                 className={cn(
-                  "max-w-[170px] truncate border-l border-default-200 pl-4",
+                  "max-w-[170px] truncate",
                   isOpen
                     ? "translate-x-0 opacity-100"
                     : "-translate-x-96 opacity-0",
@@ -173,15 +178,16 @@ export function CollapseMenuButton({
           {label}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {submenus.map(({ href, label, active }, index) => (
+        {submenus.map(({ href, label, active, icon: SubIcon }, index) => (
           <DropdownMenuItem key={index} asChild>
             <Link
-              className={`cursor-pointer ${
+              className={`flex cursor-pointer items-center gap-2 ${
                 ((active === undefined && pathname === href) || active) &&
                 "bg-secondary"
               }`}
               href={href}
             >
+              <SubIcon size={16} />
               <p className="max-w-[180px] truncate">{label}</p>
             </Link>
           </DropdownMenuItem>

diff --git a/ui/components/ui/sidebar-new/menu.tsx b/ui/components/ui/sidebar-new/menu.tsx
@@ -29,27 +29,29 @@ export function Menu({ isOpen }: MenuProps) {
 
   return (
     <>
-      <CustomButton
-        asLink="/scans"
-        className="w-full"
-        ariaLabel="Launch Scan"
-        variant="solid"
-        color="action"
-        size="md"
-        endContent={<AddIcon size={20} />}
-      >
-        Launch Scan
-      </CustomButton>
+      <div className="px-2">
+        <CustomButton
+          asLink="/scans"
+          className={cn(isOpen ? "w-full" : "w-fit")}
+          ariaLabel="Launch Scan"
+          variant="solid"
+          color="action"
+          size="md"
+          endContent={isOpen ? <AddIcon size={20} /> : null}
+        >
+          {isOpen ? "Launch Scan" : <AddIcon size={20} />}
+        </CustomButton>
+      </div>
       <ScrollShadow hideScrollBar className="[&>div>div[style]]:!block">
-        <nav className="mt-8 h-full w-full">
+        <nav className="mt-2 h-full w-full lg:mt-6">
           <ul className="flex min-h-[calc(100vh-48px-36px-16px-32px)] flex-col items-start space-y-1 px-2 lg:min-h-[calc(100vh-32px-40px-32px)]">
             {menuList.map(({ groupLabel, menus }, index) => (
               <li
-                className={cn("w-full", groupLabel ? "pt-5" : "")}
+                className={cn("w-full", groupLabel ? "pt-2" : "")}
                 key={index}
               >
                 {(isOpen && groupLabel) || isOpen === undefined ? (
-                  <p className="text-muted-foreground max-w-[248px] truncate px-4 pb-2 text-sm font-medium">
+                  <p className="text-muted-foreground max-w-[248px] truncate px-4 pb-2 text-xs font-normal">
                     {groupLabel}
                   </p>
                 ) : !isOpen && isOpen !== undefined && groupLabel ? (
@@ -86,7 +88,7 @@ export function Menu({ isOpen }: MenuProps) {
                                     ? "secondary"
                                     : "ghost"
                                 }
-                                className="mb-1 h-9 w-full justify-start"
+                                className="mb-1 h-8 w-full justify-start"
                                 asChild
                               >
                                 <Link href={href}>

diff --git a/ui/components/ui/sidebar-new/sidebar.tsx b/ui/components/ui/sidebar-new/sidebar.tsx
@@ -43,7 +43,7 @@ export function Sidebar() {
           <Link
             href="/"
             className={clsx(
-              "mb-10 flex w-full flex-col items-center justify-center gap-y-8 px-3",
+              "mb-6 flex w-full flex-col items-center justify-center px-3",
               {
                 "gap-0": !isOpen,
               },

diff --git a/ui/lib/menu-list.ts b/ui/lib/menu-list.ts
@@ -6,12 +6,26 @@ import {
   SquarePen,
   Tag,
   Users,
+  ShieldCheck,
+  AlertCircle,
+  Cloud,
+  Database,
+  Server,
+  Boxes,
+  CloudCog,
+  Group,
+  Timer,
+  UserCog,
+  User,
+  Mail,
+  SquareChartGantt,
 } from "lucide-react";
 
 type Submenu = {
   href: string;
   label: string;
   active?: boolean;
+  icon: LucideIcon;
 };
 
 type Menu = {
@@ -38,8 +52,8 @@ export function getMenuList(pathname: string): Group[] {
           label: "Analytics",
           icon: LayoutGrid,
           submenus: [
-            { href: "/", label: "Overview" },
-            { href: "/compliance", label: "Compliance" },
+            { href: "/", label: "Overview", icon: SquareChartGantt },
+            { href: "/compliance", label: "Compliance", icon: ShieldCheck },
           ],
           defaultOpen: true,
         },
@@ -57,10 +71,12 @@ export function getMenuList(pathname: string): Group[] {
             {
               href: "/findings?filter[status__in]=FAIL&sort=severity,-inserted_at",
               label: "Misconfigurations",
+              icon: AlertCircle,
             },
             {
               href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=aws%2Cazure%2Cgcp%2Ckubernetes&filter[service__in]=iam%2Crbac&sort=-inserted_at",
               label: "IAM Issues",
+              icon: ShieldCheck,
             },
           ],
           defaultOpen: false,
@@ -73,18 +89,22 @@ export function getMenuList(pathname: string): Group[] {
             {
               href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=aws&sort=severity,-inserted_at",
               label: "Amazon Web Services",
+              icon: Cloud,
             },
             {
               href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=azure&sort=severity,-inserted_at",
               label: "Microsoft Azure",
+              icon: Database,
             },
             {
               href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=gcp&sort=severity,-inserted_at",
               label: "Google Cloud",
+              icon: Server,
             },
             {
               href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=kubernetes&sort=severity,-inserted_at",
               label: "Kubernetes",
+              icon: Boxes,
             },
           ],
           defaultOpen: false,
@@ -98,32 +118,32 @@ export function getMenuList(pathname: string): Group[] {
     },
 
     {
-      groupLabel: "",
+      groupLabel: "Settings",
       menus: [
         {
           href: "",
-          label: "Settings",
+          label: "Configuration",
           icon: Settings,
           submenus: [
-            { href: "/providers", label: "Cloud Providers" },
-            { href: "/manage-groups", label: "Provider Groups" },
-            { href: "/scans", label: "Scan Jobs" },
-            { href: "/roles", label: "Roles" },
+            { href: "/providers", label: "Cloud Providers", icon: CloudCog },
+            { href: "/manage-groups", label: "Provider Groups", icon: Group },
+            { href: "/scans", label: "Scan Jobs", icon: Timer },
+            { href: "/roles", label: "Roles", icon: UserCog },
           ],
           defaultOpen: true,
         },
       ],
     },
     {
-      groupLabel: "Memberships",
+      groupLabel: "Workspace",
       menus: [
         {
           href: "",
           label: "Memberships",
           icon: Users,
           submenus: [
-            { href: "/users", label: "Users" },
-            { href: "/invitations", label: "Invitations" },
+            { href: "/users", label: "Users", icon: User },
+            { href: "/invitations", label: "Invitations", icon: Mail },
           ],
           defaultOpen: false,
         },