add initial files

src/renderer/features/titlebar/components/Titlebar.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { Group } from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import { ChevronLeft, ChevronRight } from 'tabler-icons-react';
+import { IconButton } from 'renderer/components';
+import { WindowControls } from 'renderer/features/window-controls';
+
+interface TitlebarProps {
+  children?: ReactNode;
+}
+
+const TitlebarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  -webkit-app-region: drag;
+`;
+
+const Left = styled.div`
+  height: 100%;
+
+  button {
+    -webkit-app-region: no-drag;
+
+    svg {
+      transform: scaleX(1);
+    }
+  }
+`;
+
+const Right = styled.div`
+  height: 100%;
+  -webkit-app-region: no-drag;
+`;
+
+export const Titlebar = ({ children }: TitlebarProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <TitlebarContainer>
+        <Left>
+          <Group spacing="xs">
+            <IconButton
+              icon={<ChevronLeft size={25} strokeWidth={1.5} />}
+              size={25}
+              onClick={() => navigate(-1)}
+            />
+            <IconButton
+              icon={<ChevronRight size={25} strokeWidth={1.5} />}
+              size={25}
+              onClick={() => navigate(1)}
+            />
+          </Group>
+        </Left>
+        <Right>
+          {children}
+
+          <WindowControls />
+        </Right>
+      </TitlebarContainer>
+    </>
+  );
+};
+
+Titlebar.defaultProps = {
+  children: <></>,
+};

src/renderer/features/titlebar/components/UserMenu.tsx

@@ -0,0 +1,47 @@
+import { Button, Menu } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useNavigate } from 'react-router';
+import { Logout, Server, Settings } from 'tabler-icons-react';
+import { AddServerModal } from 'renderer/features/servers';
+import { useAuthStore } from 'renderer/store';
+
+export const UserMenu = () => {
+  const navigate = useNavigate();
+  const [addServerModal, addServerHandlers] = useDisclosure(false);
+  const logout = useAuthStore((state) => state.logout);
+
+  const handleLogout = () => {
+    logout();
+    localStorage.removeItem('authentication');
+    navigate('/login');
+  };
+
+  return (
+    <>
+      <Menu
+        control={
+          <Button radius="lg" size="xs" variant="default">
+            User
+          </Button>
+        }
+        position="bottom"
+        size="md"
+      >
+        <Menu.Item
+          icon={<Server size={20} />}
+          onClick={() => addServerHandlers.open()}
+        >
+          Servers
+        </Menu.Item>
+        <Menu.Item icon={<Settings size={20} />}>Settings</Menu.Item>
+        <Menu.Item icon={<Logout size={20} />} onClick={handleLogout}>
+          Logout
+        </Menu.Item>
+      </Menu>
+      <AddServerModal
+        opened={addServerModal}
+        onClose={() => addServerHandlers.close()}
+      />
+    </>
+  );
+};