sidebar mobile start

Author: Quint-S

src/components/Sidebar.tsx

@@ -1,82 +1,115 @@
 import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
-const SidebarContainer = styled.div`
-    width: 200px;
-    //background-color: rgba(0, 0, 0, 0.1);
-    padding: 16px;
+const SidebarContainer = styled.div<{ $isExpanded: boolean }>`
+    width: ${props => props.$isExpanded ? '180px' : '20px'};
+    padding: ${props => props.$isExpanded ? '16px' : '1px'};
     border-radius: 2px;
     border: 1px solid #0050a1;
     margin-right: 5px;
+    transition: width 0.2s ease;
     
     &:focus {outline:0;}
 `
 
-const NavItem = styled(NavLink)`
+const NavItem = styled(NavLink)<{ $isExpanded: boolean }>`
     display: block;
-    padding: 8px;
+    padding: ${props => props.$isExpanded ? '8px' : '1px'};
     margin: 4px 0;
     color: #e04bff;
     text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     &:hover {
+        translate: ${props => !props.$isExpanded ? "''" : "-8px"};
         text-decoration: none;
     }
 
     &:hover:after {
         color: #535bf2;
-        content: '<';
+        content: ']';
     }
 
-    &.hovered:after {
+    &:hover:before {
         color: #535bf2;
-        content: '<';
+        content: ${props => !props.$isExpanded ? "''" : "'['"};
     }
 
-    &.active:before {
+    &.hovered {
+        translate: -8px;
+
+    }
+    
+    &.hovered:after {
+        color: #535bf2;
+        content: ']';
+    }
+    &.hovered:before {
         color: #535bf2;
-        content: '>';
+        content: '[';
     }
 `
 
-
 export const Sidebar = () => {
     const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+
     const navItems = [
-      { to: "/", label: "Home" },
+        { to: "/", label: "Home" },
         { to: "/accounts", label: "Accounts" },
         { to: "/agents", label: "Agents" },
         { to: "/transfers", label: "Transfers" },
         { to: "/blocks", label: "Blocks" },
-      { to: "/extrinsics", label: "Extrinsics" },
-      { to: "/events", label: "Events" }
+        { to: "/extrinsics", label: "Extrinsics" },
+        { to: "/events", label: "Events" }
     ];
-  
+    // Add mobile detection
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth < 768);
+            if (window.innerWidth >= 768) {
+                setIsExpanded(true);
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === 'ArrowDown') {
-        setFocusedIndex(prev => (prev + 1) % navItems.length);
-      } else if (e.key === 'ArrowUp') {
-        setFocusedIndex(prev => (prev - 1 + navItems.length) % navItems.length);
-      } else if (e.key === 'Enter') {
-          // setFocusedIndex(-1);
-        const link = document.getElementById(`nav-item-${focusedIndex}`);
-        link?.click();
-      }
+        if (e.key === 'ArrowDown') {
+            setFocusedIndex(prev => (prev + 1) % navItems.length);
+        } else if (e.key === 'ArrowUp') {
+            setFocusedIndex(prev => (prev - 1 + navItems.length) % navItems.length);
+        } else if (e.key === 'Enter') {
+            // setFocusedIndex(-1);
+            const link = document.getElementById(`nav-item-${focusedIndex}`);
+            link?.click();
+        }
     };
-  
+
     return (
-      <SidebarContainer onKeyDown={handleKeyDown} tabIndex={0}>
-        {navItems.map((item, index) => (
-          <NavItem
-            key={item.to}
-            to={item.to}
-            id={`nav-item-${index}`}
-            className={focusedIndex === index ? `hovered` : ''}
-          >
-            {item.label}
-          </NavItem>
-        ))}
-      </SidebarContainer>
+        <SidebarContainer
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            $isExpanded={isExpanded || !isMobile}
+            onClick={() => isMobile && setIsExpanded(!isExpanded)}
+        >
+            {navItems.map((item, index) => (
+                <NavItem
+                    key={item.to}
+                    to={item.to}
+                    id={`nav-item-${index}`}
+                    className={focusedIndex === index ? `hovered` : ''}
+                    $isExpanded={isExpanded || !isMobile}
+                >
+                    {isMobile && !isExpanded ? item.label[0] : item.label}
+                </NavItem>
+            ))}
+        </SidebarContainer>
     );
-  }
+}