feat: responsive sidebar

src/pages/DspPage/DspPage.tsx

@@ -32,6 +32,101 @@ function DSPPage({
       label: 'Gain',
       icon: <KnobGainIcon />,
     },
+    {
+      id: 'gate',
+      label: 'Gate',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'compressor',
+      label: 'Compressor',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'limiter',
+      label: 'Limiter',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'delay',
+      label: 'Delay',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'matrix',
+      label: 'Matrix',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'geq',
+      label: 'Graphic Equalizer',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'ina',
+      label: 'In A',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'inb',
+      label: 'In B',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'inc',
+      label: 'In C',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'ind',
+      label: 'In D (TESTTEST)',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out1',
+      label: 'Out 1',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out2',
+      label: 'Out 2',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out3',
+      label: 'Out 3',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out4',
+      label: 'Out 4',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out5',
+      label: 'Out 5',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out6',
+      label: 'Out 6',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out7',
+      label: 'Out 7',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'out8',
+      label: 'Out 8',
+      icon: <KnobGainIcon />,
+    },
+    {
+      id: 'miscellaneous',
+      label: 'Miscellaneous',
+      icon: <KnobGainIcon />,
+    },
   ];
 
   const renderTab = () => {