4 files changed, 14 insertions, 11 deletions

diff --git a/frontend/src/components/Sidebar/Content.tsx b/frontend/src/components/Sidebar/Content.tsx
index ceb9e67..6aade15 100644
--- a/frontend/src/components/Sidebar/Content.tsx
+++ b/frontend/src/components/Sidebar/Content.tsx
@@ -18,7 +18,7 @@ interface ContentProps {
 const _Content: React.FC<ContentProps> = ({ isSearching, selectedButtonIndex, handle_sidebar_click }) => {
 
     return (
-        <div className="h-full">
+        <div className="md:h-full">
 
             <div className="px-2 my-2.5">
                 <button onClick={() => handle_sidebar_click(0)} className={`${styles.button} ${selectedButtonIndex == 0 ? styles["button-selected"] : ""} ${isSearching ? styles["button-hidden"] : ""}`}>
diff --git a/frontend/src/components/Sidebar/Search.tsx b/frontend/src/components/Sidebar/Search.tsx
index 00d9e1e..49bcec7 100644
--- a/frontend/src/components/Sidebar/Search.tsx
+++ b/frontend/src/components/Sidebar/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 
 import { Search } from "@customTypes/Search";
@@ -7,21 +7,20 @@ import { UserProfile } from "@customTypes/Profile";
 
 interface SearchProps {
     profile?: UserProfile;
+    searchbarRef: React.RefObject<HTMLInputElement | null>;
 };
 
-const _Search: React.FC<SearchProps> = ({ profile }) => {
+const _Search: React.FC<SearchProps> = ({ profile, searchbarRef }) => {
     const [searchData, setSearchData] = React.useState<Search | undefined>(
         undefined
     );
 
-    const searchbarRef = useRef<HTMLInputElement>(null);
-
     const _handle_search_change = async (q: string) => {
         const searchResponse = await API.get_search(q);
         setSearchData(searchResponse);
     };
     return (
-        <div className="flex w-full flex-col justify-between p-3">
+        <div className="flex w-full flex-col p-3 not-md:absolute">
             <input
                 ref={searchbarRef}
                 type="text"
diff --git a/frontend/src/components/Sidebar/Sidebar.module.css b/frontend/src/components/Sidebar/Sidebar.module.css
index 9baf415..6e43254 100644
--- a/frontend/src/components/Sidebar/Sidebar.module.css
+++ b/frontend/src/components/Sidebar/Sidebar.module.css
@@ -7,6 +7,7 @@
     transition: all 0.2s ease;
     padding: 4px 0px;
     height: 48px;
+    gap: 24px;
 }
 
 .button:hover,
@@ -25,7 +26,7 @@ button>span {
     font-size: 22px;
     font-family: var(--font-barlow-semicondensed-regular);
     white-space: nowrap;
-    margin-left: 16px;
+    transition: all 0.2s ease;
 }
 
 .button-hidden>span {
diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index 77e23a6..f280a59 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useRef } from "react";
 import { useLocation } from "react-router-dom";
 import { UserProfile } from "@customTypes/Profile";
 
@@ -24,6 +24,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   const [isSearching, setIsSearching] = React.useState<boolean>(false);
   const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
 
+  const searchbarRef = useRef<HTMLInputElement>(null);
+
   const location = useLocation();
   const path = location.pathname;
 
@@ -34,6 +36,7 @@ const Sidebar: React.FC<SidebarProps> = ({
       if (clicked_sidebar_idx == 0 && !isSearching) {
         if (!isSearching) {
           setIsSearching(true);
+          searchbarRef.current?.focus();
         }
       } else {
         setIsSearching(false);
@@ -57,13 +60,13 @@ const Sidebar: React.FC<SidebarProps> = ({
   }, [path]);
 
   return (
-    <div className={`h-screen w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row not-md:bg-gradient-to-t not-md:from-block not-md:to-bright
+    <div className={`md:h-screen w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row not-md:bg-gradient-to-t not-md:from-block not-md:to-bright
       }`}>
 
       {/* Header */}
       <_Header />
 
-      <div className="flex flex-1 overflow-hidden w-full not-md:hidden ">
+      <div className="flex flex-1 overflow-hidden w-full">
         <div className={`flex flex-col transition-all duration-300 ${isSearching ? "w-[64px]" : "w-full"}`}>
           {/* Sidebar Content */}
           <_Content isSearching={isSearching} selectedButtonIndex={selectedButtonIndex} handle_sidebar_click={handle_sidebar_click} />
@@ -73,7 +76,7 @@ const Sidebar: React.FC<SidebarProps> = ({
         </div>
 
         <div className={`flex bg-panel ${isSearching ? 'w-full' : "w-0"}`}>
-          <_Search profile={profile} />
+          <_Search profile={profile} searchbarRef={searchbarRef} />
         </div>
 
       </div>