chore: improve sidebar

Peppermint-Lab · Nov 9, 2024 · 6a84bb4 · 6a84bb4
1 parent 7cbda17
commit 6a84bb4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 45 deletions.
diff --git a/apps/client/@/shadcn/components/app-sidebar.tsx b/apps/client/@/shadcn/components/app-sidebar.tsx
@@ -1,11 +1,11 @@
-import * as React from "react";
 import {
   Building,
   FileText,
-  GalleryVerticalEnd,
+  ListPlus,
   Settings,
-  SquareKanban,
+  SquareKanban
 } from "lucide-react";
+import * as React from "react";
 
 import { NavMain } from "@/shadcn/components/nav-main";
 import {
@@ -16,12 +16,12 @@ import {
   SidebarRail,
   useSidebar,
 } from "@/shadcn/ui/sidebar";
-import ThemeSettings from "../../../components/ThemeSettings";
+import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
-import { useUser } from "../../../store/session";
 import { useEffect, useState } from "react";
-import useTranslation from "next-translate/useTranslation";
 import CreateTicketModal from "../../../components/CreateTicketModal";
+import ThemeSettings from "../../../components/ThemeSettings";
+import { useUser } from "../../../store/session";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const location = useRouter();
@@ -55,6 +55,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       },
     ],
     navMain: [
+      {
+        title: "New Issue",
+        url: ``,
+        icon: ListPlus,
+        isActive: location.pathname === "/" ? true : false,
+        initial: "c",
+      },
       {
         title: t("sl_dashboard"),
         url: `/${locale}/`,

diff --git a/apps/client/@/shadcn/components/nav-main.tsx b/apps/client/@/shadcn/components/nav-main.tsx
@@ -1,9 +1,8 @@
-import { ChevronRight, type LucideIcon } from "lucide-react";
-import { useState, useEffect } from "react";
+import { type LucideIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 
 import {
   SidebarGroup,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -59,7 +58,6 @@ export function NavMain({
             <SidebarMenuItem>
               <SidebarMenuButton
                 tooltip={!hideKeyboardShortcuts ? item.initial : item.title}
-                size="sm"
                 onClick={() => router.push(item.url)}
               >
                 <div className="flex flex-row items-center justify-between w-full">
@@ -84,7 +82,6 @@ export function NavMain({
                 {item.items?.map((subItem) => (
                   <SidebarMenuSubItem key={subItem.title}>
                     <SidebarMenuSubButton
-                      size="sm"
                       onClick={() => router.push(subItem.url)}
                       className="cursor-pointer flex flex-row items-center justify-between w-full px-0 pl-2.5"
                     >
@@ -102,9 +99,17 @@ export function NavMain({
           ) : (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton
-                size="sm"
                 tooltip={!hideKeyboardShortcuts ? item.initial : item.title}
-                onClick={() => router.push(item.url)}
+                onClick={() => {
+                  if (item.url) {
+                    router.push(item.url);
+                  } else {
+                    const event = new KeyboardEvent("keydown", {
+                      key: item.initial,
+                    });
+                    document.dispatchEvent(event);
+                  }
+                }}
               >
                 <div className="flex flex-row items-center justify-between w-full">
                   <div className="flex flex-row items-center gap-x-2 w-full">

diff --git a/apps/client/@/shadcn/ui/sidebar.tsx b/apps/client/@/shadcn/ui/sidebar.tsx
@@ -1,8 +1,8 @@
 //@ts-nocheck
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft } from "lucide-react"
+import * as React from "react"
 
 import { useIsMobile } from "@/shadcn/hooks/use-mobile"
 import { cn } from "@/shadcn/lib/utils"
@@ -534,7 +534,7 @@ const sidebarMenuButtonVariants = cva(
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: "h-8 text-sm",
+        default: "h-8 text-xs text-foreground",
         sm: "h-7 text-xs",
         lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
       },
@@ -772,5 +772,6 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
-  useSidebar,
+  useSidebar
 }
+
diff --git a/apps/client/components/CreateTicketModal/index.tsx b/apps/client/components/CreateTicketModal/index.tsx
@@ -1,16 +1,15 @@
-import React, { useState, useEffect, Fragment } from "react";
-import { Dialog, Transition, Listbox } from "@headlessui/react";
+import { Dialog, Listbox, Transition } from "@headlessui/react";
 import { CheckIcon } from "@heroicons/react/20/solid";
-import useTranslation from "next-translate/useTranslation";
 import { ChevronUpDownIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { getCookie } from "cookies-next";
+import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
+import { Fragment, useEffect, useState } from "react";
 import { useUser } from "../../store/session";
-import { getCookie } from "cookies-next";
 
-import dynamic from "next/dynamic";
-import { ListPlus } from "lucide-react";
 import { toast } from "@/shadcn/hooks/use-toast";
 import { useSidebar } from "@/shadcn/ui/sidebar";
+import dynamic from "next/dynamic";
 
 const Editor = dynamic(() => import("../BlockEditor"), { ssr: false });
 
@@ -179,29 +178,6 @@ export default function CreateTicketModal({ keypress, setKeyPressDown }) {
 
   return (
     <>
-      <button
-        onClick={() => setOpen(true)}
-        className={
-          state === "expanded"
-            ? "group gap-x-3 w-[93%] mt-2 mx-3 p-0.5 flex rounded-md text-xs font-semibold leading-6 hover:bg-secondary outline-none"
-            : "flex mx-auto p-1.5 rounded-md text-xs font-semibold leading-6 hover:bg-secondary outline-none"
-        }
-      >
-        <ListPlus className="h-4 w-4 ml-1 shrink-0 mt-1" aria-hidden="true" />
-        {state === "expanded" && (
-          <>
-            <span className="whitespace-nowrap">New Issue</span>
-            {!hideKeyboardShortcuts && (
-              <div className="flex w-full justify-end float-right">
-                <span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
-                  c
-                </span>
-              </div>
-            )}
-          </>
-        )}
-      </button>
-
       <Transition.Root show={open} as={Fragment}>
         <Dialog as="div" className="fixed z-10 inset-0" onClose={setOpen}>
           <div className="flex items-end justify-center min-h-screen align-middle pt-4 mx-4 md:mx-12 text-center -mt-[50%] sm:-mt-0 sm:block sm:p-0">