styles fix

frontend/src/components/Sidebar.css

@@ -23,8 +23,7 @@
   }
   
   .sidebar.closed {
-    width: 100px;
-    height: 1px;
+    width: 0;
   }
 
   .sidebar-header {
@@ -84,6 +83,14 @@
     padding: 16px;
     margin-bottom: 20px;
   }
+
+  @media only screen and (orientation: portrait) {
+    .sidebar-footer {
+        padding: 16px;
+        margin-bottom: 100px;
+      }
+}
+
   
   .sidebar-item {
     display: flex;

frontend/src/components/Sidebar.js

@@ -4,7 +4,15 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import "./Sidebar.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars, faCogs, faHome, faStar, faTv, faFilm, faBookBookmark } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faCogs,
+  faHome,
+  faStar,
+  faTv,
+  faFilm,
+  faBookBookmark,
+} from "@fortawesome/free-solid-svg-icons";
 
 const Sidebar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -43,57 +51,63 @@ const Sidebar = () => {
         {isOpen && <h1 className="sidebar-title">Streamz</h1>}
       </div>
       <div className="sidebar-content">
-      {isOpen && (
-        <div className="sidebar-menu">
-          <Link
-            href="/"
-            className={`sidebar-link ${pathname === "/" ? "active" : ""}`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <SidebarItem icon={faHome} text="Home" />
-          </Link>
-          <Link
-            href="/films"
-            className={`sidebar-link ${pathname === "/films" ? "active" : ""}`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <SidebarItem icon={faFilm} text="Movies" />
-          </Link>
-          <Link
-            href="/tvshows"
-            className={`sidebar-link ${
-              pathname === "/tvshows" ? "active" : ""
-            }`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <SidebarItem icon={faTv} text="Series" />
-          </Link>
-          <Link
-            href="/new"
-            className={`sidebar-link ${pathname === "/new" ? "active" : ""}`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <SidebarItem icon={faStar} text="New" />
-          </Link>
-          <Link
-            href="/mylist"
-            className={`sidebar-link ${pathname === "/mylist" ? "active" : ""}`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <SidebarItem icon={faBookBookmark} text="My List" />
-          </Link>
-        </div>
-      )}
-      {isOpen && (
-        <div className="sidebar-footer">
-          <SidebarItem icon={faCogs} text="Settings" />
-        </div>
-      )}
+        {isOpen && (
+          <div className="sidebar-menu">
+            <Link
+              href="/"
+              className={`sidebar-link ${pathname === "/" ? "active" : ""}`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faHome} text="Home" />
+            </Link>
+            <Link
+              href="/films"
+              className={`sidebar-link ${
+                pathname === "/films" ? "active" : ""
+              }`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faFilm} text="Movies" />
+            </Link>
+            <Link
+              href="/tvshows"
+              className={`sidebar-link ${
+                pathname === "/tvshows" ? "active" : ""
+              }`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faTv} text="Series" />
+            </Link>
+            <Link
+              href="/new"
+              className={`sidebar-link ${
+                pathname === "/new" ? "active" : ""
+              }`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faStar} text="New" />
+            </Link>
+            <Link
+              href="/mylist"
+              className={`sidebar-link ${
+                pathname === "/mylist" ? "active" : ""
+              }`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faBookBookmark} text="My List" />
+            </Link>
+          </div>
+        )}
+        {isOpen && (
+          <div className="sidebar-footer">
+            <SidebarItem icon={faCogs} text="Settings" />
+          </div>
+        )}
       </div>
     </div>
   );