spotube/lib/components/Home/Sidebar.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter/material.dart';
import 'package:spotify/spotify.dart' hide Image;
import 'package:spotube/components/Settings.dart';
import 'package:spotube/components/Shared/SpotubePageRoute.dart';
import 'package:spotube/helpers/image-to-url-string.dart';
import 'package:spotube/provider/SpotifyDI.dart';

import '../../models/sideBarTiles.dart';

class Sidebar extends HookConsumerWidget {
  final int selectedIndex;
  final void Function(int) onSelectedIndexChanged;

  const Sidebar({
    required this.selectedIndex,
    required this.onSelectedIndexChanged,
    Key? key,
  }) : super(key: key);

  Widget _buildSmallLogo() {
    return Image.asset(
      "assets/spotube-logo.png",
      height: 50,
      width: 50,
    );
  }

  void _goToSettings(BuildContext context) {
    Navigator.of(context).push(SpotubePageRoute(
      child: const Settings(),
    ));
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final width = MediaQuery.of(context).size.width;
    if (width <= 400) return Container();
    final extended = useState(false);
    final SpotifyApi spotify = ref.watch(spotifyProvider);
    useEffect(() {
      if (width <= 700 && extended.value) {
        extended.value = false;
      } else if (width > 700 && !extended.value) {
        extended.value = true;
      }
    });

    return NavigationRail(
      destinations: sidebarTileList
          .map((e) => NavigationRailDestination(
                icon: Icon(e.icon),
                label: Text(
                  e.title,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ))
          .toList(),
      selectedIndex: selectedIndex,
      onDestinationSelected: onSelectedIndexChanged,
      extended: extended.value,
      leading: extended.value
          ? Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(children: [
                _buildSmallLogo(),
                const SizedBox(
                  width: 10,
                ),
                Text("Spotube", style: Theme.of(context).textTheme.headline4),
              ]),
            )
          : _buildSmallLogo(),
      trailing: FutureBuilder<User>(
        future: spotify.me.get(),
        builder: (context, snapshot) {
          var avatarImg = imageToUrlString(snapshot.data?.images,
              index: (snapshot.data?.images?.length ?? 1) - 1);
          return extended.value
              ? Padding(
                  padding: const EdgeInsets.all(16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          CircleAvatar(
                            backgroundImage:
                                CachedNetworkImageProvider(avatarImg),
                          ),
                          const SizedBox(width: 10),
                          Text(
                            snapshot.data?.displayName ?? "User's name",
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                      IconButton(
                          icon: const Icon(Icons.settings_outlined),
                          onPressed: () => _goToSettings(context)),
                    ],
                  ))
              : InkWell(
                  onTap: () => _goToSettings(context),
                  child: CircleAvatar(
                    backgroundImage: CachedNetworkImageProvider(avatarImg),
                  ),
                );
        },
      ),
    );
  }
}