add responsiveness

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -21,6 +21,9 @@ import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
 import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
 import SearchBar from "../searchbar/SearchBar";
+import ViewLogsIcon from "../icons/viewLogs";
+import PublishIcon from "../icons/publish";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -32,6 +35,7 @@ const TopHeader = (props) => {
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
+  const isMobile = useIsMobile();
   return (
     <>
       {triggerAlert && (
@@ -83,7 +87,7 @@ const TopHeader = (props) => {
           {props?.requiredButtons.includes("add") && (
             <PrimaryButton
               icon={<AddIcon />}
-              text={props?.buttonText}
+              text={isMobile ? "" : props?.buttonText}
               onClick={handleNavigateToAdd}
             />
           )}
@@ -167,6 +171,18 @@ const TopHeader = (props) => {
               </div>
               {triggerDropDownMenu && (
                 <div className={styles.dropDown}>
+                  <div>
+                    <div>
+                      <ViewLogsIcon />
+                      <p>View Logs</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <PublishIcon />
+                      <p>Publish Service</p>
+                    </div>
+                  </div>
                   <div>
                     <div>
                       <OutlineDownloadIcon />