Add expanding options sidebar

osu.Game/Overlays/Options/Audio/AudioSection.cs

@@ -5,7 +5,7 @@ namespace osu.Game.Overlays.Options.Audio
 {
     public class AudioSection : OptionsSection
     {
-        protected override string Header => "Audio";
+        public override string Header => "Audio";
         public override FontAwesome Icon => FontAwesome.fa_headphones;
 
         public AudioSection()

osu.Game/Overlays/Options/EditorSection.cs

@@ -9,7 +9,7 @@ namespace osu.Game.Overlays.Options
 {
     public class EditorSection : OptionsSection
     {
-        protected override string Header => "Editor";
+        public override string Header => "Editor";
         public override FontAwesome Icon => FontAwesome.fa_pencil;
 
         private CheckBoxOption backgroundVideo, defaultSkin, snakingSliders, hitAnimations, followPoints, stacking;

osu.Game/Overlays/Options/Gameplay/GameplaySection.cs

@@ -5,7 +5,7 @@ namespace osu.Game.Overlays.Options.Gameplay
 {
     public class GameplaySection : OptionsSection
     {
-        protected override string Header => "Gameplay";
+        public override string Header => "Gameplay";
         public override FontAwesome Icon => FontAwesome.fa_circle_o;
 
         public GameplaySection()

osu.Game/Overlays/Options/General/GeneralSection.cs

@@ -5,7 +5,7 @@ namespace osu.Game.Overlays.Options.General
 {
     public class GeneralSection : OptionsSection
     {
-        protected override string Header => "General";
+        public override string Header => "General";
         public override FontAwesome Icon => FontAwesome.fa_gear;
 
         public GeneralSection()

osu.Game/Overlays/Options/Graphics/GraphicsSection.cs

@@ -5,7 +5,7 @@ namespace osu.Game.Overlays.Options.Graphics
 {
     public class GraphicsSection : OptionsSection
     {
-        protected override string Header => "Graphics";
+        public override string Header => "Graphics";
         public override FontAwesome Icon => FontAwesome.fa_laptop;
 
         public GraphicsSection()

osu.Game/Overlays/Options/Input/InputSection.cs

@@ -5,7 +5,7 @@ namespace osu.Game.Overlays.Options.Input
 {
     public class InputSection : OptionsSection
     {
-        protected override string Header => "Input";
+        public override string Header => "Input";
         public override FontAwesome Icon => FontAwesome.fa_keyboard_o;
 
         public InputSection()

osu.Game/Overlays/Options/MaintenanceSection.cs

@@ -8,7 +8,7 @@ namespace osu.Game.Overlays.Options
 {
     public class MaintenanceSection : OptionsSection
     {
-        protected override string Header => "Maintenance";
+        public override string Header => "Maintenance";
         public override FontAwesome Icon => FontAwesome.fa_wrench;
 
         public MaintenanceSection()

osu.Game/Overlays/Options/Online/OnlineSection.cs

@@ -5,7 +5,7 @@ namespace osu.Game.Overlays.Options.Online
 {
     public class OnlineSection : OptionsSection
     {
-        protected override string Header => "Online";
+        public override string Header => "Online";
         public override FontAwesome Icon => FontAwesome.fa_globe;
 
         public OnlineSection()

osu.Game/Overlays/Options/OptionsSection.cs

@@ -14,7 +14,7 @@ namespace osu.Game.Overlays.Options
         protected override Container<Drawable> Content => content;
 
         public abstract FontAwesome Icon { get; }
-        protected abstract string Header { get; }
+        public abstract string Header { get; }
 
         public OptionsSection()
         {

osu.Game/Overlays/Options/OptionsSidebar.cs

@@ -4,7 +4,9 @@ using OpenTK.Graphics;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Transformations;
 using osu.Framework.Input;
+using osu.Framework.Threading;
 using osu.Game.Graphics;
 
 namespace osu.Game.Overlays.Options
@@ -12,6 +14,7 @@ namespace osu.Game.Overlays.Options
     public class OptionsSidebar : Container
     {
         private FlowContainer content;
+        internal const int default_width = 60, expanded_width = 200;
         protected override Container<Drawable> Content => content;
 
         public OptionsSidebar()
@@ -41,6 +44,25 @@ namespace osu.Game.Overlays.Options
             };
         }
 
+        private ScheduledDelegate expandEvent;
+        
+        protected override bool OnHover(InputState state)
+        {
+            expandEvent = Scheduler.AddDelayed(() =>
+            {
+                expandEvent = null;
+                ResizeTo(new Vector2(expanded_width, Height), 150, EasingTypes.OutQuad);
+            }, 750);
+            return true;
+        }
+        
+        protected override void OnHoverLost(InputState state)
+        {
+            expandEvent?.Cancel();
+            ResizeTo(new Vector2(default_width, Height), 150, EasingTypes.OutQuad);
+            base.OnHoverLost(state);
+        }
+
         private class SidebarScrollContainer : ScrollContainer
         {
             public SidebarScrollContainer()
@@ -53,6 +75,7 @@ namespace osu.Game.Overlays.Options
         public class SidebarButton : Container
         {
             private TextAwesome drawableIcon;
+            private SpriteText headerText;
             private Box backgroundBox;
             public Action Action;
 
@@ -61,10 +84,17 @@ namespace osu.Game.Overlays.Options
                 get { return drawableIcon.Icon; }
                 set { drawableIcon.Icon = value; }
             }
+            
+            public string Header
+            {
+                get { return headerText.Text; }
+                set { headerText.Text = value; }
+            }
 
             public SidebarButton()
             {
-                Size = new Vector2(60);
+                Height = default_width;
+                RelativeSizeAxes = Axes.X;
                 Children = new Drawable[]
                 {
                     backgroundBox = new Box
@@ -74,11 +104,25 @@ namespace osu.Game.Overlays.Options
                         Colour = new Color4(60, 60, 60, 255),
                         Alpha = 0,
                     },
-                    drawableIcon = new TextAwesome
+                    new Container
                     {
-                        Anchor = Anchor.Centre,
+                        Width = default_width,
-                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.Y,
+                        Children = new[]
+                        {
+                            drawableIcon = new TextAwesome
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                            },
+                        }
                     },
+                    headerText = new SpriteText
+                    {
+                        Position = new Vector2(default_width + 10, 0),
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                    }
                 };
             }
 
@@ -92,12 +136,13 @@ namespace osu.Game.Overlays.Options
             protected override bool OnHover(InputState state)
             {
                 backgroundBox.FadeTo(0.4f, 200);
-                return true;
+                return base.OnHover(state);
             }
 
             protected override void OnHoverLost(InputState state)
             {
                 backgroundBox.FadeTo(0, 200);
+                base.OnHoverLost(state);
             }
         }
     }

osu.Game/Overlays/Options/SkinSection.cs

@@ -11,7 +11,7 @@ namespace osu.Game.Overlays.Options
 {
     public class SkinSection : OptionsSection
     {
-        protected override string Header => "Skin";
+        public override string Header => "Skin";
         public override FontAwesome Icon => FontAwesome.fa_paint_brush;
 
         private CheckBoxOption ignoreSkins, useSkinSoundSamples, useTaikoSkin, useSkinCursor, autoCursorSize;

osu.Game/Overlays/OptionsOverlay.cs

@@ -27,7 +27,8 @@ namespace osu.Game.Overlays
         internal const float CONTENT_MARGINS = 10;
 
         private const float width = 400;
-        private const float sidebar_width = 60;
+        private const float sidebar_width = OptionsSidebar.default_width;
+        private const float sidebar_padding = 10;
 
         private ScrollContainer scrollContainer;
         private OptionsSidebar sidebar;
@@ -105,7 +106,8 @@ namespace osu.Game.Overlays
                         new OptionsSidebar.SidebarButton
                         {
                             Icon = section.Icon,
-                            Action = () => scrollContainer.ScrollIntoView(section)
+                            Header = section.Header,
+                            Action = () => scrollContainer.ScrollIntoView(section),
                         }
                     )
                 }